此部分的主要内容:
- 测试动态添加grid,grid-CRUD
呵呵,,,还是单独测试、梯形测试的原则,单独建一个grid测试页面,测试完了,copy 源码到目标文件,测试按最基本的单元,首先测试CRUD,接着就是ModuleLoader,再就接着就是跟管理平台的管理页面布局连接,这就是我的梯度测试。
1.Grid-CRUD
1)Java数据方面
源码如下:
User: |
GET、SET略,此为前部分 |
/* * To change this template, choose Tools | Templates * and open the template in the editor. */ package com.gwtjs.model; /** * * @author Administrator * @hibernate.class table="t_user_info" */ public class User { /** * @hibernate.id generator-class="native" */ private int id; /** * @hibernate.property */ private String name; /** * @hibernate.property length="3" */ private String sex; /** * @hibernate.property length="12" */ private String qq; /** * @hibernate.property */ private String email; /** * @hibernate.property */ private String msn; /** * @hibernate.property */ private String address; /** * 职务 * * @hibernate.property */ private String duty; /** * @hibernate.property length="16" */ private String phone; /** * 公司名称只能注册一次,并且不能空@ * @hibernate.property not-null="true" */ private String company; /** * @hibernate.property length="65535" */ private String description; /** * User 1-----1 Login * * @hibernate.one-to-one property-ref="userinfo" */ private Login login; |
Login |
GET、SET略,此为前部分 |
package com.gwtjs.model; import java.util.Date; /** * @hibernate.class table="t_login" */ public class Login { /** * @hibernate.id generator-class="native" */ private int id; /** * 登录帐号 * * @hibernate.property not-null="true" unique="true" */ private String username; /** * 登录密码 * * @hibernate.property not-null="true" */ private String password; /** * 帐号创建时间 * * @hibernate.property update="false" */ private Date createTime; /** * 帐号失效时间 * * @hibernate.property */ private Date expireTime; /** * @hibernate.property */ private Integer status; /** * 对应的人员信息 User 1----1 User * * @hibernate.many-to-one unique="true" */ private User userinfo; |
/** * */ package com.gwtjs.flash.test; import java.util.ArrayList; import java.util.List; import com.gwtjs.model.Login; import com.gwtjs.model.User; /** * @author ZhengGuang Dong * */ public class GridData { public List<User> getUser(int start,int limit){ List<User> list = new ArrayList<User>(); for(int i = 0;i<limit;i++){ User u = new User(); int id = Integer.parseInt(start+""+i); u.setId(id); u.setAddress("湖北省武汉市东西湖区");
u.setCompany("极域网络"); u.setDescription("Grid Test "); u.setDuty("掌门"); u.setEmail("[email protected]"); u.setMsn("[email protected]"); u.setName("董正光"); u.setPhone("135XXXX6066"); u.setQq("213027后面是数字,呵呵。");//注意实际代码没有中文
if(i%2==0) u.setSex("1");
Login l = new Login();
l.setId(id); l.setUsername("admin_"+i); String tl = System.currentTimeMillis()+""; //后六位为密码 String password = tl.substring(tl.length()-6,tl.length()); l.setPassword(password); //user(用户信息)和login(用户登陆)两张表有1:1的关系 u.setLogin(l); list.add(u); } return list; } } |
2)调用数据的配置
<!-- Layout Tree Data --> <destination id="TestGridSimple"> <properties> <source>com.gwtjs.flash.test.GridData</source> </properties> </destination> |
3)GRID组件(flash前台)
首先就是定义调用JAVA的服务:
<fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> <s:RemoteObject id="gridTestService" destination="TestGridSimple" fault="gridTestServiceFaultHandler(event)" result="gridTestServiceResultHandler(event)" /> </fx:Declarations> |
这里开始用高级grid,组件名称为:AdvancedDataGrid |
因为此组件支持树型显示数据,这个很适用于模块管理,用户如果分级,组织机构等,还可以通过BlazeDS\HTTP\Web服务\XML\等直接连接数据,都非常适用,这里就开始接触一下,启用很简单,先熟悉一下这个词“AdvancedDataGrid” |
GridTest1.mxmx文件: |
后面会在代码添加注释,不再做多余的解释 |
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="init()" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; .upPwdButton { width:26px; upSkin: Embed(source="../assets/images/icon/ico_lock.gif"); overSkin: Embed(source="../assets/images/icon/ico_lock.gif"); downSkin: Embed(source="../assets/images/icon/ico_lock.gif"); } .upUserInfoButton { width:26px; upSkin: Embed(source="../assets/images/icon/user_edit.png"); overSkin: Embed(source="../assets/images/icon/user_edit.png"); downSkin: Embed(source="../assets/images/icon/user_edit.png"); }
.removeUserButton { width:26px; upSkin: Embed(source="../assets/images/icon/user_delete.png"); overSkin: Embed(source="../assets/images/icon/user_delete.png"); downSkin: Embed(source="../assets/images/icon/user_delete.png"); } </fx:Style> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.controls.Image; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent;
import spark.components.Button;
[Bindable] private var gridList:ArrayCollection =null;
/** * 页面加载完就要执行的函数/creationComplete,页面加载完执行的事件,什么叫事件?温习一下javascript先。 */ private function init():void{ //调用RemoteObject标识为gridTestService的服务,这个服务通过remoting-config.xml定义指向了类,getUsers就是这个类的方法,返回的是Java List gridTestService.getUsers(0,0); }
/** * 服务请求成功后函数 */ protected function gridTestServiceFaultHandler(event:FaultEvent):void{ // TODO Auto-generated method stub Alert.show("你也有今天,失败了/n"+event.message.toString(),""); }
/** * 服务失败后的函数 */ protected function gridTestServiceResultHandler(event:ResultEvent):void{ //类型转一下 gridList = ArrayCollection(event.result); }
/***/
]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> <s:RemoteObject id="gridTestService" destination="TestGridSimple" fault="gridTestServiceFaultHandler(event)" result="gridTestServiceResultHandler(event)"> <s:method name="updateUserPwdHandler"/> </s:RemoteObject> </fx:Declarations> <mx:AdvancedDataGrid id="user_adg1" x="6" y="10" width="1186" height="532" dataProvider="{gridList}" designViewDataType="flat"> <mx:columns> <!--name对应User的属性--> <mx:AdvancedDataGridColumn dataField="name" headerText="用户姓名"/> <!--数字1为男,女士优先吧,itemRenderer呈示器,renderer.SexItemRenderer为自定义呈示器,在headerText属性结束的位置按alt加“/”可以自动创建一个,进去后修改一下,对于sex这样的渲染,可以更简单,这里只为先适应后面复杂的应用--> <mx:AdvancedDataGridColumn dataField="sex" headerText="性别" textAlign="left" width="56" itemRenderer="renderer.SexItemRenderer"/> <mx:AdvancedDataGridColumn dataField="qq" headerText="qq"/> <mx:AdvancedDataGridColumn dataField="email" headerText="email"/> <mx:AdvancedDataGridColumn dataField="msn" headerText="msn"/> <mx:AdvancedDataGridColumn dataField="address" headerText="详细地址"/>
<mx:AdvancedDataGridColumn dataField="duty" headerText="职务"/> <mx:AdvancedDataGridColumn dataField="phone" headerText="联系电话"/> <mx:AdvancedDataGridColumn dataField="company" headerText="公司名称"/> <mx:AdvancedDataGridColumn dataField="description" headerText="说明"/> <!--login是对象,后面会把他解析为可以修改密码按钮--> <mx:AdvancedDataGridColumn dataField="login" headerText="操作" textAlign="center" width="86"> <mx:itemRenderer> <fx:Component> <mx:HBox textAlign="center" x="1" horizontalAlign="center" horizontalGap="3" verticalAlign="middle"> <mx:Button click="updateUserPwdHandler(data)" label="" styleName="upPwdButton"> <fx:Script> <![CDATA[ public function updateUserPwdHandler(item:Object):void{ trace(item.id,item.login.username); } ]]> </fx:Script> </mx:Button> <mx:Button label="" styleName="removeUserButton">
</mx:Button>
<mx:Button label="" styleName="upUserInfoButton">
</mx:Button> </mx:HBox> </fx:Component> </mx:itemRenderer> </mx:AdvancedDataGridColumn> </mx:columns> </mx:AdvancedDataGrid> </s:Application> |
renderer.SexItemRenderer 格式化性别 |
<?xml version="1.0" encoding="utf-8"?> <s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" focusEnabled="true"> <fx:Script> <![CDATA[ public function getSex(value:String):String{ if('1'==value) return "男"; return "女"; }
]]> </fx:Script> <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{getSex(listData.label)}" /> </s:MXAdvancedDataGridItemRenderer> |
格式化用户信息,转换为修改密码的按钮: |
技术总结一下:
1.请求远程数据用的RemoteObject
2.Grid数据绑定
3.格式化性别
4.将对象转为数据,也就是这里每条都对应一个登陆信息,没有解释前,是对象
参考这句:trace(item.id,item.login.username);//item为条目,每条都有login,login为对象,里面又有id等属性,转换成功的数据就是肉在棦板了。
5.在尾列添加了按钮,还不止一个。
数据加载完,开始修改的动作.
时间太晚,还差一个把第一列渲染成checkbox。下次加。
源码下载可以到:17908984下载
源码文件名:OATest2
2.添加、修改、删除动作。 -待续
1)将第一列改为checkbox
2)添加数据
3)修改数据
4)删除数据
分页 -待续正在整理......