Apocalypse Soon


Published on

360|Flex San Jose 2010 presentation on Flex 4 component life cycle

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Apocalypse Soon

  1. 1. Apocalypse Soon? The remaking of 'Flex Components' Michael Labriola Digital Primates
  2. 2. Who are you? <ul><li>Michael Labriola </li></ul><ul><li>Senior Consultant at Digital Primates </li></ul><ul><li>Flex Geek </li></ul><ul><li>Component Developer </li></ul><ul><li>Flex Team Mentor </li></ul><ul><li>Flex Unit 4 Lead Developer </li></ul>
  3. 3. What is this session about? <ul><li>This session is part of my continuing quest to teach Flex from the inside out. </li></ul><ul><li>Learn what the Flash Player and the Flex framework are really doing and you are more likely to use them successfully, respect their boundaries and extend them in useful ways </li></ul>
  4. 4. Where are we going to do? <ul><li>We are going to derive the Flex Framework.. Well at least the component model </li></ul><ul><li>We are not going to write or implement our own custom components </li></ul><ul><li>We are going to talk about how Flex components work and why </li></ul>
  5. 5. Standard Disclaimer <ul><li>I am going to lie to you a lot… a whole lot </li></ul><ul><li>Even at this ridiculous level of detail, there is much more </li></ul><ul><li>All of this is conditional. So, we are just going to take one route and go with it </li></ul>
  6. 6. Flex Components <ul><li>Flex 3 and Flex 4 components share a common ancestry which allows for interoperability </li></ul><ul><li>They both descend from UIComponent, the base class for most interactive visual items in Flex </li></ul>
  7. 7. Flex Components <ul><li>These components are expected to interact with the user and run inside of the Flash Player, which means they are also subject to the resources available </li></ul><ul><li>One of the most relevant aspects of the Flash Player which drives component development is </li></ul>
  8. 8. The Beginning <ul><li>If you are going to write components that behave well in the Flash Player, then you better know something about the Flash Player </li></ul><ul><li>You can’t write good components divorced from the environment where they run </li></ul>
  9. 9. The Flash Player <ul><li>For our purposes, the Flash Player is nothing more than a single threaded runtime allowing us to execute byte code </li></ul><ul><li>The word single threaded is thrown around a lot, but what does it really mean </li></ul>
  10. 10. Single Threaded <ul><li>The colloquial meaning is that a single threaded machine can only do one thing at a time. </li></ul><ul><li>That’s sort of right, but with the exception of mutlicore chips and multiple processors almost every computer can only do one thing at a time </li></ul>
  11. 11. Single Threaded <ul><li>In general that means that a single processor is only doing one thing at a time in either single or multithreaded environments </li></ul><ul><li>So, what does single threaded really mean? </li></ul>
  12. 12. Single Threaded <ul><li>It means that the processor can’t interrupt running code to do something else </li></ul><ul><li>In a single threaded environment a running method must be allowed to complete, and the method that called it, etc. before something else can happen </li></ul>
  13. 13. Multi Threaded <ul><li>In a multi-threaded environment, the system can pause executing code go and work on something else and come back </li></ul><ul><li>Multi-threading is exceptionally useful, but imagine the great possibilities of how you can screw up. </li></ul>
  14. 14. Back to Single <ul><li>So Flash Player is single threaded. It is never, ever going to interrupt ActionScript code execution </li></ul><ul><li>What the player is really doing is creating a multitasking environment, which is the appearance of doing multiple things at once. This is accomplished via scheduling </li></ul>
  15. 15. Multitasking <ul><li>The player schedules when code is going to run. It executes your code on a schedule and eventually takes the results and renders them to the screen. </li></ul>
  16. 16. Framerate <ul><li>It needs to ensure that it both executes your code and renders the screen at a rate fast enough to be a good experience for the user </li></ul><ul><li>This is where the concept of a framerate comes in. For our purposes, this is the rate at which Flash Player renders to the screen </li></ul>
  17. 17. Interruption <ul><li>However, there is an issue. Remember Flash Player cannot ever interrupt your code. </li></ul>
  18. 18. Solving It <ul><li>To attempt to solve the issues we have the idea of invalidation. </li></ul><ul><li>Invalidation allows us to indicate that some piece of code needs to be run. However, instead of running it now, we ask that it is run at the appropriate point in the schedule </li></ul>
  19. 19. Invalidation <ul><li>This invalidation scheme is core to what it means to be a Flex component. </li></ul><ul><li>All Flex components for version 3 and 4 embrace the same invalidation scheme allowing code to execute later.. </li></ul><ul><li>Speaking of 3 versus 4 </li></ul>
  20. 20. Flex 3 v 4 <ul><li>Flex 4 is based on (more or less) the same UIComponent class used in Flex 3. That means all of the basic methods of Flex 3 also apply to Flex 4. </li></ul><ul><li>However, there is one minor difference in approach </li></ul>
  21. 21. A Simple Component <ul><li>Let’s imagine at a series of components in the Flex 3 world. They are simply responsible for positioning 3 pictures in a variety of ways and adding a variety of borders. </li></ul>
  22. 22. Flex 3 <ul><li>In the Flex 3 world, we would likely have one of two scenarios </li></ul><ul><li>A base class and then a descendent class for each layout (think List, HorizontalList) plus potentially more descendents for different frame types: (Button, LinkButton ) </li></ul>
  23. 23. Flex 3 <ul><li>Or we would have one giant uber base class that has all of this functionality inside of it and can then be configure. </li></ul><ul><li>Option 1 is rough for maintenance. Option 2 is very heavy </li></ul>
  24. 24. Flex 4 Frame Horizontal Vertical Diagonal Frame 1 Frame 2
  25. 25. Making it Work <ul><li>To make a philosophy like Flex 4 work though, all of the visual components need to exist outside of the base component </li></ul><ul><li>What does that mean a list really is? </li></ul>
  26. 26. Important things to understand <ul><li>In Flex 4 components are composed of two pieces </li></ul><ul><ul><li>The form </li></ul></ul><ul><ul><li>The function </li></ul></ul>
  27. 27. The Function <ul><li>What the component does </li></ul><ul><li>How it does it </li></ul><ul><li>When it does it </li></ul><ul><li>Defines what the component is </li></ul><ul><ul><li>Buttons are about being clicked </li></ul></ul><ul><ul><li>List is about selection and virtualization </li></ul></ul>
  28. 28. The Form <ul><li>A list doesn’t have to be horizontal or vertical to be a list </li></ul><ul><li>Buttons don’t need to be rectangles </li></ul>
  29. 29. Separation <ul><li>Separating these pieces favors composition over inheritance </li></ul><ul><li>By separating form and function we gain and we lose. </li></ul>
  30. 30. We Gain <ul><li>The capability of having one set of functionality look many different ways </li></ul><ul><li>Back to the list example, a list can be horizontal, vertical, circular, etc. but we only have to maintain the code in one list class </li></ul>
  31. 31. We Lose <ul><li>We lose a lot of dead weight </li></ul><ul><li>We lose a lot of extra classes </li></ul>
  32. 32. There are two types of UI Components in Flex <ul><li>Controls </li></ul><ul><ul><li>Interact with a user </li></ul></ul><ul><ul><li>Present data </li></ul></ul><ul><ul><li>Accept gestures </li></ul></ul><ul><li>Containers </li></ul><ul><ul><li>Hold other containers and controls </li></ul></ul><ul><ul><li>Control positioning of children </li></ul></ul>
  33. 33. On the topic of losing weight <ul><li>There are two types of things in the Flex 4 world, those that can be skinned and those that cannot </li></ul><ul><ul><li>Roughly corresponding to those that have their own visual appearance and those that simply influence the visualization of others </li></ul></ul><ul><li>Why? Because we don’t want to burden everything in the world with functionality it doesn’t need </li></ul>
  34. 34. Groups are the Base Type of Container <ul><li>Groups don’t have a visual identity of their own </li></ul><ul><li>Groups can accept a layout object to handle the layout of children </li></ul>
  35. 35. Layout Types <ul><li>Layout types built into flex </li></ul><ul><li>BasicLayout </li></ul><ul><li>HorizontalLayout </li></ul><ul><li>VerticalLayout </li></ul><ul><li>The important part about this is creating your own layouts </li></ul>
  36. 36. Controls and Some Containers can be Skinned <ul><li>Controls can also have their visual appearance modified and quite easily by skinning </li></ul>
  37. 37. Skins <ul><li>Skins are classes defined in MXML </li></ul><ul><li>They are based on the Skin class </li></ul><ul><li>They are applied to components using </li></ul><ul><li>The skinClass </li></ul><ul><li>Or by CSS </li></ul>
  38. 38. Definitions <ul><li>Think about the list class </li></ul><ul><li>No visual elements can exist inside the list or it reduces skin-ability </li></ul><ul><li>All visuals exist in the skin </li></ul><ul><li>That means the component provides the functionality and controls aspects of the skin </li></ul><ul><li>That could get ugly </li></ul>
  39. 39. Contracts <ul><li>That means we must have some sort of contract between a skin and a component. </li></ul><ul><li>This contract defines the minimum things that must be present inside of the skin to be considered valid </li></ul><ul><li>This contract is fulfilled in two ways </li></ul>
  40. 40. Components <ul><li>Declare skin parts (required or not) </li></ul><ul><li>Declare skin states </li></ul>
  41. 41. Skins <ul><li>Specify a HostComponent </li></ul><ul><ul><ul><li><fx:Metadata> </li></ul></ul></ul><ul><ul><ul><li>[HostComponent(&quot;spark.components.Button&quot;)] </li></ul></ul></ul><ul><ul><ul><li></fx:Metadata> </li></ul></ul></ul><ul><li>Declare states </li></ul><ul><ul><ul><li><s:states> </li></ul></ul></ul><ul><ul><ul><li><s:State name=&quot;up&quot; /> </li></ul></ul></ul><ul><ul><ul><li><s:State name=&quot;over&quot; /> </li></ul></ul></ul><ul><ul><ul><li></s:states> </li></ul></ul></ul><ul><li>Establish visuals </li></ul>
  42. 42. Visuals <ul><li>What type of visuals? </li></ul>
  43. 43. How it all works <ul><li>Internally Flex components are driven by a couple of basic needs </li></ul><ul><li>They have the need to size themselves correctly. </li></ul><ul><li>They have the need to be created at runtime </li></ul><ul><li>They have the need to interact with parents and children </li></ul>
  44. 44. Instantiation <ul><li>Just like any other ActionScript class, all Flex components start with a constructor </li></ul><ul><li>Constructors in Flex add event listeners and setup initial properties… that’s it </li></ul>
  45. 45. Display List <ul><li>Eventually, the lucky components make it onto the display list, this is where the work starts </li></ul><ul><li>An item on the display list needs to interact with users.. And hence needs a visual appearance </li></ul>
  46. 46. Creating Children <ul><li>In Flex, all visual children of a component are created in the createChildren method </li></ul><ul><li>In Flex 4, the visual children of a component exist in the skin and so the skin is first created at this time </li></ul>
  47. 47. Skin Methods <ul><li>To that end, Flex 4 introduces a few new methods as well: </li></ul><ul><li>attachSkin </li></ul><ul><li>detachSkin </li></ul><ul><li>partAdded </li></ul><ul><li>partRemoved </li></ul>
  48. 48. Sizing <ul><li>One of the most import differentiators of Flex components is their ability to self size </li></ul><ul><li>When I put a Container on the screen and put a Button inside of it, everything figures out how to size itself correctly, how? </li></ul>
  49. 49. Sizing <ul><li>Sizing in Flex applications works because each parent is allowed to determine its appropriate size based on its children </li></ul><ul><li>So, first step in sizing would be needing to know the size of your children, which means, they need to exist </li></ul>
  50. 50. Sizing <ul><li>Each and every component in the Flex framework implements a method called measure(). </li></ul><ul><li>Measure is responsible for figuring out four things </li></ul><ul><li>measuredWidth/Height – how big the component would like to be </li></ul><ul><li>measuredMinWidth/measuredMinHeight – min sizes </li></ul>
  51. 51. Sizing <ul><li>Measure can do this any way it wants.. Random, hardcoded, it doesn’t matter and we don’t know for sure, however, most components figure out how big they would like to be, based on how big their children are </li></ul>
  52. 52. Sizing <ul><li>This means that one of two things needs to be true, either the children must know their size before their parent or the parent must be able to force the children to size themselves. </li></ul><ul><li>Either would work equally well in a simple example, but it is a recursive problem and remember Flash Player cannot interrupt code execution </li></ul>
  53. 53. Sizing <ul><li>So, Flex works on the principle that children must be sized before their parent and it makes the sizing process potentially asynchronous </li></ul><ul><li>How? Well, ever waited in line to get on a plane? </li></ul>
  54. 54. Plane <ul><li>Usually when boarding a plane it is not just a linear process. Some airlines allow premier members to board first. Some have the back of the plane or the window seats board first. </li></ul><ul><li>So, even though your position in line has something to do with your boarding time, there is the ability to modify that </li></ul>
  55. 55. Priority Queue <ul><li>This is an example of a priority queue which is at the heart of the how Flex handles these issues. Every time a component needs to be sized (including the first time) it is added to a priority queue. </li></ul><ul><li>What establishes the priority? </li></ul>
  56. 56. Measure v. NestLevel <ul><li>Well in the case of measure, children at a deeper nest level are handled before children at a shallower level. </li></ul><ul><li>In other words, it is still a queue, but if two components need to be measured at the same time, the one on the deeper nest level always gets measured first </li></ul>
  57. 57. Measure v. NestLevel <ul><li>This makes a lot of sense. </li></ul><ul><li>If parents need to figure out their size based on their children, then even if things change size at runtime, we really need to make sure that we figure out the new size of children before their parents. </li></ul>
  58. 58. Flex 4 <ul><li>So, in Flex 4 children don’t live inside of a component, they live in the skin, so how do we measure? </li></ul><ul><li>This is all recursive, the skin is a component, so we ask it the size of its children </li></ul>
  59. 59. Measured Data <ul><li>The whole of the work done in measure is only a suggestion. </li></ul><ul><li>When the measure method is done the component has four pieces of possibly irrelevant information. </li></ul><ul><li>The component does not have a size </li></ul>
  60. 60. Sizing <ul><li>There are only a few absolutes in Flex, but one of them is that a component does not size itself. </li></ul><ul><li>Parents size children </li></ul>
  61. 61. Sizing <ul><li>So, after all of the measuring is done, all you have a are a bunch of suggestions on how big you might like things to be </li></ul><ul><li>Now comes the critical time when children actually need to be sized </li></ul>
  62. 62. Sizing and Positioning <ul><li>Sizing and positioning is done in a method called updateDisplayList() </li></ul><ul><li>This method, like measure() is called by the framework when it is time </li></ul>
  63. 63. UDL v NestLevel <ul><li>The order in which it is called is also based on its nestLevel. However, since this method directly affects children, it is opposite of measure. </li></ul><ul><li>A parent must know its size before it can assign size to its children, so parents are always called before children </li></ul>
  64. 64. UDL <ul><li>Each component on the screen is given an width and a height that it is allowed to work with. </li></ul><ul><li>This facilitates the biggest and best lie in Flex </li></ul>
  65. 65. UDL <ul><li>Components are given a size. </li></ul><ul><li>Once the component is given its size, it is free to do what it wishes. For the most part, this information is simply passed down to the skin </li></ul><ul><li>Again recursion </li></ul>
  66. 66. Resources <ul><li>Blog Aggregator (All of the Digital Primates) </li></ul><ul><li>http://blogs.digitalprimates.net/ </li></ul><ul><li>My Blog Specifically </li></ul><ul><li>http://blogs.digitalprimates.net/codeSlinger/ </li></ul>