Your SlideShare is downloading. ×
How To Navigate And Extend The Flex Infrastructure
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

How To Navigate And Extend The Flex Infrastructure


Published on

Published in: Technology, Business

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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
      • sdks3.0.0frameworksprojectsframeworksrc
  • 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
      • Everyone at digitalprimates
      • <michigan:FlexCamp/> on July 30 th and 31st
  • 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