人力资源-flex+jump的培训资料.docx

Flex程序员培训教程

Flex产品
概述
学习FLEX，必须了解什么是RIA。
RIA，Rich Internet Application ，也就是富互联网应用。这个富字是重点。传统的HTML页面元素非常有限，开发人员在页面刷新和相应速度都受到较大的困扰。

FLEX ，最开始是由Macromedia公司2004年发布，2005年4 月，Adobe公司收购Macromedia公司，现在FLEX系Adobe公司系列产品。官方网站：.

Flex拥有两种开发语言：
MXML：一种XML标识语言，用来进行组件布局，数据绑定等，和HTML语言有点类似。
ActionScript：现在用的版本是3.0，flex的编程语言，一般业务逻辑操作需要用到，可以完成MXML的所有操作。

Flex3包含以下几个部分：
Flex3 SDK是Flex产品最基础也是必需的组件。包括编译器、Flex类库以及调试工具。
Flex Builder 3/flash Builder 4是基于eclipse的集成开发环境。支持可视化界面以及MXML和ActionScript编写,可以下载独立的Flex 开发工具（Flex Builder 3/flash Builder 4），也可以下载插件（作为eclipse的插件）使用。

Flex的安装
Flex Builder 3和Flash Builder 4安装基本一样。

选择好语言环境，点击OK，开始安装:

安装完成以后，启动Flex

Flex Builder 3的启动页面

安装好的Flex 对应的目录结构如下：
Flex Builder的启动文件
对应的sdk文件夹， 包含sdk2.0和sdk3.1两个不同的版本
Flex对应的插件包

Flex开发入门
Hello world 案例的开发
案例描述
通过经典的“Hello World”案例来了解Flex的运行方式。

开发步骤
启动Flex Builder 3
通过“开始à程序àAdobeàFlex Builder 3”启动Flex开发环境。

创建项目
打开Flex Builder 3之后，选择“FileàNewàFlex Project”创建一个新项目；
点击此处切换透视图

1) 在弹出的“Flex Project”视图中，配置相关参数。“项目名称”：FlexTest，如图2.1-2所示。

点击Next,选择Flex编译后的输出目录，默认的就可以了

点击Next，可以指定原码路径，默认为src，可以选择SDK的版本等

编译后输出目录
点击Finish。
创建好的项目目录结构如下：
公共库(swc文件)的存放目录
1、原码路径

编译部署、运行
选中FlexTest.mxml，打开此文件，输入如下代码

选中FlexTest，点击运行

效果如下，点击“Hello world”按钮，弹出一个对话框，显示“Hello World!”

Flex常用组件
1、Label
2、TextInput
3、TextArea
4、ComboBox
5、DateField
6、Button
7、DataGrid
。。。。。
Label主要用于字段说明，就像下图的“用户名：”和“用户说明”，一般Label字段的显示值不作为数据提交；TextInput用作文本值输入，不支持换行，如果想要输入的值可以换行可以使用TextArea，TextInput和TextArea跟html中text和textarea完成的任务是一样的，用于数据的提交和显示。

ComboBox下拉框，提供数据选择，比如说性别、类型等

DateField日期框，对于需要用到日期的地方很有用

可以通过设置formatString来改变日期的格式，比如说formatString=”YYYY-MM-DD”，则显示的值为“2011-03-08”

Button按钮，Button使用非常普遍，在进行前后台交互的时候往往使用按钮来提交数据，

DataGrid，用于数据列表的显示，比如说要显示一个查询后的列表集合，DataGrid就非常有用了

Flex常用数据校验控件
<mx:StringValidator />

如上图所示，如果输入的字符串超过10位，则提示错误。同样，如果不输入任何字符串则提示“此项为毕输项”，如果输入的字符串小于3为则提示“不能小于3位”，如下图所示：

<mx:NumberValidator />和<mx:DateValidator />的使用方式和<mx:StringValidator />基本相同，只是这些控件对应的属性不同，不在赘述。

这是几种常用的，当然还有其他数据校验控件，比如说对电话号码、信用卡等的校验。
Flex深入开发
在深入开发过程中将使用Flash Builder 4和SDK3.3版本，用我们在实际开发中使用的UITemplate+jump这两套框架。

UITemplate中常用的控件介绍
1、<jwolib:TextInput />文本控件，如下图所示:

