Flex 3

I have published the source code that I demonstrated during my 360|Flex presentation on github. You don't need git to get the source, just click the download button on the page. Again, this is the code for Improving your Programming by Reading the Flex Source Code.

This does not include the class browser. That is an AIR project that I will publish separately.

Github is a source repository system like Google code or Sourceforge, but using git - a distributed source control solution. I recommend git, if you haven't used it, for any side projects or open source projects that you work on. Git allows anyone to branch/fork a project and make any changes they see fit. Then the changes can be merged back in if they are useful. Github supports forking of open source projects so people can, for example, make changes to a project available without needing approval of the original maintainers.

The nice folks at 360|Flex (with sponsorship from Adobe) recorded our presentations in San Jose Aug 18-20th 2008. I'm planning to transcribe the talk and perhaps post some better screencasts for the middle part of the talk. I had many specific examples prepared that floundered somewhat on stage. Also, a friendly attendee suggested that posting about Eclipse/Flex Builder 3 shortcuts would be good, so I'll do that. There are so many things that I planned but didn't include!

The best part of the talk is the first 8 minutes, at 0:45, and 1:01 where I show the Star Wars of Flex development. I also showed a few utilities that I've developed: a class browser, a stack inspection tool (to find method callers), and a performance profiler. I'll be getting these together and posting the source within the next 2 weeks.

I am speaking at 360|Flex San Jose in August and you should come! 360|Flex is a great conference that really supports the Flex community. It's a great place to meet other developers (and even some designers), to learn, and to have a great time. I'll be talking about the Flex SDK source code and how to improve your development by reading it (and understanding it).

I'll be discussing the class hierarchy, the internal compositional classes, and the importance of interfaces. I will tear apart some components and offer suggestions on using them and better ways to design similar components. I will touch on the Flex component lifecycle, skinning, inheritance, custom components, list classes, and containers.

Lastly, I will discuss the Flex SDK API, how it is written today, how it will be evolving in Flex 4/Gumbo and what else Adobe needs to change! I will explain ways to use more DRY (don't repeat yourself) development practices using better componentization and compositional classes.

I plan to post some more teasers on my blog (http://jonathanbranam.net) so people who don't know who I am or what I'm talking about can get a better sense of the session and why they should (or shouldn't) come.

Problem:

You have some custom initialization that you need to perform every time a component is added using a State, such as setting focus in a particular field. You need a reliable method of determining that the component has been added.

Solution:

There are two solutions that I've found to work in this case. This first is to add a new public method to the component called activate() and then call it from a handler on the enterState Event. The second is to listen to the addedToStage and updateComplete events, set a flag in addedToStage that you check in updateComplete to run your initialization.

Here is the code, example app, and more detailed explanation.

Skinning in Flex 3.

UIComponent is the core class in Flex 3 for all of the interactive classes. Its class hierarchy is UIComponent < FlexSprite < Sprite < DisplayObjectContainer < InteractiveObject < DisplayObject. A UIComponent can render graphics using the drawing API (from Sprite), have other DisplayObjects as children (from DisplayObjectContainer) and supports mouse and keyboard interaction (from InteractiveObject). But the real work in UIComponent is in basic Flex functionality it implements.

UIComponent defines the core interaction of the Flex 3 component model such as styles, tooltips, validators, states, repeaters, invalidation, measuring, layout, and rendering. The Flash classes such as Sprite do not follow these standards and are not constrained and supported by the Flex component model. This is an important consideration when choosing a base class for custom components.

Anatomy of the Flex 3 Framework.

Understanding the Flex 3 class hierarchy is the first step to grasping the Flex source code. Much of the Flex code is shared in key parent classes and it is important to understand this structure before delving into the details of a particular class in the framework.

The Flex SDK is a large body of code that Adobe has released under an open source license. Reading the Flex source code is one of the best habits to develop as a Flex developer. The code provides insight into what Adobe engineers were thinking during development and how they expect their components to be used. The code is also intended as a blueprint for implementing your own components.