Flash Builder 4.5 开发 OA - 3 --由于最近太慢,暂停
此部分的主要内容：
- 测试动态添加grid,grid-CRUD
一) 添加Grid及绑定数据
呵呵，，，还是单独测试、梯形测试的原则，单独建一个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。下次加。
源码下载可以到QQ群：17908984下载
源码文件名：OATest2
2. 添加、修改、删除动作。 -待续
1) 将第一列改为checkbox
2) 添加数据
3) 修改数据
4) 删除数据
分页 -待续正在整理......