How to Navigate and Extend the Flex Infrastructure

Michael LabriolaSenior 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

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

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?

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

\sdks\3.0.0\frameworks\projects\framework\src

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 methodvar 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 30th and 31st• http://www.theflexgroup.org/camp/

How to Navigate and Extend the Flex Infrastructure

Michael LabriolaSenior Consultant

digital primates IT Consulting Group

Adobe Certified Instructor – Flex Adobe Certified Expert – Flex

Adobe Community Expert – Flex