flex+jump的培训资料
Flex程序员培训教程
Flex产品
概述
学习FLEX，必须了解什么是RIA。
RIA，Rich Internet Application ，也就是富互联⽹应⽤。这个富字是重点。传统的HTML页⾯元素⾮常有限，开发⼈员在页⾯刷新和相应速度都受到较⼤的困扰。
FLEX ，最开始是由Macromedia公司2004年发布，2005年4 ⽉，Adobe公司收购Macromedia公司，现在FLEX系Adobe公司系列产品。官⽅⽹站：www.doczj/doc/941ed93a5727a5e9856a615d.html .
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 开发⼊门
Hello world 案例的开发案例描述
通过经典的“Hello World ”案例来了解Flex 的运⾏⽅式。
开发步骤
启动Flex Builder 3
通过“开始→程序→Adobe →Flex Builder 3”启动Flex 开发环境。
Flex 对应的插件包
Flex Builder 的启动⽂件
创建项⽬
打开Flex Builder 3之后，选择“File→New→Flex Project”创建⼀个新项⽬；
点击此处切换透视
1)在弹出的“Flex Project”视图中，配置相关参数。“项⽬名称”：FlexTest，如图
2.1-2所⽰。
点击Next，选择Flex编译后的输出⽬录，默认的就可以了
点击Next ，可以指定原码路径，默认为src ，可以选择SDK 的版本等
点击Finish 。
编译部署、运⾏
选中l ，打开此⽂件，输⼊如下代码
选中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常⽤数据校验控件
如上图所⽰，如果输⼊的字符串超过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="ls.*"，如下图所⽰：
长沙程序员培训机构
效果如下，可以点击复选框选中⼀条记录，如果要⽀持多选，可以设置allowMultipleSelection="true"（默认就是多选）
开发案例描述
案例的基本需求
在数据库中存在⼀个学⽣信息表，通过Flex+jump架构能够进⾏学⽣信息的查询、增加、修改、删除。
在查询功能中，以学⽣姓名、性别、出⽣⽇期范围作为查询条件，其中学⽣姓名为模糊查询，性别为完全匹配查询且通过下拉列表选取查询条件，查询结果要求分页处理。
开发步骤
创建数据库表（省略，已经设置好）
建表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号
','139********',DA TE('1985-11-23'));
insert into STU values('1000001','张⽆忌','1',26, '上海张江⾼科技园区碧波路456号','135********',DA TE('1984-11-30'));
insert into STU values('1000002','张⼩宝','0',23,'北京市海淀区彩和坊路8号天创科技⼤厦东门1301室','138********',DA
TE('1987-05-19'));
insert into STU values('1000003','赵⼤海','2',24,'⼴州市天河区体育东路122号⽺城国际商贸中⼼⼤厦西塔2102-2104
室','151********',DA TE('1986-03-31'));
insert into STU values('1000004','赵⼩新','0',25,'北京海淀区中关村22号','158********',DA TE('1985-05-08')); insert into STU

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。