flex+jump的培训资料

Flex程序员培训教程Flex产品概述学习FLEX，必须了解什么是RIA。RIA，RichInternetApplication，也就是富互联网应用。这个富字是重点。传统的HTML页面元素非常有限，开发人员在页面刷新和相应速度都受到较大的困扰。FLEX，最开始是由Macromedia公司2004年发布，2005年4月，Adobe公司收购Macromedia公司，现在FLEX系Adobe公司系列产品。官方网站：拥有两种开发语言：MXML：一种XML标识语言，用来进行组件布局，数据绑定等，和HTML语言有点类似。ActionScript：现在用的版本是3.0，flex的编程语言，一般业务逻辑操作需要用到，可以完成MXML的所有操作。Flex3包含以下几个部分：Flex3SDK是Flex产品最基础也是必需的组件。包括编译器、Flex类库以及调试工具。FlexBuilder3/flashBuilder4是基于eclipse的集成开发环境。支持可视化界面以及MXML和ActionScript编写,可以下载独立的Flex开发工具（FlexBuilder3/flashBuilder4），也可以下载插件（作为eclipse的插件）使用。Flex的安装FlexBuilder3和FlashBuilder4安装基本一样。选择好语言环境，点击OK，开始安装:安装完成以后，启动FlexFlexBuilder3的启动页面安装好的Flex对应的目录结构如下：Flex开发入门Helloworld案例的开发案例描述通过经典的“HelloWorld”案例来了解Flex的运行方式。开发步骤启动FlexBuilder3通过“开始程序AdobeFlexBuilder3”启动Flex开发环境。Flex对应的插件包对应的sdk文件夹，包含sdk2.0和sdk3.1两个不同的版本FlexBuilder的启动文件创建项目打开FlexBuilder3之后，选择“FileNewFlexProject”创建一个新项目；1)在弹出的“FlexProject”视图中，配置相关参数。“项目名称”：FlexTest，如图2.1-2所示。点击此处切换透视图点击Next,选择Flex编译后的输出目录，默认的就可以了点击Next，可以指定原码路径，默认为src，可以选择SDK的版本等点击Finish。创建好的项目目录结构如下：编译部署、运行选中FlexTest.mxml，打开此文件，输入如下代码1、原码路径编译后输出目录公共库(swc文件)的存放目录选中FlexTest，点击运行效果如下，点击“Helloworld”按钮，弹出一个对话框，显示“HelloWorld!”Flex常用组件1、Label2、TextInput3、TextArea4、ComboBox5、DateField6、Button7、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深入开发在深入开发过程中将使用FlashBuilder4和SDK3.3版本，用我们在实际开发中使用的UITemplate+jump这两套框架。UITemplate中常用的控件介绍1、jwolib:TextInput/文本控件，如下图所示:效果如下，如果单击则可以清空文本框里面的内容：2、expand:DoubleClickCheckDataGrid/显示列表控件（带复选框），如下图所示：效果如下，可以通过选择左边的复选框来进行相应的操作；如果要进行多选，可以设置allowMultipleSelection=”true”,上图导入xmlns:bankcomm=”com.bankcomm.*”是为了支持数据字典的使用，如下代码所示bankcomm:MyDataGridColumndict=ACT_RESULTheaderText=处理结果dataField=actResultdataTipField=actResulttextAlign=centersortable=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的表结构字段名称数据类型数据长度是否主键备注STUIDVARCHAR(10)10YES学生编号STUNAMEVARCHAR(40)40NO学生姓名SEXCHAR1NO1-男,2-女,3-未知AGEINTNO年龄ADDRESSVARCHAR(100)200NO家庭住址PHONEVARCHAR(20)20NO联系电话BIRTHDateNO出生日期开发步骤创建数据库表（省略，已经设置好）建表SQL脚本（DB2）droptableSTU;CREATETABLESTU(STUIDVARCHAR(10)notnull,STUNAMEVARCHAR(40),SEXCHAR2(1),AGEINTEGER,ADDRESSVARCHAR(200),PHONEVARCHAR(20),BIRTHDATE,CONSTRAINTPK11PRIMARYKEY(STUID));初始数据SQL脚本insertintoSTUvalues('1000000','张三丰','1',25,'北京海淀区中关村大街01号','13923070219',DATE('1985-11-23'));insertintoSTUvalues('1000001','张无忌','1',26,'上海张江高科技园区碧波路456号','13572113015',DATE('1984-11-30'));insertintoSTUvalues('1000002','张小宝','0',23,'北京市海淀区彩和坊路8号天创科技大厦东门1301室','13804061974',DATE('1987-05-19'));insertintoSTUvalues('1000003','赵大海','2',24,'广州市天河区体育东路122号羊城国际商贸中心大厦西塔2102-2104室','15123040319',DATE('1986-03-31'));insertintoSTUvalues('1000004','赵小新','0',25,'北京海淀区中关村22号','15823010577',DATE('1985-05-08'));insertintoSTUvalues('1000005','李中正','2',23,'成都高新区创新中心起步区府河基地高朋大道12号B座209-210室','15323010356',DATE('1987-04-19'));insertintoSTUvalues('1000006','李亚南','0',24,'长沙市国家高新技术开发区火炬村M2组团金荣科技园7楼','13923010319',DATE('1986-12-24'));搭好flex+jump的开发环境将下载下来的UITemplate改名为student,并导入到FlashBuilder4的包资源管理器中（UITemplate由项目组提供）,如下图所示：在包资源管理器中右击导入选择FlashBuilder项目下一步选择项目文件夹浏览（选择你已改名为student的这个项目）完成导入好项目之后需要查看一下SDK版本是不是正确的，通过右击student（项目）属性Flex编译器注意看版本是不是Flex3.3SDK,如果不是，则需要更换版本Flex搭建好之后，将src目录下的loginurl.json修改为以下代码：{RSP_HEAD:{TRAN_SUCCESS:1},menuList:[{name:学生信息管理,leaf:false,shortCount:0,nodeaction::3,id:CMIS,children:[{appid:CMIS,name:学生信息维护,module:stu/StudentIndex.vxml,leaf:true,shortCount:0,