Upon conducting the necessary research for my current chapter in Flex 4 in Action that I am working on, I felt it would be worthwhile to post a blog to help clarify some confusion that may be surrounding the Flex 3 versus Flex 4 components. Contrary to my previous post, I’m not speaking from an architectural standpoint, but a simple “what is and what isn’t” checklist to hopefully help save you some time as you learn the Flex 4 SDK.

Where do Spark Components come from?

A Flex 4 Spark component is simply an extension of the Flex 3 (Halo)UIComponent base class. Additional classes are stacked on top of UIComponent primarily to separate the presentation layer from the business layer. This is primarily accomplished with the Group and SkinnableComponent classes in the Spark library. These classes are hooks into the extended functionality of the Flex 4 Spark library, while still keeping that of the Flex 3 Halo libarary. You may be asking yourself at this point – how does one get the best of both worlds then?

The Group and SkinnableComponent classes both extend the UIComponent base classs. If you are familiar with Flex 3, then I certainly hope you are familiar with the UIComponent class. If not, I suggest reading up on it before going any further with any Flex development.

As you might expect, most of the viewable components in the Spark library extend either the Group or SkinnableComponent class. The only difference between the two is that Group is used to improve performance and minimize application size because it does not include the added weight of skinning. Therefore, if you are building a component that does not require skinning, then use Group as your base class. If you want your component to be skinnable via a separate Skin class, extend one of the base classes that are derived from SkinnableComponent.

Example Scenarios

For example, if you are building a composite container component to hold a series of unrelated display objects, extend the SkinnableContainer class. This gives you the ability to attach a separate Skin class to the container, which could be straight FXG exported from Flash Catalyst that a designer may have given you for the component.

Another example might be if you are building a custom component that will hold data in the form of item renderers. In this case, you should extend the SkinnableDataContainer class, or even the Spark ListBase class. However, a component like the Flex 4 VideoPlayer is built directly from the SkinnableComponent class instead of SkinnableContainer. Which class you should use is ultimately a judgement call based on how lightweight you need the component to be.

Of course, the more you get to know the code inside the Spark library classes, the easier it will be to figure out which class you should extend when building custom Flex 4 components.

Possibly Related Posts:

• Flash Camp Phoenix a Huge Success
• Understanding the Flex 4 Spark Component Architecture and how to Build Custom Components with the Flex 4 SDK
• Peter deHaan on using Spark controls in Flex Gumbo
• Understanding Flex Communication Protocols
• Life Cycle of the Flex UIComponent Base Class

---

Posted by Dan Orlando on June 28th, 2009 :: Filed under Tutorials
You can leave a response, or trackback from your own site.

---