flexjump的培训资料.doc

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，开始安装:安装完成以后，启动FlexFlex Builder 3的启动页面安装好的Flex 对应的目录结构如下：Flex Builder的启动文件对应的sdk文件夹， 包含sdk2.0和sdk3.1两个不同的版本Flex对应的插件包Flex开发入门Hello world 案例的开发案例描述 通过经典的“Hello World”案例来了解Flex的运行方式。开发步骤启动Flex Builder 3 通过“开始程序AdobeFlex Builder 3”启动Flex开发环境。创建项目 打开Flex Builder 3之后，选择“FileNewFlex 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、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常用数据校验控件如上图所示，如果输入的字符串超过10位，则提示错误。同样，如果不输入任何字符串则提示“此项为毕输项”，如果输入的字符串小于3为则提示“不能小于3位”，如下图所示：和的使用方式和基本相同，只是这些控件对应的属性不同，不在赘述。这是几种常用的，当然还有其他数据校验控件，比如说对电话号码、信用卡等的校验。Flex深入开发在深入开发过程中将使用Flash Builder 4和SDK3.3版本，用我们在实际开发中使用的UITemplate+jump这两套框架。UITemplate中常用的控件介绍1、文本控件，如下图所示:效果如下，如果单击则可以清空文本框里面的内容：2、显示列表控件（带复选框），如下图所示：效果如下，可以通过选择左边的复选框来进行相应的操作； 如果要进行多选，可以设置allowMultipleSelection=”true”,上图导入xmlns:bankcomm=”com.bankcomm.*”是为了支持数据字典的使用，如下代码所示3、显示列表控件（不带复选框），如下图所示：效果如下，可以通过设置allowMultipleSelection=”true”来进行多选，和上面描述的列表不同点就是这个显示列表没有复选框；它同样也支持数据字典，对数据字典的使用和上面的列表是一样的4、分页控件，如下图所示：效果如下，可以通过点击跳到首页，跳到下一页，跳到下一页, 跳到尾页，刷新当前页,可以在 里面输入不小于10的数字（小于10的会默认用10来处理），代表一次显示多少条5、下拉树控件，如下图所示：效果如下，可以看到点击下拉框会弹出一连串的树，6、，类似于一个容器，可以在左上角显示说明信息，如下图所示：效果如下，可以看到左上角的“失联补录信息”说明信息7、普通下拉框，如下图所示：效果如下，可以看到它不像下拉树一样，如图所示可以通过点击来清空当前选项8、flex自带的控制条，如下图所示：效果如下，可以看到它里面可以包含其他的控件，保持美观的效果9、数字控件，如下图所示：效果如下，这个控件只能输入数字类型的数据，可以控制只能输入整数或者可以输入小数,也可以通过点击来清空已输入的数据10、日期控件，如下图所示：效果如下，可以通过定义日期类型的格式（通过设置formatString=”YYYY-MM-DD”），则点击右边的来选择日期，会按照已定义好的格式来显示日期, 也可以通过点击来清空已选择的日期11、复选框列表,需导入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）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号DATE(1985-11-23);insert into STU values(1000001,张无忌,1,26, 上海张江高科技园区碧波路456号DATE(1984-11-30);insert into STU values(1000002,张小宝,0,23,北京市海淀区彩和坊路8号天创科技大厦东门1301室DATE(1987-05-19);insert into STU values(1000003,赵大海,2,24,广州市天河区体育东路122号羊城国际商贸中心大厦西塔2102-2104室DATE(1986-03-31);insert into STU values(1000004,赵小新,0,25,北京海淀区中关村22号DATE(1985-05-08);insert into STU values(1000005,李中正,2,23,成都高新区创新中心起步区府河基地高朋大道12号B座209-210室DATE(1987-04-19);insert into STU values(1000006,李亚南,0,24,长沙市国家高新技术开发区火炬村M2组团金荣科技园7楼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、用户名和密码即可,如下代码所示：（省略，已经设置好） 然后点击start运行一遍，如果不报错就代表成功了，接下来就是进行代码的开发了。前后台代码的开发 Flex页面代码的编写1、 新建一个stu的包名，如下图所示： 2、 创建好stu包以后，在这个包下面创建一个模块名为StudentIndex,步骤如下图所示：点击完成，生成StudentIndex.mxml，代码如下：在这里创建模块的原因是可以通过模块来加载部分信息，不需要一运行index就加载所有的信息，减轻了一下加载大量信息给服务器造成的压力；用模块还有一个好处是能够使应用结构清晰明了。创建好模块之后就是编写代码了，以学生姓名、性别、出生日期范围作为查询条件查询出学生列表信息，编写好的代码如下：一、 Flex端1、 在StudentIndex.mxml中编写如下代码 !CDATAimport 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():Objectvar 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():voidgridPage.param=setObj;gridPage.loadData();/点击重置按钮时调度，用来清空条件元素private function initSelect():voidstuName.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):voidif(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):voidif(studentOper