flex + spring + BlazeDS + google App JDO 实现一个CRUD.
flex + spring + BlazeDS + google App JDO 实现一个CRUD.
分页在上一个 博客讲了
如何做一个分页.现在要在这个分页上面在做一个CURUD.
列表页面
form页面.表单.
删除页面,可以删除单个和多个.
查询页面.支持分页查询.
最重要的是分页列表里面.删除一个后.要刷新数据.
调用.outerDocument.removeOne([data.id.toString()]);
用 flex 做的ajax 效果不错. 代码写的也很少.很方便的维护.
SystemUserList.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#EEEEEE" width="100%" fontSize="12" initialize="initApp();" height="100%"
xmlns:common="common.page.*">
<mx:RemoteObject id="systemUserService" destination="systemUserService">
<mx:method name="remove" result="removeHandler(event)"/>
<mx:method name="list" result="listHandler(event)"/>
<mx:method name="listSize" result="listSizeHandler(event)"/>
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import systemUser.model.SystemUser;
import mx.events.CloseEvent;
import common.event.DataGridDeleteEvent;
import common.event.DataGridEditEvent;
import common.event.DataGridCheckBoxEvent;
import mx.collections.ArrayCollection;
import mx.events.ItemClickEvent;
import mx.rpc.events.ResultEvent;
import common.page.PageConf;
import mx.controls.Alert;
import mx.managers.PopUpManager;
//列表显示数据.
[Bindable]
private var listData:ArrayCollection;
private var myPageConf:PageConf;
//初始化函数.
private function initApp():void{
//定义一个默认加载类.
myPageConf = new PageConf(0,15,0);
//第一次默认查询数据.
systemUserService.listSize(getCommonPage());
//给通用分页Bar绑定事件.
commonPageBar.pageLikBar.addEventListener(ItemClickEvent.ITEM_CLICK,
function(event:ItemClickEvent):void{//匿名函数.
myPageConf.pageItemClick(event, commonPageBar.pageInfo);
systemUserService.listSize(getCommonPage());
});
}
//通用查询,返回Map参数.
private function getCommonPage():Object{
var objMap:Object = new Object();
if(loginName_search.text != ""){objMap["loginName,=="] = loginName_search.text;}
if(passwd_search.text != ""){objMap["passwd,=="] = passwd_search.text;}
if(name_search.text != ""){objMap["name,=="] = name_search.text;}
if(phone_search.text != ""){objMap["phone,=="] = phone_search.text;}
if(email_search.text != ""){objMap["email,=="] = email_search.text;}
return objMap;
}
//新建Form弹出窗口.
public function addForm(id:String):void
{
var addForm:SystemUserForm = new SystemUserForm();
if(id != null){
addForm.formId = id;//将id赋值,查询交给form.
}
//添加保存事件响应,保存后刷新数据.
addForm.addEventListener("saveSystemUser",
function(event:Event):void{//匿名函数.
systemUserService.listSize(getCommonPage());
});
PopUpManager.addPopUp(addForm, this, true);
PopUpManager.centerPopUp(addForm);
}
//删除单个记录.
public function removeOne(ids:Array):void
{
Alert.show("是否确认删除?", "提示", 3, this,
function(event:CloseEvent):void{//匿名函数.
if (event.detail == Alert.YES){
systemUserService.remove(ids);
}
});
}
//删除多个记录.
public function removeAll():void
{
Alert.show("是否确认删除?", "提示", 3, this,
function(event:CloseEvent):void{//匿名函数.
if (event.detail == Alert.YES){
var ids:Array = new Array();
for each(var data:Object in dataGrid.selectedItems){
ids.push(data.id);
}
if(ids.length == 0){
Alert.show("请选择数据,按住shift或ctrl进行选择.","提示");
}else{
systemUserService.remove(ids);
}
}
});
}
/*****下面是回调函数.*****/
//查询总数.回调函数.
private function listSizeHandler(event:ResultEvent):void
{
var pageSize:Number = event.result as Number;
myPageConf.total = pageSize;
systemUserService.list(myPageConf.getStart(), myPageConf.getEnd(),getCommonPage());
//查询出总记录数时.显示信息.
myPageConf.showPageInfo(commonPageBar.pageInfo);
}
//查询数据.回调函数.
private function listHandler(event:ResultEvent):void
{
listData = event.result as ArrayCollection;
}
//删除方法.回调函数.
public function removeHandler(event:ResultEvent):void
{
if(event.result.toString() == "true"){
Alert.show("删除成功!","提示");
systemUserService.listSize(getCommonPage());
}else{
Alert.show("删除失败!","提示");
}
}
]]>
</mx:Script>
<!--//列表开始.-->
<mx:VBox>
<mx:HBox width="100%">
<mx:Label text="登录名"/><mx:TextInput id="loginName_search" width="80"/>
<mx:Label text="密码"/><mx:TextInput id="passwd_search" width="80"/>
<mx:Label text="姓名"/><mx:TextInput id="name_search" width="80"/>
<mx:Label text="电话"/><mx:TextInput id="phone_search" width="80"/>
<mx:Label text="email"/><mx:TextInput id="email_search" width="80"/>
<mx:Button label="查询" click="systemUserService.listSize(getCommonPage());"/>
</mx:HBox>
<mx:DataGrid width="100%" height="420" id="dataGrid" allowMultipleSelection="true"
editable="false" dataProvider="{listData}">
<mx:columns>
<mx:DataGridColumn headerText="登录名" dataField="loginName"/>
<mx:DataGridColumn headerText="密码" dataField="passwd"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="电话" dataField="phone"/>
<mx:DataGridColumn headerText="email" dataField="email"/>
<mx:DataGridColumn width="85"><mx:itemRenderer><mx:Component>
<mx:HBox width="100%" height="100%">
<mx:LinkBar height="22" itemClick="itemClick(event);">
<mx:dataProvider><mx:Array>
<mx:String>修改</mx:String>
<mx:String>删除</mx:String>
</mx:Array></mx:dataProvider>
</mx:LinkBar>
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.controls.Alert;
import mx.events.ItemClickEvent;
private function itemClick(itemClick:ItemClickEvent):void{
if(itemClick.index == 0){
outerDocument.addForm(data.id.toString());
}else if(itemClick.index == 1){//删除单个数据.
outerDocument.removeOne([data.id.toString()]);
}
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component></mx:itemRenderer></mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%">
<mx:Button label="新增" click="addForm(null);"/>
<mx:Button label="删除" click="removeAll();"/>
<mx:Spacer width="100"/>
<common:PageBar id="commonPageBar"/>
</mx:HBox>
</mx:VBox>
</mx:Module>
SystemUserForm.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
title="SystemUser表单" initialize="initApp();"
backgroundColor="#EEEEEE" showCloseButton="true"
close="PopUpManager.removePopUp(this);"
borderColor="#869CA7" fontSize="12">
<mx:Style>
.errorTip{fontSize: 12;}
</mx:Style>
<mx:RemoteObject id="systemUserService" destination="systemUserService">
<mx:method name="findById" result="findByIdHandler(event)"/>
<mx:method name="save" result="saveHandler(event)"/>
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.validators.Validator;
import mx.controls.Alert;
import systemUser.model.SystemUser;
import mx.rpc.events.ResultEvent;
import mx.managers.PopUpManager;
public var isValid:Boolean = false;//
public var formId:String = null;//保存ID主键.
//初始化函数.
private function initApp():void{
if(formId != null){//如果formId存在,查询.
systemUserService.findById(formId);
}
}
//查询响应处理.
private function findByIdHandler(event:ResultEvent):void
{
var mySystemUser:SystemUser = event.result as SystemUser;
setFormData(mySystemUser);
}
//保存函数.
private function save():void {
var myValid:Array = Validator.validateAll([//校验表单.
loginName_valid,
passwd_valid,
name_valid,
phone_valid,
email_valid,
createDate_valid,
islock_valid,
loginTimes_valid,
lastLogin_valid
]);
if(myValid.length == 0){
var mySystemUser:SystemUser = new SystemUser();
mySystemUser.loginName = loginName_id.text;
mySystemUser.passwd = passwd_id.text;
mySystemUser.name = name_id.text;
mySystemUser.phone = phone_id.text;
mySystemUser.email = email_id.text;
mySystemUser.createDate = createDate_id.text;
mySystemUser.islock = islock_id.text;
mySystemUser.loginTimes = loginTimes_id.text;
mySystemUser.lastLogin = lastLogin_id.text;
if(formId != null){//如果formId不为null.将值保存.
mySystemUser.id = formId;
}
systemUserService.save(mySystemUser);
}
}
//保存后,关闭.
private function saveHandler(event:ResultEvent):void {
dispatchEvent(new Event("saveSystemUser"));
PopUpManager.removePopUp(this);
}
//当编辑的时候,设置form.
public function setFormData(mySystemUser:SystemUser):void {
loginName_id.text = mySystemUser.loginName;
passwd_id.text = mySystemUser.passwd;
name_id.text = mySystemUser.name;
phone_id.text = mySystemUser.phone;
email_id.text = mySystemUser.email;
createDate_id.text = mySystemUser.createDate;
islock_id.text = mySystemUser.islock;
loginTimes_id.text = mySystemUser.loginTimes;
lastLogin_id.text = mySystemUser.lastLogin;
}
]]>
</mx:Script>
<!--//校验开始.-->
<mx:StringValidator id="loginName_valid" source="{loginName_id}" property="text"/>
<mx:StringValidator id="passwd_valid" source="{passwd_id}" property="text"/>
<mx:StringValidator id="name_valid" source="{name_id}" property="text"/>
<mx:StringValidator id="phone_valid" source="{phone_id}" property="text"/>
<mx:StringValidator id="email_valid" source="{email_id}" property="text"/>
<mx:StringValidator id="createDate_valid" source="{createDate_id}" property="text"/>
<mx:StringValidator id="islock_valid" source="{islock_id}" property="text"/>
<mx:StringValidator id="loginTimes_valid" source="{loginTimes_id}" property="text"/>
<mx:StringValidator id="lastLogin_valid" source="{lastLogin_id}" property="text"/>
<!--//表单开始.-->
<mx:Form id="creditCardForm">
<mx:FormItem label="登录名"><mx:TextInput id="loginName_id"/></mx:FormItem>
<mx:FormItem label="密码"><mx:TextInput id="passwd_id"/></mx:FormItem>
<mx:FormItem label="姓名"><mx:TextInput id="name_id"/></mx:FormItem>
<mx:FormItem label="电话"><mx:TextInput id="phone_id"/></mx:FormItem>
<mx:FormItem label="email"><mx:TextInput id="email_id"/></mx:FormItem>
<mx:FormItem label="创建时间"><mx:TextInput id="createDate_id"/></mx:FormItem>
<mx:FormItem label="是否锁定"><mx:TextInput id="islock_id"/></mx:FormItem>
<mx:FormItem label="登录次数"><mx:TextInput id="loginTimes_id"/></mx:FormItem>
<mx:FormItem label="上次登录时间"><mx:TextInput id="lastLogin_id"/></mx:FormItem>
<mx:FormItem><mx:HBox>
<mx:Button click="save();" label="保存"/>
<mx:Button click="PopUpManager.removePopUp(this);" label="关闭"/>
</mx:HBox></mx:FormItem>
</mx:Form>
</mx:TitleWindow>
附件是全部代码.
功能上面.排序还是没有实现服务端排序.还就是Grid 默认的客户端排序.
其他CRUD 的基本功能都完成了.
部署到服务器上面地址
http://myflexeye.appspot.com/
可以用这个做点小东西了.
下面研究下.拖拽.