Transcript Flex基础介绍及Flex报表使用

Flex基础介绍及Flex报表使用
提纲
Flex 开发调试环境准备
 Flex编程基础
 报表控件
 与Java的整合
 嵌入JSP页面

1、开发环境

最新版本的官方提供的开发工具是Adobe
Flash Builder 4，同时提供了一个Adobe Flash
Builder 4 Plug-in Eclipse 版本，这两个安装后
都拥有相同的功能，可以任选版本安装；安
装之后，会自动按照flex sdk4.x版本。
2、调试环境
播放器： debug版本的flash player
 浏览器：建议安装Fixfox，并安装以下插件：

1.
debug 版本的 FireFox Flash Player 插件
2.
HttpFox插件：可以查看 HTTP 通信的过程和数据，还能看到哪
些内容是从 Cache 里面读取的
3.
FlashBug：能显示您在程序中用 trace() 语句输出的调试信息
4.
Cache Status：可以让我们方便的管理缓存
3、其他-可以在FLEX项目的

可以在FLEX项目的属性中的“flex编译器”下的“附加的
编译器参数”中，增加以下参数：-keep-generatedactionscript=true；增加该参数后，Flash Builder会在
工程的源代码路径下自动创建一个generate文件夹来
存储由MXML文件翻译成的ActionScript临时文件，
通过这种方式，额可以加快学习速度。
Flex编程基础
MXML编程
 ActionScript编程
 Flex组件
 Flex控件

1、Flex服务的组成
Flex 表 现 层 服 务
Flex应用框架
MXML
ActionScript
Flex类库
Flex运行服务
2、MXML和ActionScript



MXML是一种XML语言，最基本的作用是用来布局Flex应用程
序的用户界面。MXML也可以用来定义不可视的Flex应用。例
如，它可以定义数据源，并将数据源绑定到用户界面。
ActionScript类似于JavaScript的强类型面向对象编程语言。它包
括了已有的对象和功能，也允许建立自定义对象和功能。它基
于ECMA-262 Edition 4标准。使用ActionScript，用户可以定义
事件监听、得到和定义组件属性、控制返回程序、建立新的类
、包和组件。
http://livedocs.adobe.com/flex/3_cn/langref/statements.html：这个
网址介绍了Flex的基本语法及各种关键字的意思，注意关注与
Java语法的不同之处，比如定义常量使用关键字const，而final关
键字只能作用在方法或类上。
3、MXML和ActionScript的关系


在Flex编程中，编程者使用两种语言来进行Flex应用编程：
MXML和ActionScript。一般来说，MXML实现了在MVC（Model
、View和Control）编程模式中的View（视图）部分，而
ActionScript则完成Model（模式）的部分。
Flex实际上是ActionScript类的库。这个库包括了组件（容器和
控件）、管理类、数据服务类等。MXML标签相当于
ActionScript中的类的属性。Flex分解并编译MXML标签为SWF
文件。例如，Flex提供ActionScript按钮类，在MXML中则用
<mx:Button>来定义按钮。
4、需要关注的基础知识--（1）

MXML标签规则

不是所有的标签都要求有id属性。

所有的根标签都不能有id属性。

布尔属性只有true和false两个值。

<mx:Binding>要求有source和destination属性。

<mx:Binding>标签不能有id属性。

<mx:WebService>标签要求wsdl和serviceName中的其中一项，但不允许两者一
起出现。

<mx:RemoteObject>标签要求source和name中的其中一项，但不允许两者一起
出现。

<mx:HTTPService>标签要求url和serviceName中的其中一项，但不允许两者一
起出现。

<mx:operation>标签要求name值，但不允许重复name的值。

<mx:operation>标签不能有id属性。

<mx:method>标签要求name值，但不允许重复name的值。

<mx:method>标签不能有id属性。
4、需要关注的基础知识--（2）

MXML与其它相关的标准

XML标准:MXML文件实际上是一个XML文件。XML是EXtensible Markup
Language的缩写。

事件模型标准:Flex中的事件模型是Document Object Model (DOM) Level 3
Events的子集。

Web Services标准;Flex提供了标签来调用Web Services。

Java标准:Flex提供MXML标签与服务器端的Java Object产生联系，包括Plain Old
Java Objects（POJOs）、JavaBeans和Enterprise JavaBeans（EJBs）。

HTTP标准:Flex提供MXML标签来建立把这的HTTP GET和POST要求，并且可以
得到HTTP的返回值。

图形标准:Flex提供MXML标签来使用JPEG、GIF和PNG图像格式，同时也提供标
签来使用SWF文件和Scalable Vector Graphics（SVG）文件。

样式表单（Cascading Style Sheets）标准:MXML的样式上使用W3C Cascading
Style Sheets（CSS）标准的。CSS提供了对Flex组件的外观和效果定义的途径。
4、需要关注的基础知识--（3）