效果如下，如果单击则可以清空文本框里面的内容：

2、<expand:DoubleClickCheckDataGrid/>显示列表控件（带复选框），如下图所示：

效果如下，可以通过选择左边的复选框来进行相应的操作；

如果要进行多选，可以设置allowMultipleSelection=”true”,上图导入xmlns:bankcomm=”
com.bankcomm.*”是为了支持数据字典的使用，如下代码所示
<bankcomm:MyDataGridColumn dict="ACT_RESULT" headerText="处理结果" dataField="actResult" dataTipField="actResult" textAlign="center" sortable="false"/>

3、<expand:DoubleClickDataGrid />显示列表控件（不带复选框），如下图所示：

效果如下，可以通过设置allowMultipleSelection=”true”来进行多选，和上面描述的列表不同点就是这个显示列表没有复选框；它同样也支持数据字典，对数据字典的使用和上面的列表是一样的

4、<bankcomm:GridPage />分页控件，如下图所示：

效果如下，可以通过点击跳到首页，跳到下一页，跳到下一页, 跳到尾页，刷新当前页,可以在 里面输入不小于10的数字（小于10的会默认用10来处理），代表一次显示多少条

5、<combotree:TreeComboBox />下拉树控件，如下图所示：

效果如下，可以看到点击下拉框会弹出一连串的树，

6、<jwolib:FieldSet />，类似于一个容器，可以在左上角显示说明信息，如下图所示：

效果如下，可以看到左上角的“失联补录信息”说明信息

7、<bankcomm:MyComboBox/>普通下拉框，如下图所示：

效果如下，可以看到它不像下拉树一样，如图所示可以通过点击来清空当前选项

8、<mx:ControlBar/>flex自带的控制条，如下图所示：

效果如下，可以看到它里面可以包含其他的控件，保持美观的效果

9、<bankcomm:NumberField/>数字控件，如下图所示：

效果如下，这个控件只能输入数字类型的数据，可以控制只能输入整数或者可以输入小数,
也可以通过点击来清空已输入的数据

10、<bankcomm:MyDateField/>日期控件，如下图所示：

效果如下，可以通过定义日期类型的格式（通过设置formatString=”YYYY-MM-DD”），则点击右边的来选择日期，会按照已定义好的格式来显示日期, 也可以通过点击来清空已选择的日期

11、<check:CheckBoxList/>复选框列表,需导入xmlns:check="com.flextoolbox.controls.*"，如下图所示：

效果如下，可以点击复选框选中一条记录，如果要支持多选，可以设置allowMultipleSelection="true"（默认就是多选）

开发案例描述
Ø 案例的基本需求
在数据库中存在一个学生信息表，通过Flex+jump架构能够进行学生信息的查询、增加、修改、删除。
在查询功能中，以学生姓名、性别、出生日期范围作为查询条件，其中学生姓名为模糊查询，性别为完全匹配查询且通过下拉列表选取查询条件，查询结果要求分页处理。
Ø 学生信息表STU的表结构
字段名称
数据类型
数据长度
是否主键
备 注
STUID
VARCHAR(10)
10
YES
学生编号
STUNAME
VARCHAR(40)
40
NO
学生姓名
SEX
CHAR
1
NO
1-男,2-女,3-未知
AGE
INT

NO
年龄
ADDRESS
VARCHAR(100)
200
NO
家庭住址
PHONE
VARCHAR(20)
20
NO
联系电话
BIRTH
Date

NO
出生日期

