Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Custom Components In Flex 4

14,221 views

Published on

Adobe Devsummit Presentation on Custom Components in Flex 4 by Mrinal Wadhwa

Published in: Technology, Business

Custom Components In Flex 4

  1. 1. Custom Components in Flex 4 Mrinal Wadhwa http://www.mrinalwadhwa.com
  2. 2. What is a component ?
  3. 3. Composition
  4. 4. a squad ...
  5. 5. Squad.mxml
  6. 6. a legion ...
  7. 7. Legion.mxml
  8. 8. the architecture ...
  9. 9. in flex ...
  10. 10. Halo the architecture of components in Flex 3 and before
  11. 11. Spark the architecture of components in Flex 4
  12. 12. all components inherit from ... mx.core.UIComponent
  13. 13. in Spark its more common to use ... spark.components.supportClasses.SkinnableComponent
  14. 14. the lifecycle of a component ...
  15. 15. BIRTH
  16. 16. BIRTH LIFE
  17. 17. BIRTH LIFE DEATH
  18. 18. Why does a component need a life cycle?
  19. 19. Flex applications run in the Flash Player
  20. 20. What Flex can do is a subset of what the Flash Player can do, not a superset.
  21. 21. so to understand flex components better, lets take a deeper look at how the flash player works ...
  22. 22. Frames
  23. 23. Frames everything is done in frames ...
  24. 24. Frame Rate the number of frames processed per second (fps)
  25. 25. Frame Rate you can suggest the player a frame rate you would like your swf to have ...
  26. 26. Frame Rate [SWF(width=”800”,height=”600”,frameRate=”60”)] OR stage.frameRate = 60; OR <s:Application frameRate=”60” ... >
  27. 27. Frame Rate the player tries its best to maintain the suggested frame rate, but there are no guarantees ...
  28. 28. Frame Rate the actual framerate achieved may be lower or higher than what we suggested ...
  29. 29. Frame Rate browsers can force a lower framerate on the flash player ...
  30. 30. Frame Rate In Firefox and Safari, frame rate falls to about 10 if the Tab running the swf is out of focus ...
  31. 31. Frame Rate In Safari if window is minimized, framerate falls to zero ..
  32. 32. now lets take a deeper look at what happens inside each frame ..
  33. 33. code execution rendering 1 frame the length of the track represents the time taken by this frame
  34. 34. code execution rendering heavy code execution 1 frame 1 frame the length of the track represents the time taken by this frame
  35. 35. code execution rendering heavy code execution heavy rendering 1 frame 1 frame 1 frame the length of the track represents the time taken by this frame
  36. 36. Ted Patrick called this ... code execution rendering heavy code execution heavy rendering 1 frame 1 frame 1 frame the length of the track represents the time taken by this frame
  37. 37. The Elastic Racetrack code execution rendering heavy code execution heavy rendering 1 frame 1 frame 1 frame the length of the track represents the time taken by this frame
  38. 38. Sean Christmann did some more research on this ...
  39. 39. The Marshal He proposed AVM2 is controlled by something he called the Marshal ..
  40. 40. The Marshal the marshal is responsible for carving out time slices ...
  41. 41. The Marshal the duration of a slice can vary based on your OS,browser etc. just for our discussion lets assume a slice is 20ms long ..
  42. 42. A Marshaled Slice
  43. 43. A Marshaled Slice but all these actions may not happen on each slice ...
  44. 44. A Marshaled Slice Flash Player’s Event.RENDER event is fired at this point
  45. 45. A Marshaled Slice invalidate action and render action only happen in the last slice of a frame ..
  46. 46. with 20ms slices ...
  47. 47. with 20ms slices ... code execution
  48. 48. with 20ms slices ... render
  49. 49. with 20ms slices ...
  50. 50. with 20ms slices ... code execution
  51. 51. with 20ms slices ... render
  52. 52. with 20ms slices ...
  53. 53. Code can be executed more often than the times stuff is rendered on the screen ...
  54. 54. ... this is the main reason a component needs a lifecycle performance
  55. 55. BIRTH LIFE DEATH
  56. 56. Construction Addition BIRTH Initialization LIFE DEATH
  57. 57. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update DEATH
  58. 58. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update Removal DEATH
  59. 59. StormTrooper.as
  60. 60. StormTrooperSkin.mxml
  61. 61. Constructor
  62. 62. Constructor
  63. 63. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update Removal DEATH
  64. 64. Construction Addition BIRTH Initialization Invalidation LIFE Validation Update Removal DEATH
  65. 65. Invalidation invalidateProperties invalidateSize invalidateDisplayList Event.RENDER LIFE Validation commitProperties measure layoutChrome(optional) updateDisplayList Update
  66. 66. the lifecycle methods ...
  67. 67. Invalidation/Validation cycle (Life) invalidateProperties commitProperties invalidateSize measure invalidateDisplayList updateDisplayList
  68. 68. defining states ...
  69. 69. defining skin parts ...
  70. 70. static ... when the number of instances needed is known and small
  71. 71. dynamic ...
  72. 72. required ...
  73. 73. optional ...
  74. 74. partAdded and partRemoved
  75. 75. defining properties ...
  76. 76. Bindable properties
  77. 77. throwing events ...
  78. 78. .......
  79. 79. defining styles ...
  80. 80. ?
  81. 81. Mrinal Wadhwa http://www.mrinalwadhwa.com http://twitter.com/mrinal

×