User Guide

170 Creating Advanced Visual Components in ActionScript

The following application uses this component:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:MyComp="myComponents.*" >

<MyComp:BottomUpVBox>

<mx:Label text="Label 1"/>

<mx:Button label="Button 1"/>

<mx:Label text="Label 2"/>

<mx:Button label="Button 2"/>

<mx:Label text="Label 3"/>

<mx:Button label="Button 3"/>

<mx:Label text="Label 4"/>

<mx:Button label="Button 4"/>

</MyComp:BottomUpVBox>

</mx:Application>

Drawing graphics in your component

Every Flex component is a subclass of the Flash Sprite class, and, therefore, inherits the

Sprite.graphics property. The Sprite.graphics property specifies a Graphics object that

you can use to add vector drawings to your component.

For example, in the

updateDisplayList() method, you can use methods of the Graphics

class to draw borders, rules, and other graphical elements:

override protected function updateDisplayList(unscaledWidth:Number,

unscaledHeight:Number):void {

super.updateDisplayList(unscaledWidth, unscaledHeight);

// Draw a simple border around the child components.

graphics.lineStyle(1, 0x000000, 1.0);

graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

}

Making components accessible

A growing requirement for web content is that it should be accessible to people who have

disabilities. Visually impaired people can use the visual content in Flash applications by using

screen reader software, which provides an audio description of the material on the screen.