Flex Component Basics – Part 1: Coding an Analog Clock

Anatomy of a Component

This section describes how to build a component using the analog clock as a guide. Follow along by opening the AnalogClock_Basic.as file from the sample ZIP file (see the Requirements section).

The structure of the file uses the following pattern:

import mx.core.UIComponents;

[Style(…)]

[Event(…)]

class AnalogClock extends UIComponent

{

	// data members (for example, properties)

	function AnalogClock_Basic() 
	{
	}

	function init() 
	{
	}

function createChildren() : Void 
	{
	}

	function measure() : Void 
	{
	}

	function layoutChildren() : Void 
	{
	}

	function draw() : Void 
	{
	}
}

Here is a description of the code:

1. The import statement imports all of the extra code definitions that the component requires. If you were to use other components within your component, such as the Label component, you would include an import statement for it, too.
2. This section declares the styles and events that the component requires. You will learn how to add styles later in this article; in part two of this article series, you will learn how to add events.
3. The class declaration names the component (AnalogClock_Basic) and names the class the component extends (the UIComponent). The choice of the base class is important. To make your component fit easily within the Flex component framework, choose UIComponent as the base class for new components.
4. Components have at least a few data members. These can be values used internally to store calculations, or they can be properties that a you can change and that determine how the component looks or behaves.
5. Leave the class constructor empty.
6. In the init() method, set your component’s initial properties. If your component contains scalar values, set them in their declarations. Create objects (such as Array) here.
7. When it is time to create any subcomponents, call the createChildren() method. If, for example, your component has a Label, create the label here. In the AnalogClock_Basic component, create several empty SWF files. At this time, however, the subcomponents exist, but they do not yet have any size.
8. If the Flex framework needs to know how big the component will be, it calls the measure() method. If you specify a specific width and height for the component, the Flex framework does not call this method.
9. To specify the size and position of your subcomponents, call the layoutChildren() method.
10. To visualize the component, call the draw() method to draw the graphics, set fonts, change colors, and so forth.

Page 2 of 4

Previous Page

Next Page