Flex 4.5 action custom component development

1,601 views

Published on

Flex4.5实战课程 - 事件、数据绑定与组件开发

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,601
On SlideShare
0
From Embeds
0
Number of Embeds
289
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Flex 4.5 action custom component development

    1. 1. Flex4.5 实战课程 事件、数据绑定与组件开发 http://weibo.com/agilelife 2011.08.24
    2. 2. 组件开发 事件驱动机制Contents Flex4.x开发核心技术 数据绑定机制 数据集合 组件演示 组件开发实战 Flex组件生命周期 动手实践组件开发 Q&A
    3. 3. 核心技术 Event 事件驱动机制 Flex4.X开发核心技术 数据绑定机制 数据集合
    4. 4. 核心技术 Event 1. 显示列表 Display List 2. 事件驱动模型 Event Model 3. 自定义事件 Custom Event 4. 扩展阅读
    5. 5. 核心技术 Eventpublic function addEventListener( type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
    6. 6. 核心技术 Event 显示列表 Display List
    7. 7. 核心技术 Event
    8. 8. 核心技术 Event 事件流 Event Flow EventFlow.mxml
    9. 9. 核心技术 Event 自定义事件 Custom Event CustomEvent.as
    10. 10. 核心技术 Event事件派发:dispatchEvent(new CustomEvent("传递的错误消息内容"));事件侦听:someComponent.addEventListener(CustomEvent.ERROR_MESSAGE_EVENT, onCustomEventHandler);
    11. 11. 核心技术 Event 事件应用最佳实践 1. 事件的阻止 2. 松耦合的核心 3. 于弱引用
    12. 12. 核心技术 Event 扩展阅读 1. EventBroker 2. AS3 Signals 3. Parsley消息机制 4. PureMVC消息机制
    13. 13. 核心技术Data Binding 数据绑定 什么是数据绑定?
    14. 14. 核心技术Data Binding 数据绑定的不同形式 1. { } 2. <Binding/> 3. BindingUtil 4. ChangeWatcher 5.Two Way Binding 6. [Bindable]
    15. 15. 核心技术Data Binding 1. { } <s:TextInput id="txtInputA" /> <s:TextInput id="txtInputB" text="{txtInputA.text}"/>
    16. 16. 核心技术Data Binding 2. <Binding/> <fx:Binding source="txtInputA.text" destination="txtInputB.text"/> <s:TextInput id="txtInputA" /> <s:TextInput id="txtInputB" />
    17. 17. 核心技术Data Binding 3. BindingUtil BindingUtils.bindProperty(txtInputB, "text", txtInputA, "text");
    18. 18. 核心技术Data Binding 4. ChangeWatcher var watcher:ChangeWatcher = ChangeWatcher.watch(person, "firstName", onWatcher); private function onWatcher(evt:PropertyChangeEvent):void { firstNameId.text = evt.newValue.toString(); } ... //当你要停止绑定时,手动调用 watcher.unwatch();
    19. 19. 核心技术Data Binding 5.Two Way Binding //仅需在绑定符号{}外加上@符号即可 <s:TextInput id="txtInputB" text="@{txtInputA.text}"/> //或者 //在<Binding/>标签中指定twoWay为true即 <fx:Binding source="txtInputA.text" destination="txtInputB.text" twoWay="true"/>
    20. 20. 核心技术Data Binding 6. [Bindable] [Bindable] public var person:Person = new Person(); [Bindable(event="customEvent")] public function get person():Person { return _person; } 在类前使用绑定元标签 ......
    21. 21. 核心技术Data Binding 数据绑定机制背后的故事 添加相应的编译参数“-keep”或“-keep-generated-actionscript” 并观察编译器自动生成的中间AS3代码
    22. 22. 核心技术Data Binding 数据绑定最佳实践
    23. 23. 核心技术 DataCollection Flex中的数据集合 此部分放在后面的与服务器端通信的课程中谈论
    24. 24. 核心技术 DataCollection 数据集合实践与应用 1. ArrayCollection与Array 2. XMLListCollection与XMLList 3. 数据集合的访问与操作 4. 最佳实践
    25. 25. 核心技术 DataCollection
    26. 26. 组件开发ComponentDevelopment 组件演示 组件开发实战 Flex组件生命周期 动手实践组件开发
    27. 27. 组件开发ComponentDevelopment 本页内容请勿 制
    28. 28. 组件开发ComponentDevelopment 本页内容请勿 制
    29. 29. 组件开发ComponentDevelopment Flex组件架构及生命周期 Halo/Spark组件架构 组件生命周期
    30. 30. 组件开发Spark架构 http://www.dehats.com/drupal/?q=node/96
    31. 31. 组件开发Spark架构 MX/Halo组件架构 Spark组件架构 (Flex3) (Flex4)
    32. 32. 组件开发Spark架构 M V C
    33. 33. 组件开发Spark架构 MXHalo architecture M V V C
    34. 34. 组件开发Spark架构 Spark architecture M C V
    35. 35. 组件开发Spark架构 Data Parts States
    36. 36. 组件开发Spark架构 Why Flex Component Lifecycle ? 为什么需要理解Flex组件生命周期
    37. 37. 组件开发Spark架构 Lifecycle ? 生命周期 1. Flex Application 2. Flex Component 3. Others (Jquery/Spring/Servlet...)
    38. 38. 组件开发帧模型 http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/
    39. 39. 组件开发帧模型 http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/
    40. 40. 组件开发帧模型 http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/
    41. 41. 组件开发帧模型 What means ? 帧模型图到底有什么用
    42. 42. 组件开发帧模型 1. 单帧内代码可能会执行多次 2. Render 仅一次在一帧的末尾发生 3. SWF实际的帧率不会超过Marshals定的帧率
    43. 43. 组件开发LifeCycle Deat Birth Life h
    44. 44. 组件开发LifeCycle 灰色标识的事件仅执行一次
    45. 45. 组件开发 ⁃LifeCycle ⁃ ⁃ ⁃ LIFE 通常在invalidation阶段提出请求,在validation阶段完成请求
    46. 46. 组件开发LifeCycle // Create a Group container. var groupContainer:Group = new Group(); // Configure the Group container. groupContainer.x = 10; groupContainer.y = 10; // Create a Button control. var b:Button = new Button() // Configure the button control. b.label = "Submit"; ... // Add the Button control to the Box container. groupContainer.addElement(b);
    47. 47. 组件开发 LifeCycle // Create a Button control. var b:Button = new Button() 调用:BRITH Constructor
    48. 48. 组件开发 LifeCycle // Configure the button control. b.label = "Submit";BRITH 调用: invalidateProperties(), invalidateSize(), invalidateSkinState(), 或 invalidateDisplayList()
    49. 49. 组件开发LifeCycle // Add the Button control to the Box container. gropContainer.addElement(b);BRITH preinitialize initial http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e9107ecb-7fff.html
    50. 50. 组件开发LifeCycle 1. 通常须override的方法 2. 注意事件驱动的本质 3. 注意各个方法执行的顺序 4. 将Lifecycle过程对应到帧模型及Elastic Racetrack图
    51. 51. 组件开发LifeCycle
    52. 52. 组件开发 Container ComponentLifeCycle
    53. 53. 组件开发ComponentDevelopment 组件开发的几种方式 1. 合MXML组件 2. 标准组件扩展 3. 完全自定义组件 SkinableComponent SkinableContainer
    54. 54. 组件开发ComponentDevelopment 复合MXML组件 composite_mxml.mxml
    55. 55. 组件开发ComponentDevelopment 扩展Flex标准组件 MXML ActionScript extended_actionscript.mxml
    56. 56. 组件开发Case Study 完全自定义组件 StatusIconSample.mxml CustomPopUpWinSample.mxml
    57. 57. 组件开发publish 补充部分: 组件测试准备 组件发布
    58. 58. 组件开发 Notes 多看官方文档及SDK源代码 ~~ 多参考第三方开源库 多动手实践
    59. 59. 组件开发 Notes 作 业 ~~
    60. 60. 资源推荐 Link A brief overview of the Spark architecture and component set http://www.adobe.com/devnet/flex/articles/flex4_sparkintro.html Flex 4 Component Lifecycle http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/ Elastic RaceTrack http://www.craftymind.com/2008/04/18/updated-elastic-racetrack-for-flash-9-and-avm2/ Using Flex4 - Custom components http://help.adobe.com/en_US/flex/using/WS4bebcd66a74275c35bf45738120d4f86190-8000.html 《Flex企业级应用 发最佳实践》 ... 写作中
    61. 61. 提问Q&A 谢谢〜~〜~ 微博: http://weibo.com/agilelife

    ×