How To Navigate And Extend The Flex Infrastructure

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

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

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

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

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

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

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?

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

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

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

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

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

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

How do we know where the code resides?
The Help Files
The Flex help files contain the package information

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

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

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

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()

Got it. What Else?
MetaData Tags
Reading the metadata tags can often provide as much information as the remainder of the documentation

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

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

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

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

What are these methods?
The lifecycle methods consist mainly of:
commitProperties()
createChildren()
measure()
updateDisplayList ()

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

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

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

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

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();

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 );

What about the rest of the methods?
The lifecycle methods will then generally execute in this order
commitProperties()
createChildren()
measure()
updateDisplayList()

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()

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

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

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

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/

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

How To Navigate And Extend The Flex Infrastructure

by michael.labriola

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 6

Statistics