In Flex, there are several controls that represent a list of items. You can scroll through the list of items and select one or more from the list. They are all derived from the ListBase class, and the following controls are included: List, TileList, Menu, Tree, DataGrid, and HorizontalList.

A list control uses a data provider for its data, which is a collection of objects. The data provider creates a layer of abstraction between the Flex list controls and the data that populates them. You can think of the data provider as the model and the Flex list control as the view onto the data.

Every list control has a default view to display the data, and Flex lets you override this mechanism. To do this, you must create an item renderer. The simplest item renderer is the DataGridItemRenderer, which is the default item renderer for the DataGrid control. It contains the functionality to display text.

The following example is a List control using the default item renderer to display a list of three different fruits:

Apples
Oranges
Pears

If you wanted to display more than just text for each item in the list control, you must create your own custom item renderer. Custom item renderers and item editors provide you with the following benefits:

Replace the display of text with a richer appearance.

Combine multiple elements in a single list item such as an image and a label.

Allow you to control the display of the item programmatically

In Flex you can write programmatic skins as ActionScript classes that use the Drawing API of the Flash Player. The methods for drawing at run-time are in the flash.display.Graphics package.

The best way to learn how to create programmatic skins is to look at the ones that come with Flex and then either extend them or create your own. The programmatic skin recipe is a basic template that you can use to implement a skin for a component.

The following code example is a programmatic skin class. You can use this class as a template to create new skins.

package
{
import flash.display.Graphics;
import mx.skins.Border;
import mx.skins.ProgrammaticSkin;
import mx.styles.StyleManager;

public class MyCustomSkin extends ProgrammaticSkin
{
// Constructor.
public function MyCustomSkin()
{
// Set default values here.
}

override protected function updateDisplayList(w:Number, h:Number):void
{
// Add styleable properties here.
// Add logic to detect component’s state and set properties here.
// Add drawing methods here.
}
}
}

Programmatic skins define the appearance of a skin in multiple states of a control, such as the upSkin, downSkin, and overSkin of a Button control. These states refer to the default state, when the button is pressed, and when the mouse is over the button but has not been pressed.

Choosing a Superclass
The first step in creating a programmatic skin is to select a superclass for the skin. You can extend the abstract base classes in the mx.skins package or the mx.skins.halo package, but the former gives you more control over the look and feel of your skins. The latter is fine if you use the default behavior of the Flex controls but want to add extra styling.

Most skins extend the mx.skins.ProgrammaticSkin class, but any of the following classes can be used:

The ProgrammaticSkin class implements all the necessary interfaces to make it easier for you to define skins for your components. It is also the most common superclass to use.

The Border class extends the ProgrammaticSkin class and adds a property called borderMetrics that allows you to get the thickness of the border.

The RectangularBorder class extends the Border class and adds a style property called backgroundImage so that you can set the background image of the component.

Note that a programmatic skin must implement the IFlexDisplayObject, IInvalidating, and ILayoutManagerClient interfaces. It must also implement the ISimpleStyleClient interface if it depends on the values of CSS styles.

The superclass of a skin can be a subclass of the DisplayObject class as long as you implement all of those interfaces.

The updateDisplayList() method is used to define the look of your skin. It is called after the skin’s constructor is called and then every time the skin is resized, restyled, moved, or interacted with in some way.

In the updateDisplayList() method, you use the drawing methods to draw the programmatic skin. When implementing the updateDisplayList() method, remember to use the override keyword to override the superclass’s implementation, set the return type to void, and declare the method as protected. The method also takes the width and height of the component as arguments.

The following code example draws a square with a border:

override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void

graphics.clear();
graphics.lineStyle(2, 0×000000, 1.0, true, LineScaleMode.NORMAL,
CapsStyle.SQUARE, JointStyle.MITER);
graphics.beginFill(0xFFFFFF, 0);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}

The following example applies a programmatic skin to a specific state of the control:

Button
{
upSkin:ClassReference(’MyCustomSkin’);
}

Note that if you subclass the RectangularBorder class, you must also call the super.updateDisplayList() inside of your implementation of the updateDisplayList().

Image files embedded into your application that represent a state of a component are called graphical skins. Each image may be a different state of a component, such as the downSkin of a Button control.

The following example shows the upSkin, overSkin, and downSkin style properties defined as new graphical skins. These style properties point to the different images for each state of the control. Figure 7-4 shows the graphical skins used in the following code example:

Button
{
upSkin: Embed(”/skins/upSkin.png”);
overSkin: Embed(”/skins/overSkin.png”);
downSkin: Embed(”/skins/downSkin.png”);
}

Skins are actually a class, and when you are changing the reference from a current skin to a new one, it is just a new class. Flex wraps each embedded asset as a class within the current document’s class.

Note that if you change any graphical skins, you must recompile the application because they are embedded into the SWF file. You can define skin properties either using CSS, inline, or by using the setStyle() method of the control you are skinning.

The one downside to using graphical skins or images is that resizing the component will create distortion. You can use a technique called Scale-9 to create skins that do not become distorted. The technique lets you define nine sections of an image that scale independently.