Adobe Flex Development Components

There are two definite set of development components in Adobe Flex. They are Spark and MX. While the Spark components are newly inclusions of Adobe Flex 4 and its resources are defined in the spark.* packages, the MX components are shipped in previous releases of Adobe Flex and are defined in the mx.* packages. The Spark and MX components mainly differ in terms of how CSS styles with the components are used and how it is skinned. For the container components, there are additional differences about how the containers perform layout.

Spark and MX

Spark and MX define some of the same components. For example, Spark defines a button control in the 'spark.components' The package and MX defines a button control in the 'mx.controls' package. When a component is available in both Spark and MX, Adobe recommends that you use the Spark component.

Spark and MX also define components that are unique. For example, Spark defines components to perform three-dimensional effects. MX defines data visualization components, such as the DataGrid and AdvancedDataGrid controls, not included in Spark. Your applications often contain a mixture of Spark and MX components.

Adobe Flex supplies the Spark ComboBox control that you can use as part of a form that collects address information from a customer. In the form, you can include a ComboBox control to let the user select the state portion of the address from a list of the 50 states in the U.S. In an application that has multiple forms where a user can enter an address, it would be tedious to create and initialize multiple ComboBox controls with the same information about all 50 states.

Instead, you create an MXML component that contains a ComboBox control with all the 50 states defined within in it. Then, wherever you need to add a state selector to your application, you use your custom MXML component. The following example shows a possible definition for a custom ComboBox control:

<?xml version="1.0"?>

<!-- createcomps_intro\StateComboBox.mxml -->

<!-- Specify the root tag and namespace. -->

<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/Adobe Flex/spark"

xmlns:mx="library://ns.adobe.com/Adobe Flex/mx">

<s:dataProvider>

<s:ArrayList>

<fx:String>AK</fx:String>

<fx:String>AL</fx:String>

<!-- Add all other states. -->

</s:ArrayList>

</s:dataProvider>

</s:ComboBox>