开发步骤
创建数据库表（省略，已经设置好）
Ø 建表SQL脚本（DB2）
drop table STU;
CREATE TABLE STU
(
STUID VARCHAR(10) not null ,
STUNAME VARCHAR(40),
SEX CHAR2(1),
AGE INTEGER,
ADDRESS VARCHAR(200),
PHONE VARCHAR(20),
BIRTH DATE,
CONSTRAINT PK11 PRIMARY KEY (STUID)
);
Ø 初始数据SQL脚本
insert into STU values('1000000','张三丰','1',25,'北京海淀区中关村大街01号','13923070219',DATE('1985-11-23'));
insert into STU values('1000001','张无忌','1',26, '上海张江高科技园区碧波路456号','13572113015',DATE('1984-11-30'));
insert into STU values('1000002','张小宝','0',23,'北京市海淀区彩和坊路8号天创科技大厦东门1301室','13804061974',DATE('1987-05-19'));
insert into STU values('1000003','赵大海','2',24,'广州市天河区体育东路122号羊城国际商贸中心大厦西塔2102-2104室','15123040319',DATE('1986-03-31'));
insert into STU values('1000004','赵小新','0',25,'北京海淀区中关村22号','15823010577',DATE('1985-05-08'));
insert into STU values('1000005','李中正','2',23,'成都高新区创新中心起步区府河基地高朋大道12号B座209-210室','15323010356',DATE('1987-04-19'));
insert into STU values('1000006','李亚南','0',24,'长沙市国家高新技术开发区火炬村M2组团金荣科技园7楼','13923010319',DATE('1986-12-24'));

搭好flex+jump的开发环境
Ø 将下载下来的UITemplate改名为student,并导入到Flash Builder 4的包资源管理器中（UITemplate由项目组提供）,如下图所示：

在包资源管理器中右击à导入à选择Flash Builder 项目à下一步à选择项目文件夹à浏览（选择你已改名为student的这个项目）à完成

导入好项目之后需要查看一下SDK版本是不是正确的，通过右击student（项目）à属性àFlex编译器à注意看版本是不是Flex 3.3SDK,如果不是，则需要更换版本

Flex搭建好之后，将src目录下的loginurl.json修改为以下代码：
{
"RSP_HEAD":{"TRAN_SUCCESS":1},

"menuList":[{"name":"学生信息管理","leaf":false,"shortCount":0,"nodeaction":":9081/eos-default/m3_uidemo/testPage.html","nodetype":3,
"id":"CMIS","children":[{"appid":"CMIS","name":"学生信息维护","module":"stu/StudentIndex.vxml","leaf":true,"shortCount":0,"nodeaction":
":9081/eos-default/m3_uidemo/testPage.html","nodetype":3,"id":"100"}]}]}

这是一段JSON报文，在flex+jump框架中前后台的数据传递用的就是JSON报文格式。
这样设置好以后，就可以运行这个Flex框架了，通过点击，运行后的结果如下图所示:

可以输入任何用户名和密码（因为这只是一个模板）,点击登录，显示页面如下：

注意左边显示的功能菜单项，是我们刚刚在loginurl.json中配好的信息,不过现在还不能用，只是一个模型而已。

如果在点击时出现了如下错误，
则需要设置“Web 浏览器”,窗口à首先参数à常规àweb 浏览器àinternet Explorerà确定,如下图所示：

Ø 配置好jump后台，将jump-demo(with Eclipse).rar下载下来之后解压（相应的demo由项目组提供），解压之后打开Eclipse，路径就在解压目录下（eclipse/eclipse.exe），打开后如下图所示：

导入项目组提供的一个名叫plrm的后台应用，在这个应用的基础上进行练习。
首先需要开发人员配置一下jdk，用jdk1.5就可以了;
配置config目录下的jump-db.xml（连接数据库的配置）设置连接数据库的url、用户名和密码即可,如下代码所示：（省略，已经设置好）
<property name="url" value="jdbc:db2://127.0.0.1:50000/student"/>
<property name="username" value=""/>
<property name="password" value=""/>
然后点击start运行一遍，如果不报错就代表成功了，接下来就是进行代码的开发了。

前后台代码的开发
Ø Flex页面代码的编写
1、 新建一个stu的包名，如下图所示：

2、 创建好stu包以后，在这个包下面创建一个模块名为StudentIndex,步骤如下图所示：

点击完成，生成StudentIndex.mxml，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx=" layout="absolute" width="100%" height="100%">
</mx:Module>
在这里创建模块的原因是可以通过模块来加载部分信息，不需要一运行index就加载所有的信息，减轻了一下加载大量信息给服务器造成的压力；用模块还有一个好处是能够使应用结构清晰明了。

