How To Navigate And Extend The Flex Infrastructure
Download as PPT, PDF4 likes751 views
1. The document discusses how to navigate and extend the Flex framework by reviewing the source code included with Flex. It outlines key concepts like the component lifecycle methods (commitProperties(), createChildren(), measure(), updateDisplayList()), how to find classes and packages in the framework, and inheritance conventions. 2. Understanding the component lifecycle methods and when they are called is important for working with Flex. The document provides an overview of what each method does and the typical order they are called. 3. The Flex framework source code is a valuable learning resource that contains many code examples and design patterns that can be reviewed and learned from.
How To Navigate And Extend The Flex Infrastructure
- 1. How to Navigate and Extend the Flex Infrastructure Michael Labriola Senior Consultant digital primates IT Consulting Group Adobe Certified Instructor – Flex Adobe Certified Expert – Flex Adobe Community Expert – Flex
- 2. Who am I? Senior Consultant @ digital primates IT Consulting Group means: I spend the majority of my day crawling through the flex infrastructure so I can teach it to others I mentor large development teams that need to learn Flex fast when management declares it as a new direction I am responsible for writing code that will someday be cloned thousands of times with little regard to the initial context
- 3. Who am I? Reverse Engineer Deciphering how someone else’s micro-controller was programmed with an oscilloscope and a lot of Mountain Dew ® Reading and rewriting 68k opcodes in hex Learning through pure induction, all day, every day
- 4. What is Flex? Flex is a product developed by Adobe which allows developers to create rich Internet applications that run in the flash player. Flex solves some of the frustration traditional application developers encounter when trying to create applications in Flash Flex is generally written using two languages MXML – An XML tag based language used to define the visual layout ActionScript 3 – A newer generation of the actionscript language familiar to those with a flash background
- 5. What are we going to talk about? If you give a man a fish, he will have a single meal. If you teach him to fish, he will eat all his life. Sure, this saying is overused but the concept is important I am not planning on teaching how to program a Flex component… I want to teach you how to figure it out on your own
- 6. What are we going to talk about? Knowing how to solve a problem is more important than having the solution I think this applies to Flex… Warning: Does not apply in every situation. Great example: lack of a parachute
- 7. What are we going to talk about? The solutions already exist, you don’t know where to find them There is more information available in terms of code samples, design patterns and general Flex know-how in the framework *already* installed with Flex than any book, blog or doc in the world. Why aren’t you using them?
- 8. What can we expect? We aren’t going to write code. We are going to read code We will review, read and talk about code in the framework and code that I wrote for this session… You don’t need to see me type it to make it valid I am not going to provide a bunch of rules, I am going to show you where you should look to induce these generalities
- 9. What can we expect? Questions Please ask when we are covering the topic. In this session, depth is more important than breadth. I would rather drop slides off the end and ensure you understand what I do present
- 10. Sounds fine, how do we get started? Source Code For those of you that don’t know, MXML tags, such as DataGrid and Button, are really just ActionScript classes If you want to understand how to make a component that has nodes like the Tree control but moves panes like the Accordion, what better place to look but the source code for these components
- 11. Where do we find the source? The Flex Framework Flex ships with (almost) all of the source code available for your review You can find this code under the Flex Builder 3 installation folder at \sdks\3.0.0\frameworks\projects\framework\src
- 12. How do we get to the source? Linked Folder If you feel like being a bit clever (lazy) you can setup a linked folder in your project to the source directory. Doing so will give you quick access to the source You can also press Control-Shift-T at any time to find a class
- 13. How do we get to the source? Organization of Packages Flex packages follow a consistent setup The majority of components extended by developers reside in controls and containers
- 14. How do we know where the code resides? The Help Files The Flex help files contain the package information
- 15. How do we read the code? Conventions Within the framework, coding conventions such as consistent method and variable names are routinely followed Comments and compiler metadata are used to add dialogue to the code
- 16. What are the conventions? Naming Conventions MyClassName – Classes are always mixed case starting with a capital letter myMethodName() or myVariableName – Always start lower case STATIC_OR_CONST – Always upper case, underscore separated
- 17. What else do we need to read the code? Access Control internal - (default) Visible to references inside the same package private – visible to references inside the same class protected – visible to references in the same class and derived classes public – visible to references everywhere static – specifies that a properties belongs to a class, not an instance
- 18. What else do we need to read the code? Namespaces Namespaces provide further granularity to the visibility of methods and properties use namespace mx_internal; mx_internal function columnItemRendererFactory()
- 19. Got it. What Else? MetaData Tags Reading the metadata tags can often provide as much information as the remainder of the documentation
- 20. What If we don’t see what we need? Following Inheritance Control+Click or F3 causes Flex Builder to find where a given property was defined This is particularly helpful when the property or method was defined in a different class
- 21. Is this inheritance documented? Just as the help files show the package name, they also show the inheritance chain and where a property was originally declared
- 22. How far does it go? While the majority of the source code is available for your review, event dispatching and some other low level items are not present as source code
- 23. That’s it? Viewing code without a concept of order is useless Flex Components startup and execute in a very specific order, often called the component instantiation lifecycle This lifecycle consists of a series of methods that are called by the Flex framework, not directly by the developer
- 24. What are these methods? The lifecycle methods consist mainly of: commitProperties() createChildren() measure() updateDisplayList ()
- 25. What does commitProperties do? commitProperties commits changes to a component. It is useful for: Ensuring changes happen at the same time Ensuring that properties are set in a specific order Ensuring properties are not set on child objects until the exist Reducing code duplication that can occur when dependencies between properties exist
- 26. What does createChildren do? createChildren is used to make composite components. It is responsible for: instantiating any visual child objects within the component createChildren only ensures these children are created, it does NOT deal with layout or sizing
- 27. What does measure do? measure helps determine the size of a component Calculates the default size/default minimum size of a component. Parent objects have the ultimate say on sizing a component. Measure provides a ‘suggestion’ to the parent of this component This method is only called if Flex needs to derive the size. It is not called if a explicit height and width are set
- 28. What does updateDisplayList do? updateDisplayList is the workhorse of the Flex component Sizes and positions any items created in createChildren Also responsible for drawing items like backgrounds or other graphical elements When Flex calls updateDisplayList, it provides the width and height actually allocated for your component regardless of scaling
- 29. Does that cover what I need to know? The order that these methods are called is still extremely important When a component is created either in MXML or ActionScript, the components constructor is always called <comp:MyComponent/> OR var comp:MyComponent = new MyComponent();
- 30. What about the rest of the methods? The lifecycle methods begin when a component is added to a container When using MXML to add a component, it is generally added to its parent container automatically When using ActionScript, the developer manually calls the addChild method var comp:MyComponent = new MyComponent(); addChild( comp );
- 31. What about the rest of the methods? The lifecycle methods will then generally execute in this order commitProperties() createChildren() measure() updateDisplayList()
- 32. So these methods are only called once? createChildren() will only be called once, however, the developer can request that the other methods are called at specific times Calling invalidateProperties() asks Flex to call commitProperties() Calling invalidateSize() asks Flex to call measure() Calling invalidateDisplayList() asks Flex to call updateDisplayList()
- 33. Why shouldn’t I just call the actual methods? Calling the invalidate* methods asks Flex to call the lifecycle methods at the appropriate time By using the invalidate* methods you allow Flex to effectively ‘schedule’ when these methods will be called Doing so can increase the responsiveness of your application by decreasing the number of times a these methods are actually invoked
- 34. Ok. That’s it, right? Yes, for now. Let’s take a tour of the framework and try to solve a real world problem using your newfound knowledge
- 35. Review Time The Flex framework has a tremendous amount of code available for review It is, in my opinion, the single best way to learn Flex Understanding where to look for these solutions means you have a virtually infinite resource of solid code and design patterns
- 36. Where to go from here? Read my blog ‘codeSlinger’… because I said so http://blogs.digitalprimates.net/codeSlinger Everyone at digitalprimates http://blogs.digitalprimates.net/ <michigan:FlexCamp/> on July 30 th and 31st http://www.theflexgroup.org/camp/
- 37. How to Navigate and Extend the Flex Infrastructure Michael Labriola Senior Consultant digital primates IT Consulting Group Adobe Certified Instructor – Flex Adobe Certified Expert – Flex Adobe Community Expert – Flex