变量默认值
数据类型
默认值
布尔值(Boolean)
False
整数(Int)
0
数字(Number)
Nan(not a number)
对象(Object)
Null
字符串(String)
Null
自然数(Uint)
0
未声明(not declared)
Undefined。如果delcare一个变量
但没有declare其数据类型，就意
味着此变量为无类型的，其默认
值则是undefined
其他类，包括用户自定义的类
Null
5、 Flex组件（Components）


所有用来建立Flex应用程序的子类都是Flex组件。Flex提供了以
组件为基础的编程模式。编程者可以使用组件来建立应用和用
户界面。Flex包括了大量的已经定义好的，非常灵活的组件。
根据实际需求，用户还可以建立自定义的组件。可以通过以下
方面来设计一个组件。
样式（Styles）：样式就一个组件的特色，如字体、字体颜色、字体大
小、文本对正等。这些都可通过样式表单（CSS）来定义。

行为（Behaviors）：指控件对用户动作或应用的可视改变。例如，使
用鼠标移动和改变控件大小。

事件（Events）：指控件的响应。事件包括组件建立、鼠标行为和按
钮动作。

外观（Skins）：控件的外观的类。

大小（Size）：控件的高度和宽度。所有的组件都有默认的大小。编
程者可以使用其默认大小，也可以定义其大小。
6、组件的类继承关系

所有的组件都是由ActionScript的Sprite类和UIComponent衍生的
。它继承了父类的属性和方法，如对事件、风格和行为的定义
。UIComponent是所有组件的基本的类。 UIComponent有以下
常用属性：
属性
类型
描述
可使用(enabled)
布尔
定义组件是否可使用
高度(height)
数字
组件的高度，可设置为绝对值或相对值
宽度(width)
数字
组件的宽度，可设置为绝对值或相对值
标示(id)
字符串
组件的标识符
百分比高度(percentHeight)
数字
定义组件的风格类
百分比宽度(percentWidth)
数字
组件的高度，百分比相对值
分格(styleName)
字符串
组件的宽度，百分比相对值
可视(visible)
布尔
定义组件是否可视
X(横坐标)
数字
组件相应于父类的x绝对值定位
Y(纵坐标)
数字
组件相应于父类的y绝对值定位
7、组件的大小和定位

Flex提供了以下4种定义控件大小的方式：

默认大小（Default sizing）：Flex自动定义控件和容器的大小。

绝对值尺寸（Explicit sizing）：用户定义高度和宽度的像素值。

百分比（Percentage-based sizing）：用户定义相对于其父类容器的百
分比值。

约束布局（Constraint-based layout）：Flex通过定义组件在其父类容器
的四边和中心位置来控制大小和位置。

Flex提供了以下两种定位方法：

自动布局（Automatic Layout），Flex自动定位子类控件在容器
中的位置。
约束布局（Constraint-based layout），通过定义组件在其父类
容器的四边和中心位置来定位。
使用约束布局是，不需要定义子类组件的x，y的绝对值，但需
要定义子类组件到父类容器四边的距离。


8、Flex控件(Controls)

1.
2.
3.
4.
5.
Flex控件是构成用户界面基本元素。Flex有两种类型控件：基础
控件和数据源控件。按照其使用用途，可以分为以下5类：
文本控件（Text Controls）
数据源控件（Data Provider Controls）
菜单控件（Menu Control）
按钮控件（Button Control）
Flex控件（Flex Controls）
9、 Flex操作properties文件

例如在资源文件包下面新建一个message.properties文件，包含
有以下内容：
 casemanager.btn.save = save

有以下两种常用方法：
1.
通过@Resource标签使用： <mx:Button
label="@Resource(key='casemanager.btn.save',bundle='message')" />
2.
通过ResourceManager工具类使用：
ResourceManager.getInstance().getString("message","casemanager.btn.save"
)
其中，红色标记部分，与文件名去掉”.properties”之后的字符串相同
通天对properties文件的操作，可以方便的实现国际化。[可通过以下语句
动态的修改当前语种类型：ResourceManager.getInstance().localeChain =
['zh_CN']; ]
10、视窗状态(View States)

视窗状态可以让同一个组件或应用程序具有更多的内容和外观
，特别是对用户行为的回应。最简单例子就是定义一个基本默
认的状态作为登录（login）页面，当登录成功后，显示另一个
状态，即登录后的页面。Flex程序中可以定义一个或多个不同
的状态。通常还可以使用过渡行为来改变视窗状态。
11、嵌入外部资源
在Flex应用程序中，可以使用外部的资
源，例如图像，音像，还有文字等。通
常可以在编译时将这些资源加入到程序
中，通常这个过程称为“嵌入外部资源
（embedding the asset）”。
 嵌入外部资源的好处在于由于已经被编
译过程加入到了程序中，因此可以更加
快速的进行访问。而其缺点在于编译后
的SWF文件会比较大。

Flex数据
1、获取环境信息
 JavaScript
 共享对象
 HttpService、WebService、
RemoteObject[和java的数据转换关系
158页]
 表达数据
 数据绑定

报表
性能优化
与网页进行交互
性能
组件加载顺序、布局
 内存