创建好模块之后就是编写代码了，以学生姓名、性别、出生日期范围作为查询条件查询出学生列表信息，编写好的代码如下：
一、 Flex端
1、 在StudentIndex.mxml中编写如下代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx=" layout="absolute" width="100%" height="100%" creationComplete="queryList();" xmlns:expand="com.doubleClick.*"
xmlns:jwolib=" xmlns:bankcomm="com.bankcomm.*">
<mx:VBox width="100%" verticalGap="0" height="100%">
<mx:Panel width="100%" title="学生信息管理" paddingTop="10" paddingBottom="10" horizontalAlign="center" layout="vertical">
<mx:HBox width="100%" horizontalGap="0">
<mx:HBox width="15%" horizontalAlign="right" verticalAlign="middle">
<mx:Label text="学生姓名：" width="148" textAlign="right"/>
</mx:HBox>
<mx:HBox width="35%" horizontalGap="0" verticalAlign="middle">
<jwolib:TextInput appearAsLabel="false" change="stuName.showClearButton=(stuName.text != '')" clear="stuName.showClearButton=false;" showClearButton="false"
id="stuName" width="200" maxChars="40"/>
</mx:HBox>
<mx:HBox width="15%" horizontalAlign="right" verticalAlign="middle">
<mx:Label text="性别：" width="148" textAlign="right"/>
</mx:HBox>
<mx:HBox width="35%" horizontalGap="0" verticalAlign="middle">
<bankcomm:MyComboBox id="sex" width="200" prompt="--请选择--" showClearButton="true" valueField="data" labelField="label">
<bankcomm:dataProvider>
<mx:Array>
<mx:Object data="3" label="男"></mx:Object>
<mx:Object data="1" label="女"></mx:Object>
<mx:Object data="2" label="未知"></mx:Object>
</mx:Array>
</bankcomm:dataProvider>
</bankcomm:MyComboBox>
</mx:HBox>
</mx:HBox>
<mx:HBox width="100%" horizontalGap="0">
<mx:HBox width="15%" horizontalAlign="right" verticalAlign="middle">
<mx:Label text="出生日期：" width="148" textAlign="right"/>
</mx:HBox>
<mx:HBox width="85%" horizontalGap="0" verticalAlign="middle">
<bankcomm:MyDateField id="birthStart" width="200" showClearButton="true" showToday="true" yearNavigationEnabled="true" formatString="YYYY-MM-DD"/>
<mx:Label text="-" />
<bankcomm:MyDateField id="birthEnd" width="200" showClearButton="true" showToday="true" yearNavigationEnabled="true" formatString="YYYY-MM-DD"/>
</mx:HBox>
</mx:HBox>
<mx:ControlBar height="32" id="queryBtns" paddingBottom="0" paddingTop="0" horizontalAlign="center" color="0x000000">
<mx:Button id="selBtn" click="queryList();" icon="@Embed('assets/page_find.png')" label="查询" toolTip="查询" width="70"/>
<mx:Button id="resetBtn" click="initSelect();" icon="@Embed('assets/cross-circle.png')" label="重置" toolTip="重置" width="70"/>
</mx:ControlBar>
</mx:Panel>
<mx:VBox width="100%" verticalGap="0" height="100%">
<mx:HBox width="100%" horizontalAlign="right" horizontalGap="0">
<mx:Button id="add" click="add_stu()" icon="@Embed('assets/add.png')" label="新增" toolTip="新增" width="70"/>
<mx:Button id="edit" click="edit_stu()" icon="@Embed('assets/cart_edit.png')" label="修改" toolTip="修改" width="70"/>
<mx:Button id="look" click="stu_detail()" icon="@Embed('assets/cart_edit.png')" label="查看" toolTip="查看" width="70"/>
<mx:Button id="del" click="del_stu()" icon="@Embed('assets/cart_delete.png')" label="删除" toolTip="删除" width="70"/>
</mx:HBox>
<expand:DoubleClickCheckDataGrid id="stuGrid" width="100%" height="100%" allowMultipleSelection="true" dataProvider="{gridPage.dataProvider}">
<expand:columns>
<mx:DataGridColumn dataField="stuId" headerText="学生编号" dataTipField="stuId" />
<mx:DataGridColumn dataField="stuName" headerText="学生姓名" dataTipField="stuName" />
<mx:DataGridColumn dataField="sexLabel" headerText="性别" dataTipField="sexLabel" />
<mx:DataGridColumn dataField="age" headerText="学生年龄" dataTipField="age" />
<mx:DataGridColumn dataField="birth" headerText="出生日期" dataTipField="birth" />
<mx:DataGridColumn dataField="phone" headerText="家庭电话" dataTipField="phone" />
<mx:DataGridColumn dataField="address" headerText="家庭住址" dataTipField="address" />
</expand:columns>
</expand:DoubleClickCheckDataGrid>
<bankcomm:GridPage id="gridPage" width="100%" dataRoot="ROOT" dataUrl="{Global.IP}queryStudentWithPage.ajax">
</bankcomm:GridPage>

