flex开发实践经验谈（谢敏）

Flex 开发实践

积木在线电脑谢敏

大纲 Flex 组件篇

• 组件的作用• 组件实用技巧• 自定义组件开发

Flex 通讯篇• 常用的通讯方案• RPC 交互原理• 常用编码协议

Flex 代码组织篇• 使用 MVC 框架• 模块化及模块分类

Flex 组件篇——组件的作用

提高代码复用率

提高开发效率

功能模块化

Flex 组件篇——组件样式

使用 global 样式

用 css 文件定义样式

样式的集合：主题

动态切换样式

Flex 组件篇——组件显示控制

visible• 控制组件是否可见• 不影响容器对其的布局

includeInLayout• 控制组件是否参加容器的布局• 两个属性常常联合使用

Flex 组件篇——组件大小控制

固定大小

百分比大小

最大最小值

默认大小


固定大小• 通过 setHeight() 和 setWidth() 设置

• 这是组件的最终大小，组件尺寸固定，不受子组件和其他尺寸属性（如 min/max ）的影响

• 若该组件是容器类型，当子组件的大小超过容器大小时，容器不会自动扩充，容器周边将出现滚动条

• 和百分比大小互斥，不能同时设置

• 缺乏适应性


百分比大小

• 根据父容器的大小计算，其结果值并不是组件的最终大小，最终大小还需根据组件的默认大小， min/max 属性决定

• 适用于需要自动扩充的地方，可以结合百分比 /max/min 属性使用

• 100% 和 max 属性连用，可以获得很好的自适应效果


最大最小值

• 计算组件的默认大小

• 如果设置了百分比，计算百分比的大小

• 比较默认值和百分比值，选择数值大的属性

• 根据 max/min 对上一步计算的数值进行剪裁，使其落入指定的区间

• max 值一般要大于组件的默认值


默认大小

• 组件根据自身的特点计算其默认大小，默认大小并不是组件的最终大小，最终大小还需根据组件的百分比， min/max 属性决定

• 容器类型的组件（如 Box ）的默认大小由其子组件决定，容器会自动扩充，使其能够包含所有的子组件

• List 组件的默认大小

• 适用于需要自动扩充的地方


利用 measured 值

• 自动扩充的 List 组件

• 设置容器的 measured 值为 0 ，能够避免该容器撑大它的父容器，使得滚动条出现在容器内部

• 该值只能在没有设置固定大小的容器中其作用

• measured 值只能在 measure() 函数中设置，在其他地方设置该值无效

Flex 组件篇——自定义组件开发

需要重载的函数

• createChildren()

• measure()

• updateDisplayList()

• commitProperties()


createChildren()

• 该函数在组件初始化阶段被调用，在整个组件生命周期中只被调用一次

• 可以在该函数中为自定义组件添加子组件 ( 通过 addChild() 方法 )

• 如果需要添加内部子组件，应该将其添加到 rawChildren 上，而不是直接添加到容器上，比如 Panel 组件的关闭按钮


measure()

• 该函数用于计算组件的默认大小，设置组件的 measuredHeight 和 measuredWidth 值

• 如果在组件上调用了 invalidateSize() 函数，那么系统将自动调用 measure() 函数，重新计算组件的默认大小

• 如果需要重新计算组件的默认大小，例如再某个影响大小的属性改变之后，只需调用 invalidateSize() 函数，一般不直接调用 measure() 函数


updateDisplayList()

• 使用 setActualSize() 函数设置子组件的大小

• 使用 move() 函数设置子组件的位置

• 使用 graphics 对象绘制任意可视元素 (drawLine等底层绘制函数 )

• 如果需要手动更新组件的视图，只需调用 invalidateDisplayList() 函数，系统将自动调用 updateDisplayList () 函数，重新更新组件的视图


commitProperties( )

• 该函数用于统一提交对组件设置的属性

• 在设置组件的属性时，需要标记该属性已被更新，并调用 invalidateProperties() 函数

• 系统会自动调用 commitProperties() 函数，在该函数中集中处理被提交的属性

• 一般在该函数中，需要对每一个自定义属性作检查，判断该属性是否有新值提交


commitProperties()

private var _user:User;private var _userCommited:boolean=false;……public function set user(user:User):void{

_user = user;_userCommited = true; invalidateProperties();

}


commitProperties( )

protected function commitProperties( ){super.commitProperties();if(_userCommited){

//do something with _user_ userCommited = false;

}……

}


总结

invalidation 函数 validation 函数

invalidateProperties commitProperties

invalidateDisplayList updateDisplayList

invalidateSize measure

Flex 通讯篇——常用的通讯方案

Flex 常用的通讯方案• Socket• Http• RPC• 同步 /异步

Flex 通讯篇—— RPC 交互原理

RPC 交互流程

• 对参数进行编码 client object -> string

• 封装成 HttpRequest 并传输到服务端

• 对参数进行解码 string -> server object

• 调用相关函数，并返回结果

• 对返回值进行编码 server object -> string

• 封装成 HttpRespose 并返回客户端

• 对返回值进行解码 string -> client object

Flex 通讯篇—— RPC 交互流程

Flex 通讯篇——常用编码协议

XML• 采用 XML格式对数据进行编码• 跨平台性好，协议种类多

JSON• 采用 JSON格式对数据进行编码• 格式简单高效

Hession• 采用 Hession 协议对数据进行编码• 支持复杂的数据结构，包括引用类型支持循环引用• 格式较复杂

Flex 通讯篇——映射实体对象

客户端package cn.ijimu{

public class User{

public var id:Object;public var name:String;……

package cn.ijimu;public class User{

public Integer id;public String name;……

服务端 (Java)

Flex 通讯篇——实体管理器

封装业务逻辑• 封装对实体对象的日常操作• 提供 CURD 方法，对实体对象进行操作

通过事件与UI交互• 在执行 CURD操作时，派发相应的事件• UI组件通过相关事件，跟踪实体集合的变化

与服务器端同步• 初始化时，从服务端加载实体集合• 在执行 CURD操作时，通过 RPC 方法和服务端同步数

据

Flex 代码篇——使用 MVC 框架

常用 MVC 框架• Cairngorm • PureMVC

使用误区•拿着锤子，看什么都像钉子• 根据交互类型，选择交互方式

Flex 代码篇——基本组成模块

Domain• 组织实体对象• 实例： User, Oder, Product

Managers• 实体管理器，一般与实体对象对应• 实例： UserManager, OderManager

Events• 应用事件派发器： AppEventDispatcher• 实例： AppEvent, UserEvent, OderEvent


Views• 包括视图， UI组件• 实例： OderList, UserDetailsPane

Commands• 用于组织一些由用户交户触发的命令• 实例： OderCommand, LogoutCommand

Controllers• 用于辅助复杂的用户交互• 实例：多步骤的向导


Monitors•跟踪视图状态，用户交互中间状态等• 实例：当前被选中的邮件列表

谢谢

flex开发实践经验谈（谢敏）

Documents