Join David Gassner for an in-depth discussion in this video Understanding the new Spark component framework, part of Flash Builder 4 and Flex 4 New Features.
- View Offline
One of the most important new features of the Flex 4 SDK is a new set of controls and containers, collectively known as the Spark Component Set. Spark Components are used in Flex applications along with a set of older controls and containers that are now referred to as the MX Components. In this chapter, I am going to show you some of the most critical new features of the Spark Component Set. For all the demonstrations in this chapter, I'll use a project that's included with the Exercise files.
I'll select File > Import Flex Project and then from the Exercise files folder, I'll go down to 04_Spark and choose Spark.fxp, and I'll Finish the import. Then I'll open the Spark project, open its source folder and default package and open the default application, AppLayout.mxml. As I described earlier, the Application tag in a new Flex 4 application is an instance of the Spark application component.
I'm going to show you a little bit about the inheritance hierarchy of the Spark Component Set by going into the API Help. I'll place the cursor in the word Application and then press Shift+F2, and that will open the Adobe Community Help application and take me directly to the API Help for the application component. The application component, along with all the other Spark-based components, are members of the Package called spark.components. I'll click that package and show you the complete list.
You'll see many components that have names that repeat names that were used in Flex 3, such as Application, Button, ButtonBar, CheckBox and ComboBox, but you'll also see new components with names you haven't seen before, such as BorderContainer and DataGroup. There are four basic kinds of containers in the Spark Component Set. The first type of container I'd like to talk about is something called a SkinnableContainer. The SkinnableContainer class is a base class.
There are many new components in the Flex SDK that are subclasses of this base. The Application component is one of them, the BorderContainer, the NavigatorContent Container, which is used inside of view stacks and other navigation containers, the new panel container and the Window container that's used in Adobe AIR applications. With the exception of the BorderContainer, all of these other subclasses are designed to be skinnable; that is, you can create your own custom skin as an mxml component, then bind the skin to the container either of during compilation or at run time.
The BorderContainer is a special instance. It's designed to support visual presentation without creating your own custom skin, using just a set of CSS styles. Going back to the spark.components package, there's another group of containers that's important to know about that are all based on a class called Group. The Group container is a nonskinnable container. It doesn't accept much in the way of cascading style sheets, and it doesn't have the ability to be bound to a custom skin. Instead, the Group class is designed for pure layout.
You have the Group class, the VGroup, for vertical layout, and the HGroup, for horizontal layout. You'll see that there are many other classes that are subclassed from this one, such as the TileGroup and the DataRenderer. Then finally, there are the DataContainers. There is base class called SkinnableDataContainer and then a whole number of classes that are based on the list of style interfaces, such as the List, the DropDownList, and the ComboBox. So, those are the containers that are available in Flex 4.
Finally, there are a whole set of controls. Some of the classic controls you might have used in Flex 3 are re-implemented now, such as the Button, the TextInput and the TextAreaControl. Some other controls that you might have gotten used to in Flex 3, such as the Text control, have been replaced with new versions. I'll talk in some detail about the different text controls that are included in the Flex 4 SDK, but it's worth mentioning now that there are five: the Label control - which has word wrapping, unlike the older MX version, the RichText control, RichEditable text and then ComboControls that include instances of these more low-level controls.
For example, the TextInput control integrates an instance of the RichEditable text control, as does the new TextArea control. So, learning how to use the building blocks of a Flex 4 application, in large part, is all about learning how to use the new Spark Component Set, how to create custom skins and bind them to your spark containers and controls and how to choose between the MX and the Spark versions of controls where there's a choice.
- Understanding MXML namespaces
- Moving classes and components between packages
- Managing templates for new MXML and ActionScript files
- Exploring MXML language changes
- Working with the Spark component framework
- Adding visual controls with CSS, MXML graphics, and custom Spark skins
- Displaying images and dynamic data