Introducing Flex In A Week - Day 1: Flex Components and Controls

From ADOBE TV | Flex Channel

In this episode of the Flex in a Week training series, you will learn about the UI components available in the Spark and MX libraries and the architectural difference between them.

Spark components

Spark components are new for Flex 4 and are defined in the spark.* packages. Components available in previous releases of Flex, referred to as MX components, are defined in the mx.* packages.

The main differences between Spark and MX components are how you use CSS styles with the components and how you skin them. For details on using visual components in an application, see Visual components.

Spark and MX containers

Flex defines two sets of containers: Spark containers and MX containers. Spark containers are defined in the spark.components package while MX containers are defined in the mx.core and mx.containers packages. Spark containers specify layout differently from MX containers.

While you can use MX containers to perform most of the same layout that you can perform using the Spark containers, Adobe recommends that you use the Spark containers when possible.

For details on using containers to layout an application, see Introduction to containers.

Spark containers

Applications in Flex typically consist of an MXML application file (a file with an <s:Application> container as the parent tag, and one or more components defined in separate MXML files, ActionScript files, or Flash component files (SWC files). You can insert containers and controls directly in the MXML application file, or you can insert them in separate MXML files to create custom components and then insert the custom components in the application file.

The following example shows a simple structure for an application. The containers and controls are inserted directly into the MXML application file.

Styling Flex 4 Components with Flash Builder 4 Video