[Flash开发者交流][2010.05.30]flex开发实践经验谈(谢敏)

811 views
784 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
811
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 强调“实践”两个字
  • 演讲大纲,突出“实践”
  • 此处铺垫一下,介绍一下组件大小控制在整个开发中的重要地位
  • 此处铺垫一下,介绍一下组件大小控制在整个开发中的重要地位
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • 建议此处改为一个图片来说明。这样会更清晰一些
  • [Flash开发者交流][2010.05.30]flex开发实践经验谈(谢敏)

    1. 1. Flex 开发实践 积木在线电脑 谢敏
    2. 2. 大纲 <ul><li>Flex 组件篇 </li></ul><ul><ul><li>组件的作用 </li></ul></ul><ul><ul><li>组件实用技巧 </li></ul></ul><ul><ul><li>自定义组件开发 </li></ul></ul><ul><li>Flex 通讯篇 </li></ul><ul><ul><li>常用的通讯方案 </li></ul></ul><ul><ul><li>RPC 交互原理 </li></ul></ul><ul><ul><li>常用编码协议 </li></ul></ul><ul><li>Flex 代码组织篇 </li></ul><ul><ul><li>使用 MVC 框架 </li></ul></ul><ul><ul><li>模块化及模块分类 </li></ul></ul>
    3. 3. Flex 组件篇—— 组件的作用 <ul><li>提高代码复用率 </li></ul><ul><li>提高开发效率 </li></ul><ul><li>功能模块化 </li></ul>
    4. 4. Flex 组件篇—— 组件样式 <ul><li>使用 global 样式 </li></ul><ul><li>用 css 文件定义样式 </li></ul><ul><li>样式的集合:主题 </li></ul><ul><li>动态切换样式 </li></ul>
    5. 5. Flex 组件篇—— 组件显示控制 <ul><li>visible </li></ul><ul><ul><li>控制组件是否可见 </li></ul></ul><ul><ul><li>不影响容器对其的布局 </li></ul></ul><ul><li>includeInLayout </li></ul><ul><ul><li>控制组件是否参加容器的布局 </li></ul></ul><ul><ul><li>两个属性常常联合使用 </li></ul></ul>
    6. 6. Flex 组件篇—— 组件大小控制 <ul><li>固定大小 </li></ul><ul><li>百分比大小 </li></ul><ul><li>最大最小值 </li></ul><ul><li>默认大小 </li></ul>
    7. 7. Flex 组件篇—— 组件大小控制 <ul><li>固定大小 </li></ul><ul><ul><li>通过 setHeight() 和 setWidth() 设置 </li></ul></ul><ul><ul><li>这是组件的最终大小,组件尺寸固定,不受子组件和其他尺寸属性( 如 min/max )的影响 </li></ul></ul><ul><ul><li>若该组件是容器类型,当子组件的大小超过容器大小时,容器不会自动扩充,容器周边将出现滚动条 </li></ul></ul><ul><ul><li>和百分比大小互斥,不能同时设置 </li></ul></ul><ul><ul><li>缺乏适应性 </li></ul></ul>
    8. 8. Flex 组件篇—— 组件大小控制 <ul><li>百分比大小 </li></ul><ul><ul><li>根据父容器的大小计算,其结果值并不是组件的最终大小,最终大小还需根据组件的默认大小, min/max 属性决定 </li></ul></ul><ul><ul><li>适用于需要自动扩充的地方,可以结合百分比 /max/min 属性使用 </li></ul></ul><ul><ul><li>100% 和 max 属性连用,可以获得很好的自适应效果 </li></ul></ul>
    9. 9. Flex 组件篇—— 组件大小控制 <ul><li>最大最小值 </li></ul><ul><ul><li>计算组件的默认大小 </li></ul></ul><ul><ul><li>如果设置了百分比,计算百分比的大小 </li></ul></ul><ul><ul><li>比较默认值和百分比值,选择数值大的属性 </li></ul></ul><ul><ul><li>根据 max/min 对上一步计算的数值进行剪裁,使其落入指定的区间 </li></ul></ul><ul><ul><li>max 值一般要大于组件的默认值 </li></ul></ul>
    10. 10. Flex 组件篇—— 组件大小控制 <ul><li>默认大小 </li></ul><ul><ul><li>组件根据自身的特点计算其默认大小,默认大小并不是组件的最终大小,最终大小还需根据组件的百分比, min/max 属性决定 </li></ul></ul><ul><ul><li>容器类型的组件(如 Box )的默认大小由其子组件决定,容器会自动扩充,使其能够包含所有的子组件 </li></ul></ul><ul><ul><li>List 组件的默认大小 </li></ul></ul><ul><ul><li>适用于需要自动扩充的地方 </li></ul></ul>
    11. 11. Flex 组件篇—— 组件大小控制 <ul><li>利用 measured 值 </li></ul><ul><ul><li>自动扩充的 List 组件 </li></ul></ul><ul><ul><li>设置容器的 measured 值为 0 ,能够避免该容器撑大它的父容器,使得滚动条出现在容器内部 </li></ul></ul><ul><ul><li>该值只能在没有设置固定大小的容器中其作用 </li></ul></ul><ul><ul><li>measured 值只能在 measure() 函数中设置,在其他地方设置该值无效 </li></ul></ul>
    12. 12. Flex 组件篇—— 自定义组件开发 <ul><li>需要重载的函数 </li></ul><ul><ul><li>createChildren() </li></ul></ul><ul><ul><li>measure() </li></ul></ul><ul><ul><li>updateDisplayList() </li></ul></ul><ul><ul><li>commitProperties() </li></ul></ul>
    13. 13. Flex 组件篇—— 自定义组件开发 <ul><li>createChildren() </li></ul><ul><ul><li>该函数在组件初始化阶段被调用,在整个组件生命周期中只被调用一次 </li></ul></ul><ul><ul><li>可以在该函数中为自定义组件添加子组件 ( 通过 addChild() 方法 ) </li></ul></ul><ul><ul><li>如果需要添加内部子组件,应该将其添加到 rawChildren 上,而不是直接添加到容器上,比如 Panel 组件的关闭按钮 </li></ul></ul>
    14. 14. Flex 组件篇—— 自定义组件开发 <ul><li>measure() </li></ul><ul><ul><li>该函数用于计算组件的默认大小,设置组件的 measuredHeight 和 measuredWidth 值 </li></ul></ul><ul><ul><li>如果在组件上调用了 invalidateSize() 函数,那么系统将自动调用 measure() 函数,重新计算组件的默认大小 </li></ul></ul><ul><ul><li>如果需要重新计算组件的默认大小,例如再某个影响大小的属性改变之后,只需调用 invalidateSize() 函数,一般不直接调用 measure() 函数 </li></ul></ul>
    15. 15. Flex 组件篇—— 自定义组件开发 <ul><li>updateDisplayList() </li></ul><ul><ul><li>使用 setActualSize() 函数设置子组件的大小 </li></ul></ul><ul><ul><li>使用 move() 函数设置子组件的位置 </li></ul></ul><ul><ul><li>使用 graphics 对象绘制任意可视元素 (drawLine 等底层绘制函数 ) </li></ul></ul><ul><ul><li>如果需要手动更新组件的视图,只需调用 invalidateDisplayList() 函数,系统将自动调用 updateDisplayList () 函数,重新更新组件的视图 </li></ul></ul>
    16. 16. Flex 组件篇—— 自定义组件开发 <ul><li>commitProperties( ) </li></ul><ul><ul><li>该函数用于统一提交对组件设置的属性 </li></ul></ul><ul><ul><li>在设置组件的属性时,需要标记该属性已被更新,并调用 invalidateProperties() 函数 </li></ul></ul><ul><ul><li>系统会自动调用 commitProperties() 函数,在该函数中集中处理被提交的属性 </li></ul></ul><ul><ul><li>一般在该函数中,需要对每一个自定义属性作检查,判断该属性是否有新值提交 </li></ul></ul>
    17. 17. Flex 组件篇—— 自定义组件开发 <ul><li>commitProperties() </li></ul><ul><ul><li>private var _user:User; </li></ul></ul><ul><ul><li>private var _userCommited:boolean=false; </li></ul></ul><ul><ul><li>…… </li></ul></ul><ul><ul><li>public function set user(user:User):void{ </li></ul></ul><ul><ul><li>_user = user; </li></ul></ul><ul><ul><li>_userCommited = true; </li></ul></ul><ul><ul><li> invalidateProperties(); </li></ul></ul><ul><ul><li>} </li></ul></ul>
    18. 18. Flex 组件篇—— 自定义组件开发 <ul><li>commitProperties( ) </li></ul>protected function commitProperties( ){ super.commitProperties(); if(_userCommited){ //do something with _user _ userCommited = false; } …… }
    19. 19. Flex 组件篇—— 自定义组件开发 <ul><li>总结 </li></ul>measure invalidateSize updateDisplayList invalidateDisplayList commitProperties invalidateProperties validation 函数 invalidation 函数
    20. 20. Flex 通讯篇—— 常用的通讯方案 <ul><li>Flex 常用的通讯方案 </li></ul><ul><ul><li>Socket </li></ul></ul><ul><ul><li>Http </li></ul></ul><ul><ul><li>RPC </li></ul></ul><ul><ul><li>同步 / 异步 </li></ul></ul>
    21. 21. Flex 通讯篇—— RPC 交互原理 <ul><li>RPC 交互流程 </li></ul><ul><ul><li>对参数进行编码 client object -> string </li></ul></ul><ul><ul><li>封装成 HttpRequest 并传输到服务端 </li></ul></ul><ul><ul><li>对参数进行解码 string -> server object </li></ul></ul><ul><ul><li>调用相关函数,并返回结果 </li></ul></ul><ul><ul><li>对返回值进行编码 server object -> string </li></ul></ul><ul><ul><li>封装成 HttpRespose 并返回客户端 </li></ul></ul><ul><ul><li>对返回值进行解码 string -> client object </li></ul></ul>
    22. 22. Flex 通讯篇—— RPC 交互流程
    23. 23. Flex 通讯篇—— 常用编码协议 <ul><li>XML </li></ul><ul><ul><li>采用 XML 格式对数据进行编码 </li></ul></ul><ul><ul><li>跨平台性好,协议种类多 </li></ul></ul><ul><li>JSON </li></ul><ul><ul><li>采用 JSON 格式对数据进行编码 </li></ul></ul><ul><ul><li>格式简单高效 </li></ul></ul><ul><li>Hession </li></ul><ul><ul><li>采用 Hession 协议对数据进行编码 </li></ul></ul><ul><ul><li>支持复杂的数据结构,包括引用类型支持循环引用 </li></ul></ul><ul><ul><li>格式较复杂 </li></ul></ul>
    24. 24. Flex 通讯篇—— 映射实体对象 <ul><li>客户端 </li></ul><ul><li>package cn.ijimu </li></ul><ul><li>{ </li></ul><ul><ul><li>public class User </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><ul><li>public var id:Object; </li></ul></ul></ul><ul><ul><ul><li>public var name:String; </li></ul></ul></ul><ul><ul><ul><li>…… </li></ul></ul></ul><ul><li>package cn.ijimu; </li></ul><ul><li>public class User </li></ul><ul><li>{ </li></ul><ul><ul><li>public Integer id ; </li></ul></ul><ul><ul><li>public String name ; </li></ul></ul><ul><ul><li>…… </li></ul></ul><ul><li>服务端 (Java) </li></ul>
    25. 25. Flex 通讯篇—— 实体管理器 <ul><li>封装业务逻辑 </li></ul><ul><ul><li>封装对实体对象的日常操作 </li></ul></ul><ul><ul><li>提供 CURD 方法,对实体对象进行操作 </li></ul></ul><ul><li>通过事件与 UI 交互 </li></ul><ul><ul><li>在执行 CURD 操作时,派发相应的事件 </li></ul></ul><ul><ul><li>UI 组件通过相关事件,跟踪实体集合的变化 </li></ul></ul><ul><li>与服务器端同步 </li></ul><ul><ul><li>初始化时,从服务端加载实体集合 </li></ul></ul><ul><ul><li>在执行 CURD 操作时,通过 RPC 方法和服务端同步数据 </li></ul></ul>
    26. 26. Flex 代码篇——使用 MVC 框架 <ul><li>常用 MVC 框架 </li></ul><ul><ul><li>Cairngorm </li></ul></ul><ul><ul><li>PureMVC </li></ul></ul><ul><li>使用误区 </li></ul><ul><ul><li>拿着锤子,看什么都像钉子 </li></ul></ul><ul><ul><li>根据交互类型,选择交互方式 </li></ul></ul>
    27. 27. Flex 代码篇—— 基本组成模块 <ul><li>Domain </li></ul><ul><ul><li>组织实体对象 </li></ul></ul><ul><ul><li>实例: User, Oder, Product </li></ul></ul><ul><li>Managers </li></ul><ul><ul><li>实体管理器,一般与实体对象对应 </li></ul></ul><ul><ul><li>实例: UserManager, OderManager </li></ul></ul><ul><li>Events </li></ul><ul><ul><li>应用事件派发器: AppEventDispatcher </li></ul></ul><ul><ul><li>实例: AppEvent, UserEvent, OderEvent </li></ul></ul>
    28. 28. Flex 代码篇—— 基本组成模块 <ul><li>Views </li></ul><ul><ul><li>包括视图, UI 组件 </li></ul></ul><ul><ul><li>实例: OderList, UserDetailsPane </li></ul></ul><ul><li>Commands </li></ul><ul><ul><li>用于组织一些由用户交户触发的命令 </li></ul></ul><ul><ul><li>实例: OderCommand, LogoutCommand </li></ul></ul><ul><li>Controllers </li></ul><ul><ul><li>用于辅助复杂的用户交互 </li></ul></ul><ul><ul><li>实例:多步骤的向导 </li></ul></ul>
    29. 29. Flex 代码篇—— 基本组成模块 <ul><li>Monitors </li></ul><ul><ul><li>跟踪视图状态,用户交互中间状态等 </li></ul></ul><ul><ul><li>实例:当前被选中的邮件列表 </li></ul></ul>
    30. 30. 谢谢

    ×