</mx:VBox>
</mx:VBox>
<mx:Script>
<![CDATA[
import com.bankcomm.Connect;
import com.bankcomm.URLParameter;

import mx.controls.Alert;
import mx.core.Application;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

import xxx_Util.Global;

//新增学生信息后台访问路径
private var addStuUrl:String=Global.IP+"addStu.ajax";
//修改学生信息后台访问路径
private var editStuUrl:String=Global.IP+"editStuByStuId.ajax";

//删除学生信息后台访问路径
private var delStuUrl:String=Global.IP+"delStuByStuId.ajax";

//设置查询学生信息的条件
private function setObj():Object{
var obj:Object=new Object();
obj.stuName=stuName.text;
obj.sex=sex.selectedItem==null?"":sex.selectedItem.data;
obj.birthStart=birthStart.text;
obj.birthEnd=birthEnd.text;
return obj;
}

//查询学生信息
private function queryList():void{
gridPage.param=setObj;
gridPage.loadData();
}

//点击重置按钮时调度，用来清空条件元素
private function initSelect():void{
stuName.text="";
stuName.htmlText="";
sex.selectedValue="";
sex.selectedIndex=-1;
birthStart.text="";
birthEnd.text="";
}

//学生信息新增
private function add_stu():void{
//创建一个弹出式的TitleWindow,用来进行学生信息的新增
var studentOper:StudentOper=StudentOper(PopUpManager.createPopUp(Application.application.parent,StudentOper,true));
//设置TitleWindow的标题信息
studentOper.title="学生信息新增";
//定义页面元素为可编辑的
studentOper.writable=true;
//给TitleWindow的sure按钮增加一个监听
studentOper.sure.addEventListener(MouseEvent.CLICK,function(event:MouseEvent):void{
if(studentOper.checkStu())
{
//设置新增学生信息所需的参数
var param:URLParameter=new URLParameter();
param.trainID="";
param.trainProcess="";
param.reqBody={PARAMS:studentOper.getValues()};
//访问后台进行学生信息的新增
Connect.request({url:addStuUrl,params:param.toParameter(),callback:function(r:Object,e:Event):void{
//如果新增成功，则关闭titileWindow，并刷新主页面的列表信息
if(r.RSP_HEAD.TRAN_SUCCESS=="1")
{
//通过派发出一个CloseEvent.Close事件来关闭TitleWindow
studentOper.dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
gridPage.loadData();
}

}});

}
});
PopUpManager.centerPopUp(studentOper);

}

//学生信息修改
private function edit_stu():void{
//判断主页面的列表是否选择了记录
if(stuGrid.selectedItems==null || stuGrid.selectedItems.length==0)
{
Alert.show("请选择需要修改的学生记录","提示");
return;
}else if(stuGrid.selectedItems.length!=1){
Alert.show("只能选择一条学生记录进行修改","提示");
return;
}
//创建一个弹出式的TitleWindow,用来进行学生信息的修改
var studentOper:StudentOper=StudentOper(PopUpManager.createPopUp(Application.application.parent,StudentOper,true));
//设置TitleWindow的标题信息
studentOper.title="学生信息修改";
//定义页面元素为可编辑的
studentOper.writable=true;
//给TitleWindow的页面元素设置值
studentOper.setValues(stuGrid.selectedItem);
//给TitleWindow的sure按钮增加一个监听
studentOper.sure.addEventListener(MouseEvent.CLICK,function(event:MouseEvent):void{
if(studentOper.checkStu())
{
//设置修改学生信息所需的参数
var param:URLParameter=new URLParameter();
param.trainID="";
param.trainProcess="";
param.reqBody={PARAMS:studentOper.getValues()};
//访问后台进行学生信息的修改
Connect.request({url:editStuUrl,params:param.toParameter(),callback:function(r:Object,e:Event):void{
//如果修改成