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>

格式化用户信息,转换为修改密码的按钮:

效果预览:

Flash Builder 4.5 开发 OA - 3 --由于最近太慢,暂停_第1张图片

技术总结一下:

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)删除数据

分页 -待续

正在整理......

你可能感兴趣的:(builder)