Chapter 3: Working with Components.49 The Components panel. 50 Adding components to Flash documents. 50 Components in the Library panel. 54 Setting component parameters. 55 Sizing components. 56 Deleting components from Flash documents. 57 Using code hints. 58 Creating custom focus navigation. 58 Managing component depth in a document. 59 Components in Live Preview. 60 Using a preloader with components. 60 About loading components. 62 Upgrading version 1 components to version 2 architecture. 62 Chapter 4: Handling Component Events.63 Using listeners to handle events. 64 Delegating events. 73 About the event object. 77 Using the on() event handler. 78 Chapter 5: Customizing Components. 81 Using styles to customize component color and text. 82 About skinning components. 96 About themes. 108 Combining skinning and styles to customize a component. 118 Chapter 6: Creating Components. 125 Component source files. 125 Overview of component structure. 126 Building your first component. 127 Selecting a parent class. 136 Creating a component movie clip. 138 Creating the ActionScript class file. 143 Incorporating existing components within your component. 173 Exporting and distributing a component. 182 Final steps in component development. 185
Chapter 7: Collection Properties. 187 Defining a collection property. 188 Simple collection example.189 Defining the class for a collection item. 191 Accessing collection information programmatically. 191 Exporting components that have collections to SWC files.194 Using a component that has a collection property.194 Index. 197

Introduction

Macromedia Flash Basic 8 and Macromedia Flash Professional 8 are the standard authoring tools for producing high-impact web experiences. Components are the building blocks for the Rich Internet Applications that provide these experiences. A component is a movie clip with parameters that are set during authoring in Macromedia Flash, and with ActionScript methods, properties, and events that allow you to customize the component at runtime. Components are designed to allow developers to reuse and share code, and to encapsulate complex functionality that designers can use and customize without using ActionScript. Components are built on version 2 of the Macromedia Component Architecture, which allows you to easily and quickly build robust applications with a consistent appearance and behavior. This book describes how to build applications with version 2 components. The related Components Language Reference describes each components application programming interface (API). It includes usage scenarios and procedural samples for using the Flash version 2 components, as well as descriptions of the component APIs, in alphabetical order. You can use components created by Macromedia, download components created by other developers, or create your own components. This chapter contains the following sections:

on page 108.)

Manager classes
provide an easy way to handle focus and depth in a application. (See Creating custom focus navigation on page 58 and Managing component depth in a document on page 59.)
The base classes UIObject and UIComponent provide core methods, properties, and events
to components that extend them. (See UIComponent class and UIObject class in the Components Language Reference.)

Packaging as a SWC file

allows easy distribution and concealable code. See Chapter 6, Creating Components, on page 125.
Built-in data binding is available through the Component inspector. For more information, see Data Integration (Flash Professional Only) in Using Flash.
using ActionScript 2.0 allows you to create unique namespaces, import classes as needed, and subclass easily to extend components. See Chapter 6, Creating Components, on page 125 and the ActionScript 2.0 Language Reference.
Flash 8 has several features that are not supported by the v2 components, including 9slice (sometimes referred to as scale-9), FlashType, and bitmap caching.
An easily extendable class hierarchy
About compiled clips and SWC files
A compiled clip is a package of precompiled Flash symbols and ActionScript code. Its used to avoid recompiling symbols and code that will not be changed. A movie clip can also be compiled in Flash and converted to a compiled clip. For example, a movie clip with a lot of ActionScript code that doesnt change often could be converted to a compiled clip. The compiled clip behaves just like the movie clip from which it was compiled, but compiled clips appear and publish much faster than regular movie clips. Compiled clips cant be edited, but they do have properties that appear in the Property inspector and the Component inspector. Components included with Flash are not FLA filesthey are compiled clips (that have been packaged into compiled clip (SWC) files. SWC is the Macromedia file format for distributing components; it contains a compiled clip, the components ActionScript class file, and other files that describe the component. For details about SWC files, see Exporting and distributing a component on page 182.

You can also use the Component inspector (Window > Component Inspector) to set parameters for components. The Parameters tab in the Property inspector and the Component inspector work in the same way.
The URL specifies an external XML file with data about the products that appear in the Gift Ideas section of the application. Later in the tutorial you will use data binding to bind the XMLConnector, DataSet, and DataGrid components together; the DataSet component filters data from the external XML file, and the DataGrid component will display it.
Drag an instance of the Button component from the User Interface tree in the Components panel onto the Stage. Place it in the lower-right corner of the Stage. Enter checkout_button for the instance name. Click the Parameters tab and enter Checkout for the label property. For the x and y coordinates, enter 560.3 and 386.0, respectively.
Import the component classes
Each component is associated with an ActionScript class file that defines its methods and properties. In this section of the tutorial, you will add ActionScript code to import the classes associated with the applications components. For some of these components, you have already added instances to the Stage. For others, you will add ActionScript later in the tutorial to create instances dynamically. The import statement creates a reference to the class name and makes it easier to write ActionScript for the component. The import statement enables you to refer to the class by its class name rather than its complete name, which includes the package name. For example, after you create a reference to the ComboBox class file with an import statement, you can refer to instances of the combo box with the syntax instanceName:ComboBox, rather than instanceName:mx.controls.ComboBox. A package is a directory that contains class files and resides in a designated classpath directory. You can use a wild card character to create references to all the classes in a package: for example, the syntax mx.controls.* creates references to all classes in the controls package. (When you create a reference to a package with a wild card, the unused classes are dropped from the application when it is compiled, so they dont add any extra size.) For the application in this tutorial, you need the following packages and individual classes:
UI Components Controls package
This package contains classes for the user interface control components, including ComboBox, DataGrid, Loader, TextInput, Label, NumericStepper, Button, and CheckBox.
UI Components Containers package This package contains classes for the user interface container components, including Accordion, ScrollPane, and Window. As with the controls package, you can create a reference to this package by using a wild card. DataGridColumn class
This class lets you add columns to the DataGrid instance and

/* Create a listener for the checkout_button Button instance. This listener sends all the form variables to the server when the user clicks the Checkout button. */ var checkoutListener:Object = new Object(); checkoutListener.click = function(evt:Object){ evt.target.enabled = false; /* Create two LoadVars object instances, which send variables to and receive results from the remote server. */ var response_lv:LoadVars = new LoadVars(); var checkout_lv:LoadVars = new LoadVars(); checkout_lv.billingFirstName = thisChild1.billingFirstName_ti.text; checkout_lv.billingLastName = thisChild1.billingLastName_ti.text; checkout_lv.billingCountry = thisChild1.billingCountry_ti.text; checkout_lv.billingProvince = thisChild1.billingProvince_ti.text; checkout_lv.billingCity = thisChild1.billingCity_ti.text; checkout_lv.billingPostal = thisChild1.billingPostal_ti.text; checkout_lv.shippingFirstName = thisChild2.shippingFirstName_ti.text; checkout_lv.shippingLastName = thisChild2.shippingLastName_ti.text; checkout_lv.shippingCountry = thisChild2.shippingCountry_ti.text; checkout_lv.shippingProvince = thisChild2.shippingProvince_ti.text; checkout_lv.shippingCity = thisChild2.shippingCity_ti.text; checkout_lv.shippingPostal = thisChild2.shippingPostal_ti.text; checkout_lv.ccName = thisChild3.ccName_ti.text; checkout_lv.ccType = thisChild3.ccType_cb.selectedItem; checkout_lv.ccNumber = thisChild3.ccNumber_ti.text;
checkout_lv.ccMonth = thisChild3.ccMonth_cb.selectedItem; checkout_lv.ccYear = thisChild3.ccYear_cb.selectedItem; /* Send the variables from the checkout_lv LoadVars to the remote script on the server. Save the results in the response_lv instance. */ checkout_lv.sendAndLoad("http://www.flash-mx.com/mm/firstapp/ cart.cfm", response_lv, "POST"); response_lv.onLoad = function(success:Boolean) { evt.target.enabled = true; }; }; thisChild3.checkout_button.addEventListener("click", checkoutListener); cart_mc._visible = false; var backListener:Object = new Object(); backListener.click = function(evt:Object) { evt.target._parent.gotoAndStop("home"); } back_button.addEventListener("click", backListener);

Test the application

Congratulations! Youve finished building the application. Now press Control+S to save your work and then Control+Enter (or select Control >Test Movie) to test the application.
Viewing the completed application

The version 2 component architecture has a broadcaster/listener event model. (A broadcaster is sometimes also referred to as a dispatcher.) It is important to understand the following key points about the model:
All events are broadcast by an instance of a component class. (The component instance is the broadcaster.) A listener can be a function or an object. If the listener is an object, it must have a callback function defined on it. The listener handles the event; this means the callback function is executed when the event occurs. To register a listener to a broadcaster, call the addEventListener() method from the broadcaster. Use the following syntax:
componentInstance.addEventListener("eventName", listenerObjectORFunction);
You can register multiple listeners to one component instance.
myButton.addEventListener("click", listener1); myButton.addEventListener("click", listener2);
You can register one listener to multiple component instances.
myButton.addEventListener("click", listener1); myButton2.addEventListener("click", listener1);
The handler function is passed an event object. You can use the event object in the body of the function to retrieve information about the event type, and the instance that broadcast the event. See About the event object on page 77.
A listener object remains active until explicitly removed using EventDispatcher.removeEventListener(). For example:
myComponent.removeEventListener(change, ListenerObj);

Using listener objects

To use a listener object, you can either use the this keyword to specify the current object as the listener, use an object that already exists in your application, or create a new object.
Use this in most situations. Its often easiest to use the current object (this) as a listener, because its scope contains the components that need to react when the event is broadcast.
Use an existing object if it is convenient. For example, in a Flash Form Application, you may want to use a form as a listener object if that form contains the components that react to the event. Place the code on a frame of the forms timeline.
Use a new listener object if many components are broadcasting an event (for example, the click event) and you want only certain listener objects to respond.
If you use the this object, define a function with the same name as the event you want to handle; the syntax is as follows:
function eventName(evtObj:Object){ // your code here };
If you want to use a new listener object, you must create the object, define a property with the same name as the events, and assign the property to a callback function that executes when the event is broadcast, as follows:
var listenerObject:Object = new Object(); listenerObject.eventName = function(evtObj:Object){ // your code here };

Some styles are set on a component classs CSSStyleDeclaration instance (for example, the backgroundColor style of the TextArea and TextInput components). Because the class style declaration takes precedence over the global style declaration when style values are determined, setting backgroundColor on the global style declaration would have no effect on the TextArea and TextInput components. For more information about style precedence, see Using global, custom, and class styles in the same document on page 92. For more information about editing a component classs CSSStyleDeclaration, see Setting styles for a component class on page 89.

C A UT I O N 86

To change one or more properties in the global style declaration:
Make sure the document contains at least one component instance. For more information, see Adding components to Flash documents on page 50. Select a frame in the Timeline on which (or before which) the components appear. In the Actions panel, use code like the following to change properties on the global style declaration. You need to list only the properties whose values you want to change, as shown here:
_global.style.setStyle("color", 0xCC6699); _global.style.setStyle("themeColor", "haloBlue") _global.style.setStyle("fontSize",16); _global.style.setStyle("fontFamily" , "_serif");
Select Control > Test Movie to see the changes.
Setting custom styles for groups of components
You can create custom style declarations to specify a unique set of properties for groups of components in your Flash document. In addition to the _global objects style property (discussed in Setting global styles on page 86), which determines the default style declaration for an entire Flash document, the _global object also has a styles property, which is a list of available custom style declarations. So, you can create a style declaration as a new instance of the CSSStyleDeclaration object, assign it a custom style name, and place it in the _global.styles list. Then, you specify the properties and values for the style, and assign the style name to component instances that should share the same look. Keep in mind that when you assign the style name to a component instance, the component responds only to style properties that component supports. For a list of the style properties each component supports, see the individual component entries in the Components Language Reference. To make changes to a custom style format, use the following syntax:
_global.styles.CustomStyleName.setStyle(propertyName, propertyValue);
Custom style settings have priority over class, inherited, and global style settings. For a list of style precedence, see Using global, custom, and class styles in the same document on page 92.
To create a custom style declaration for a group of components:

// The size() method is invoked when the component's size // changes. This is an opportunity to resize the children, // and the dial and needle graphics. // The size() method is required for components extending UIComponent. function size():Void { super.size(); dial._width = width; dial._height = height; // Cause the needle to be redrawn, if necessary. invalidate(); } // This is the getter/setter for the value property. // The [Inspectable] metadata makes the property appear // in the Property inspector. This is a getter/setter // so that you can call invalidate and force the component // to redraw, when the value is changed. [Bindable] [ChangeEvent("change")] [Inspectable(defaultValue=0)] function set value (val:Number) { __value = val; invalidate(); } function get value ():Number { return twoDigits(__value); } function twoDigits(x:Number):Number { return (Math.round(x * 100) / 100); }
// Tells the component to expect mouse presses function onPress() { beginDrag(); } // When the dial is pressed, the dragging flag is set. // The mouse events are assigned callback functions. function beginDrag() { dragging = true; onMouseMove = mouseMoveHandler; onMouseUp = mouseUpHandler;
} // Remove the mouse events when the drag is complete // and clear the flag. function mouseUpHandler() { dragging = false; delete onMouseMove; delete onMouseUp; } function mouseMoveHandler() { // Calculate the angle if (dragging) { var x:Number = _xmouse - width/2; var y:Number = _ymouse - height/2; var oldValue:Number = value; var newValue:Number = 90+180/Math.PI*Math.atan2(y, x); if (newValue<0) { newValue += 360; } if (oldValue != newValue) { value = newValue; dispatchEvent( {type:"change"} ); } } } }
Testing and exporting the Dial component
Youve created the Flash file that contains the graphical elements, the base classes and the class file that contains all the functionality of the Dial component. Now its time to test the component. Ideally, you would test the component as you work, especially while youre writing the class file. The fastest way to test as you work is to convert the component to a compiled clip and use it in the components FLA file. When youve completely finished a component, export it as a SWC file. For more information, see Exporting and distributing a component on page 182.

The ChangeEvent tag tells data binding that the component will generate an event any time the value of a specific property changes. In response to the event, data binding executes any binding that has that property as a source. The component only generates the event if you write appropriate ActionScript code in the component. The event should be included in the list of Event metadata declared by the class. You can declare a property by using var or getter/setter methods. If a property has both a getter and a setter method, you only need to apply the ChangeEvent tag to one. The ChangeEvent tag has the following syntax:
[Bindable] [ChangeEvent("event")] property_declaration or getter/setter function
In the following example, the component generates the change event when the value of the bindable property flavorStr changes:
[Bindable] [ChangeEvent("change")] public var flavorStr:String;
When the event that is specified in the metadata occurs, Flash notifies bindings that the property has changed. You can register multiple events in the tag, as the following example shows:
[ChangeEvent("change1", "change2", "change3")]
Any one of those events indicates a change to the property. They do not all have to occur to indicate a change.

About the Collection tag

Use the Collection tag to describe an array of objects that can be modified as a collection of items in the Values dialog box while authoring. The type of the objects is identified by the collectionItem attribute. A collection property contains a series of collection items that you define in a separate class. This class is either mx.utils.CollectionImpl or a subclass of it. The individual objects are accessed through the methods of the class identified by the collectionClass attribute.
A collection property in the Component inspector and the Values dialog box that appears when you click the magnifying glass. The syntax for the Collection tag is as follows:
[Collection (name=name, variable="varname", collectionClass="mx.utils.CollectionImpl", collectionItem="coll-item-classname", identifier="string")] public var varname:mx.utils.Collection;
The following table describes the attributes of the Collection tag:

String String

(Required) Name that appears in the Component inspector for the collection. (Required) ActionScript variable that points to the underlying Collection object (for example, you might name a Collection parameter Columns, but the underlying variable attribute might be __columns). (Required) Specifies the class type to be instantiated for the collection property. This is usually mx.utils.CollectionImpl, but it can also be a class that extends mx.utils.CollectionImpl. (Required) Specifies the class of the collection items to be stored within the collection. This class includes its own inspectable properties that are exposed through metadata. (Required) Specifies the name of an inspectable property within the collection item class that Flash MX uses as the default identifier when the user adds a new collection item through the Values dialog box. Each time a user creates a new collection item, Flash MX sets the item name to identifier plus a unique index (for example, if identifier=name, the Values dialog box displays name0, name1, name2, and so on).

All version 2 components should define an init() function that is called after the constructor has been called. You should place the initialization code in the components init() function. For more information, see the next section.
If your component extends MovieClip, you may want to call an init() method, a method, and a method that lays out your component from the constructor function, as shown in the following code example:
class MyComponent extends MovieClip{. function MyComponent(){ init() } function init():Void{ createChildren(); layout(); }. }
For more information about constructors, see Writing the constructor function in Learning ActionScript 2.0 in Flash.
Defining the draw() method
You can write code in the draw() method to create or modify visual elements of a component. In other words, in the draw() method, a component draws itself to match its state variables. Since the last draw() method was called, multiple properties or methods may have been called, and you should try to account for all of them in the body of draw(). However, you should not call the draw() method directly. Instead, call the invalidate() method so that calls to draw() can be queued and handled in a batch. This approach increases efficiency and centralizes code. (For more information, see About invalidation on page 166.) Inside the draw() method, you can use calls to the Flash drawing API to draw borders, rules, and other graphical elements. You can also set property values and call methods. You can also call the clear() method, which removes the visible objects. In the following example from the Dial component (see Building your first component on page 127), the draw() method sets the rotation of the needle to the value property:
function draw():Void { super.draw(); dial.needle._rotation = value; }
Defining the size() method
When a component is resized at runtime using the componentInstance.setSize() method, the size() function is invoked and passed width and height properties. You can use the size() method in the components class file to lay out the contents of the component. At a minimum, the size() method should call the superclasss size() method (super.size()). In the following example from the Dial component (see Building your first component on page 127), the size() method uses the width and height parameters to resize the dial movie clip:
function size():Void { super.size(); dial._width = width; dial._height = height; invalidate(); }
Call the invalidate() method inside the size() method to tag the component for redraw instead of calling the draw() method directly. For more information, see the next section.

var falseUpIcon = "mySkin";
The following example shows the skin variables for the various states of the CheckBox component:
var var var var var var var var var var var var var var var var falseUpSkin:String = ""; falseDownSkin:String = ""; falseOverSkin:String = "" falseDisabledSkin:String = ""; trueUpSkin:String = ""; trueDownSkin:String = ""; trueOverSkin:String = ""; trueDisabledSkin:String = ""; falseUpIcon:String = "CheckFalseUp"; falseDownIcon:String = "CheckFalseDown"; falseOverIcon:String = "CheckFalseOver"; falseDisabledIcon:String = "CheckFalseDisabled"; trueUpIcon:String = "CheckTrueUp"; trueDownIcon:String = "CheckTrueDown"; trueOverIcon:String = "CheckTrueOver"; trueDisabledIcon:String = "CheckTrueDisabled";

About styles

You can use styles to register all the graphics in your component with a class and let that class control the color scheme of the graphics at runtime. No special code is necessary in the component implementations to support styles. Styles are implemented entirely in the base classes (UIObject and UIComponent) and skins. To add a new style to a component, call getStyle("styleName") in the component class. If the style has been set on an instance, on a custom style sheet, or on the global style sheet, the value is retrieved. If not, you may need to install a default value for the style on the global style sheet. For more information about styles, see Using styles to customize component color and text on page 82.
Registering skins to styles
The following example creates a component called Shape. This component displays a shape that is one of two skins: a circle or a square. The skins are registered to the themeColor style.
To register a skin to a style:
Create a new ActionScript file and copy the following code into it:
import mx.core.UIComponent; class Shape extends UIComponent{ static var symbolName:String = "Shape"; static var symbolOwner:Object = Shape; var className:String = "Shape"; var themeShape:String = "circle_skin" function Shape(){ } function init(Void):Void{ super.init(); } function createChildren():Void{ setSkin(1, themeShape); super.createChildren(); } }
Save the file as Shape.as. Create a new Flash document and save it as Shape.fla in the same folder as Shape.as Draw a circle on the Stage, select it, and press F8 to convert it to a movie clip. Give the circle the name and linkage identifier circle_skin. Open the circle_skin movie clip and place the following ActionScript on Frame 1 to register the symbol with the style name themeColor:

Register the new style name to the circle and square skins on Frame 1 of each skin movie clip, as follows:
mx.skins.ColoredSkinElement.setColorStyle(this, "shapeColor");
The color can be changed with the new style name by setting the style on the instance, as shown here:
shape.setStyle("shapeColor",0x00ff00);
Incorporating existing components within your component
In this section, you will build a simple LogIn component that incorporates Label, TextInput and Button components. This tutorial demonstrates how existing components are incorporated in new components by adding their uncompiled Flash (FLA) library symbols. The completed component files, LogIn.fla, LogIn.as and LogIn.swf are located in the examples folder on your hard disk:
In Windows: the C:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Components\Login folder. On the Macintosh: HD/Applications/Macromedia Flash 8/Samples and Tutorials/ Samples/Components/Login folder.
The LogIn component provides an interface for entering a name and password. The API for LogIn has two properties, name and password for setting and getting the string values in the name and password TextInput fields. The LogIn component also dispatches a click event when the user clicks a button labeled LogIn.
Creating the LogIn Flash (FLA) file on page 173 The LogIn class file on page 176 Testing and exporting the LogIn component on page 180
Creating the LogIn Flash (FLA) file
Start by creating a Flash (FLA) file that will hold our component symbol.
To create the LogIn FLA file:
In Flash, select File > New and create a new document. Select File > Save As and save the file as LogIn.fla. Create Select Insert > New Symbol. Name it LogIn, and select the Movie clip type radio button. If the Linkage section of the Create New Symbol dialog isnt open, click the Advanced button to reveal it.
Select Export for ActionScript and deselect Export in First Frame. Enter a linkage identifier. The default linkage identifier is LogIn. The rest of these steps assume you use the default value.
Enter LogIn in the AS 2.0 Class text box. This value is the component class name. If you put the class in a package, enter the entire package name. For example, mx.controls.CheckBox denotes the CheckBox class in the mx.controls package.

Create a FLA file for your component. See Creating a component movie clip on page 138. Create an ActionScript class. See Creating the ActionScript class file on page 143. In the ActionScript class, insert a Collection metadata tag. For more information, see About the Collection tag on page 157. Define get and set methods for the collection in the components ActionScript file.
Add the utilities classes to your FLA file by selecting Window > Common Libraries > Classes and dragging UtilsClasses into the components library. UtilsClasses contains the mx.utils.* package for the Collection interface.
Because UtilsClasses is associated with the FLA file, not the ActionScript class, Flash throws compiler errors when you check syntax while viewing the components ActionScript class.
Code a class that contains the collection item properties. See Defining the class for a collection item on page 191.
Simple collection example
The following is a simple example of a component class file called MyShelf.as. This example contains a collection property along with a minimal set of imports, methods, and declarations for a component that inherits from the UIObject class. If you import mx.utils.* in this example, the class names from mx.utils no longer need to be fully qualified. For instance, mx.utils.Collection can be written as Collection.
import mx.utils.*; // standard class declaration class MyShelf extends mx.core.UIObject { // required variables for all classes static var symbolName:String = "MyShelf"; static var symbolOwner:Object = Object(MyShelf); var className:String = "MyShelf"; // the Collection metadata tag and attributes [Collection(variable="myCompactDiscs",name="My Compact Discs",collectionClass="mx.utils.CollectionImpl", collectionItem="CompactDisc", identifier="Title")] // get and set methods for the collection public function get MyCompactDiscs():mx.utils.Collection { return myCompactDiscs; } public function set MyCompactDiscs(myCDs:mx.utils.Collection):Void { myCompactDiscs = myCDs; } // private class member private var myCompactDiscs:mx.utils.Collection;
// You must code a reference to the collection item class // to force the compiler to include it as a dependency // within the SWC private var collItem:CompactDisc; // You must code a reference to the mx.utils.CollectionImpl class // to force the compiler to include it as a dependency // within the SWC private var coll:mx.utils.CollectionImpl; // required methods for all classes function init(Void):Void { super.init(); } function size(Void):Void { super.size(); } }

To create a FLA file to accompany this class for testing purposes:
In Flash, select File > New and create a Flash document. Select Insert > New Symbol. Give it the name, linkage identifier, and AS 2.0 class name MyShelf. Deselect Export in First Frame and click OK. Select the MyShelf symbol in the library and choose Component Definition from the Library options menu. Enter the ActionScript 2.0 class name MyShelf. Select Window > Common Libraries > Classes, and drag UtilClasses to the library of MyShelf.fla. In the MyShelf symbols Timeline, name one layer Assets. Create another layer and name it Actions. Place a stop() function on Frame 1 in the Actions layer. Select Frame 2 in the Assets layer and select Insert > Timeline > Keyframe. Open StandardComponents.fla from the Configuration/ComponentFLA folder, and drag an instance of UIObject to the Stage of MyShelf in Frame 2 of the Assets layer. You must include UIObject in the components FLA file because, as you can see in the above class file, MyShelf extends UIObject.

10. In

Frame 1 of the Assets layer, draw a shelf.
This can be a simple rectangle; its just a visual representation of the MyShelf component to use for learning purposes.
Select the MyShelf movie clip in the library, and select Convert to Compiled Clip.
This allows you to drag the MyShelf SWF file (the compiled clip thats added to the library) into the MyShelf.fla file to test the component. Whenever you recompile the component, a Resolve Library Conflict dialog box appears, because an older version of the component already exists in the library. Choose to replace existing items.
You should have already created the CompactDisc class; otherwise, youll get compiler errors when converting to a compiled clip.
Defining the class for a collection item
You code the properties for a collection item in a separate ActionScript class, which you define as follows: Define the class such that it does not extend UIObject or UIComponent. Define all properties using the Inspectable tag. Define all properties as variables. Do not use get and set (getter/setter) methods.
The following is a simple example of a collection item class file called CompactDisc.as.
class CompactDisc{ [Inspectable(type="String", defaultValue="Title")] var title:String; [Inspectable(type="String", defaultValue="Artist")] var artist:String; }
To view the CompactDisc.as class file, see Simple collection example on page 189.
Accessing collection information programmatically
Flash provides programmatic access to collection data through the Collection and Iterator interfaces. The Collection interface lets you add, modify, and remove items in a collection. The Iterator interface allows you to loop through the items in a collection. There are two scenarios in which to use the Collection and Iterator interfaces: Accessing collection information in a component class (AS) file on page 192 Accessing collection items at runtime in a Flash application on page 193

Intended audience

This book is for developers who are building Flash MX 2004 or Flash MX Professional 2004 applications and want to use components to speed development. You should already be familiar with developing applications in Macromedia Flash, writing ActionScript, and Macromedia Flash Player. This book assumes that you already have Flash MX 2004 or Flash MX Professional 2004 installed and know how to use it. Before using components, you should complete the lesson Create a user interface with components (select Help > How Do I > Quick Tasks > Create a user interface with components). If you want to write as little ActionScript as possible, you can drag components into a document, set their parameters in the Property inspector or in the Components Inspector panel, and attach an on() handler directly to a component in the Actions panel to handle component events. If you are a programmer who wants to create more robust applications, you can create components dynamically, use their APIs to set properties and call methods at runtime, and use the listener event model to handle events. For more information, see Chapter 2, Working with Components, on page 15.

System requirements

Macromedia components do not have any system requirements in addition to Flash MX 2004 or Flash MX Professional 2004.

Installing components

A set of Macromedia components is already installed when you launch Flash MX 2004 or Flash MX Professional 2004 for the first time. You can view them in the Components panel. Flash MX 2004 includes the following components:

Button component CheckBox component ComboBox component Label component List component Loader component NumericStepper component PopUpManager ProgressBar component RadioButton component ScrollPane component TextArea component TextInput component Window component
Flash MX Professional 2004 includes the Flash MX 2004 components and the following additional components and classes:
Accordion component Alert component DataBinding package DateField component DataGrid component DataHolder component DataSet component DateChooser component Form class MediaController component MediaDisplay component MediaPlayback component Menu component RDBMSResolver component Screen class
Introduction: Getting Started with Components
Tree component WebServiceConnector component XMLConnector component XUpdateResolver component
To verify installation of the Flash MX 2004 or Flash MX Professional 2004 components:
1 Start Flash. 2 Select Window > Development Panels > Components to open the Components panel if it isnt

already open.

3 Select UI Components to expand the tree and view the installed components.
You can also download components from the Macromedia Exchange. To install components downloaded from the Exchange, download and install the Macromedia Extension Manager. Any component, whether its a SWC file or a FLA file (see About compiled clips and SWC files on page 14), can appear in the Components panel in Flash. Follow these steps to install components on either a Windows or Macintosh computer.

Chapter 1: About Components
V2 components are written in ActionScript 2. Each component is a class and each class is in an ActionScript package. For example, a radio button component is an instance of the RadioButton class whose package name is mx.controls. For more information about packages, see Using packages in ActionScript Reference Guide Help.
All components built with version 2 of the Macromedia Component Architecture are subclasses of the UIObject and UIComponent classes and inherit all properties, methods, and events from those classes. Many components are also subclasses of other components. The inheritance path of each component is indicated in its entry in Chapter 4, Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 Components, on page 45.
All components also use the same event model, CSS-based styles, and built-in skinning mechanism. For more information on styles and skinning, see Chapter 3, Customizing Components, on page 27. For more information on event handling, see Chapter 2, Working with Components, on page 15.
Whats new in v2 components
Component Inspector panel allows you to change component parameters while authoring in both Macromedia Flash and Macromedia Dreamweaver. (See Components in the Component Inspector panel and Property inspector on page 16.) Listener event model Skin properties allow
allows listener objects of functions to handle events. (See About component events on page 21.) you to load states only when needed. (See About skinning components

on page 37.)

CSS-based styles allow you to create a consistent look and feel across applications. (See Using styles to customize component color and text on page 28.) Themes
allow you to drag a new look onto a set of components. (See About themes on page 35.) provides a ready-made, responsive, and flexible user interface for applications.

Halo theme

Manager classes provide an easy way to handle focus and depth in a application. (See Creating custom focus navigation on page 24 and Managing component depth in a document on page 25.) Base classes UIObject and UIComponent provide Packaging as a SWC file
core functionality to all components. (See UIComponent on page 240 and UIObject on page 250.) allows easy distribution and concealable code. See Creating Components. You may need to download the latest PDF from the Flash Support Center to see this information.
Built-in data binding is available through the Component Inspector panel. For more information
about this feature, press the Help Update button.
Easily extendable class hierarchy using ActionScript 2 allows you to create unique namespaces, import classes as needed, and subclass easily to extend components. See Creating Components and the ActionScript Reference Guide. You may need to download the latest PDF from the Flash Support Center to see this information.

To skin a subcomponent, do the following:
example, edit the ScrollDownArrowDown skin and give it the new name MyScrollDownArrowDown. Select File > New and create a Flash document. Select File > Save and give the file a unique name, such as MyComboTest.fla. Drag MyScrollDownArrowDown from the theme library above to the Stage of MyComboTest.fla and delete it. This adds the symbol to the library, but doesnt make it visible on the Stage. Select Insert > New Symbol and give it a unique name, such as MyComboBox. Select the Export for ActionScript checkbox and click OK. Export in First Frame is automatically selected. Enter the following code in the Actions panel on Frame 1 actions of MyComboBox:
#initclip 10 import MyComboBox Object.registerClass("ComboBox", MyComboBox); #endinitclip
8 Drag a ComboBox component to the Stage. 9 In the Property inspector, enter as many Label parameters as it takes for the vertical scroll bar
to appear. 10 Select File > Save. 11 Select File > New and create a new ActionScript file (Flash Professional only). 12 Enter the following code:
import mx.controls.ComboBox import mx.controls.scrollClasses.ScrollBar class MyComboBox extends ComboBox{ function getDropdown():Object{ var oldName = ScrollBar.prototype.downArrowDownName; ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown"; var r = super.getDropdown(); ScrollBar.prototype.downArrowDownName = oldName; return r; } }
13 Select File > Save and save this file as MyComboBox.as. 14 Click a blank area on the Stage and, in the Property inspector, select the Publish
Settings button. 15 Select the ActionScript version Settings button. 16 Click the Plus button to add a new classpath, and select the Target button to browse to the location of the MyComboBox.as file on your hard drive. 17 Select Control > Test Movie.
CHAPTER 4 Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 Components
This reference chapter describes each component and each components application programming interface (API). Each component description contains information about the following:
Keyboard interaction Live preview Accessibility Setting the component parameters Using the component in an application Customizing the component with styles and skins ActionScript methods, properties, and events
Components are presented alphabetically. You can also find components arranged by category in the following tables:
User interface (UI) controls
Component Description Accordion component A set of vertical overlapping views with buttons along the top that allow users to switch views. Alert component Button component A window that presents the user with a question and buttons to capture their response. A resizable button that can be customized with a custom icon.
CheckBox component Allows users to make a Boolean (true or false) choice. ComboBox component DateChooser component Allows users to select one option from a scrolling list of choices. This component can have an editable text field at the top of the list that allows users to search the list. Allows users to choose a date or dates from a calendar.

Event; broadcast to all registered listeners when the mouse is clicked (released) over the check box or if the check box has focus and the Spacebar is pressed. The first usage example uses an on() handler and must be attached directly to a CheckBox component instance. The keyword this, used inside an on() handler attached to a component, refers to the component instance. For example, the following code, attached to the check box myCheckBox, sends _level0.myCheckBox to the Output panel:
The second usage example uses a dispatcher/listener event model. A component instance (checkBoxInstance) dispatches an event (in this case, click) and the event is handled by a listener object (listenerObject) that you create. You define a method with the same name as the event on the listener object; the method is called when the event is triggered. When the event is triggered, it automatically passes an event object (eventObject) to the listener object method. The event object has a set of properties that contains information about the event. You can use these properties to write code that handles the event. Finally, you call the addEventListener() method (see UIEventDispatcher.addEventListener()) on the component instance that broadcasts the event to register the listener with the instance. When the instance dispatches the event, the listener is called. For more information about event objects, see Event Objects on page 249.
This example, written on a frame of the Timeline, sends a message to the Output panel when a button called checkBoxInstance is clicked. The first line of code creates a listener object called form. The second line defines a function for the click event on the listener object. Inside the function is a trace action that uses the event object that is automatically passed to the function (in this example, eventObj) to generate a message. The target property of an event object is the component that generated the event (in this example, checkBoxInstance). The CheckBox.selected property is accessed from the event objects target property. The last line calls the addEventListener() method from checkBoxInstance and passes it the click event and the form listener object as parameters, as in the following:
form = new Object(); form.click = function(eventObj){ trace("The selected property has changed to " + eventObj.target.selected); } checkBoxInstance.addEventListener("click", form);
The following code also sends a message to the Output panel when checkBoxInstance is clicked. The on() handler must be attached directly to checkBoxInstance, as in the following:
on(click){ trace("check box component was clicked"); } See also UIEventDispatcher.addEventListener()

CheckBox.label

Usage checkBoxInstance.label Description
Property; indicates the text label for the check box. By default, the label appears to the right of the check box. Setting this property overrides the label parameter specified in the clip parameters panel.

color disabledColor fontFamily fontSize fontStyle fontWeight textDecoration openDuration

openEasing

Using skins with the ComboBox component The ComboBox component uses symbols in the Library panel to represent the button states. The ComboBox has skin variables for the down arrow. Other than that, it uses scroll bar and list skins. To skin the ComboBox component while authoring, modify symbols in the Library panel and reexport the component as a SWC. The CheckBox component skins are located in the Flash UI Components 2/Themes/MMDefault/ComboBox Assets/states folder in the library of either the HaloTheme.fla file or the SampleTheme.fla file. For more information, see About skinning components on page 37.
A ComboBox component uses the following skin properties:

Property Description

ComboDownArrowDisabledName The down arrows disabled state. Default is RectBorder. ComboDownArrowDownName ComboDownArrowUpName ComboDownArrowOverName
The down arrows down state. Default is RectBorder. The down arrows up state. Default is RectBorder. The down arrows over state. Default is RectBorder.

ComboBox class

UIObject > UIComponent > ComboBase > ComboBox mx.controls.ComboBox
The ComboBox component combines three separate subcomponents: Button, TextInput, and List. Most of the APIs of each subcomponent are available directly from ComboBox component and are listed in the Method, Property, and Event tables for the ComboBox class. The drop-down list in a combo box is provided either as an Array or as a DataProvider object. If you use a DataProvider object, the list changes at runtime. The source of the ComboBox data can be changed dynamically by switching to a new Array or DataProvider object. Items in a combo box list are indexed by position, starting with the number 0. An item can be one of the following:
A primitive data type. An object that contains a label property and a data property.
Note: An object may use the ComboBox.labelFunction or ComboBox.labelField property to determine the label property.
If the item is a primitive data type other than string, it is converted to a string. If an item is an object, the label property must be a string and the data property can be any ActionScript value. ComboBox component methods to which you supply items have two parameters, label and data, that refer to the properties above. Methods that return an item return it as an Object. Each component class has a version property which is a class property. Class properties are only available on the class itself. The version property returns a string that indicates the version of the component. To access the version property, use the following code:

mx.accessibility.LabelAccImpl.enableAccessibility();
You only enable accessibility for a component once no matter how many instances you have of the component. For more information, see Creating Accessible Content in Using Flash Help. You may need to update your Help system to see this information. Using the label component Use a Label component to create a text label for another component in a form, such as a Name: label to the left of a TextInput field that accepts a user's name. If youre building an application using components based on version 2 (v2) of the Macromedia Component Architecture, its a good idea to use a Label component instead of a plain text field because you can use styles to maintain a consistent look and feel.
Label parameters The following are authoring parameters that you can set for each Label component instance in the Property inspector or in the Component Inspector panel:
indicates the text of the label; the default value is Label.
html indicates whether the label is formatted with HTML (true) or not (false). If the html parameter is set to true, a Label cannot be formatted with styles. The default value is false. autoSize indicates how the label sizes and aligns to fit the text. The default value is none. The parameter can be any of the following four values:
nonethe label doesnt resize or align to fit the text. leftthe right and bottom sides of the label resize to fit the text. The left and top sides

dont resize.

centerthe bottom side of the label resizes to fit the text. The horizontal center of the label
stays anchored at the its original horizontal center position. rightthe left and bottom sides of the label resize to fit the text. The top and right side dont resize.
Note: The Label component autoSize property is different from the built-in ActionScript TextField objects autoSize property.
You can write ActionScript to set additional options for Label instances using its methods, properties, and events. For more information, see Label class. Creating an application with the Label component The following procedure explains how to add a Label component to an application while authoring. In this example, the label is beside a combo box with dates in a shopping cart application.

Any instance that implements the DataProvider interface can be a data provider for a List component. This includes Flash Remoting RecordSets, Firefly DataSets, and so on.
This example uses an array of strings to populate the list:
list.dataProvider = ["Ground Shipping","2nd Day Air","Next Day Air"];

List.getItemAt()

Usage listInstance.getItemAt(index) Parameters index Returns
A number greater than or equal to 0, and less than List.length. The index of the item to retrieve.
The indexed item object. Undefined if index is out of range.
The following code displays the label of the item at index position 4:
trace(myList.getItemAt(4).label);

List.hPosition

Usage listInstance.hPosition
Property; scrolls the list horizontally to the number of pixels specified. You cant set hPosition unless the value of hScrollPolicy is "on" and the list has a maxHPosition that is greater than 0.
The following example gets the horizontal scroll position of myList:
var scrollPos = myList.hPosition;
The following example sets the horizontal scroll position all the way to the left:

myList.hPosition = 0;

List.hScrollPolicy
Usage listInstance.hScrollPolicy Description
Property; a string that determines whether or not the horizontal scroll bar is displayed; the value can be "on" or "off". The default value is "off". The horizontal scroll bar does not measure text, you must set a maximum horizontal scroll position, see List.maxHPosition.
Note: The value "auto" is not supported for List.hScrollPolicy. Example
The following code enables the list to scroll horizontally up to 200 pixels:
myList.hScrollPolicy = "on"; myList.Box.maxHPosition = 200; See also List.hPosition, List.maxHPosition

List.iconField

Usage listInstance.iconField
Property; specifies the name of a field to be used as an icon identifier. If the field has a value of undefined, the default icon specified by the defaultIcon style is used. If the defaultIcon style is undefined, no icon is used.
The following example sets the iconField property to the icon property of each item:
list.iconField = "icon" See also List.iconFunction

List.iconFunction

Usage listInstance.iconFunction Description
Property; specifies a function to be used to determine which icon each row will use to display its item. This function receives a parameter, item, which is the item being rendered, and must return a string representing the icons symbol identifier.

Using the Loader component You can use a loader whenever you need to grab content from a remote location and pull it into a Flash application. For example, you could use a loader to add a company logo (JPEG file) to a form. You could also use a loader to leverage Flash work that has already been completed. For example, if you had already built a Flash application and wanted to expand it, you could use the loader to pull the old application into a new application, perhaps as a section of a tab interface. In another example, you could use the loader component in an application that displays photos. Use Loader.load(), Loader.percentLoaded, and Loader.complete to control the timing of the image loads and display progress bars to the user during loading. Loader component parameters The following are authoring parameters that you can set for each Loader component instance in the Property inspector or in the Component Inspector panel:
autoload indicates whether the content should load automatically (true), or wait to load until the Loader.load() method is called (false). The default value is true. content an absolute or relative URL indicating the file to load into the loader. A relative path must be relative to the SWF loading the content. The URL must be in the same subdomain as the URL where the Flash content currently resides. For use in the stand-alone Flash Player or for testing in test-movie mode, all SWF files must be stored in the same folder, and the filenames cannot include folder or disk drive specifications. The default value is undefined until the load had started. scaleContent indicates whether the content scales to fit the Loader (true), or the Loader scales to fit the content (false). The default value is true.
You can write ActionScript to set additional options for Loader instances using its methods, properties, and events. For more information, see Loader class. Creating an application with the Loader component The following procedure explains how to add a Loader component to an application while authoring. In this example, the loader loads a logo JPEG from an imaginary URL.
To create an application with the Loader component, do the following:
1 Drag a Loader component from the Components panel to the Stage. 2 Select the loader on the Stage and use the Free Transform tool to size it to the dimensions of

Description The background of a component. This is the only color style that doesnt inherit its value. Possible values are "haloGreen", "haloBlue", and "haloOrange". The text of a component label. The disabled color for text. The font name for text. The point size for the font. The font style; either normal or italic. The font weight; either normal or bold. The text decoration; either none or underline.
Using skins with the ProgressBar component The ProgressBar component uses the following movie clip symbols to display its states: TrackMiddle, TrackLeftCap, TrackRightCap and BarMiddle, BarLeftCap, BarRightCap and IndBar. The IndBar symbol is used for an indeterminate progress bar. To skin the ProgressBar component while authoring, modify symbols in the library and re-export the component as a SWC. The symbols are located in the Flash UI Components 2/Themes/MMDefault/ProgressBar Elements folder in the library of the HaloTheme.fla file or the SampleTheme.fla file. For more information, see About skinning components on page 37. If you use the UIObject.createClassObject() method to create a ProgressBar component instance dynamically (at runtime), you can also skin it dynamically. To skin a component at runtime, set the skin properties of the initObject parameter that is passed to the createClassObject() method. The skin properties set the names of the symbols to use as the states of the progress bar.
A ProgressBar component uses the following skin properties:

progTrackMiddleName

Description The expandable middle of the track. The default value is ProgTrackMiddle. The fixed-size left cap. The default value is ProgTrackLeft. The fixed-size right cap. The default value is ProgTrackRight. The expandable middle bar graphic. The default value is ProgBarMiddle. The fixed-size left bar cap. The default value is ProgBarLeft. The fixed-size right bar cap. The default value is ProgBarRight. The indeterminate bar graphic. The default value is ProgIndBar.
progTrackLeftName progTrackRightName progBarMiddleName
progBarLeftName progBarRightName progIndBarName

ProgressBar class

UIObject > ProgressBar mx.controls.ProgressBar
Setting a property of the ProgressBar class with ActionScript overrides the parameter of the same name set in the Property inspector or Component Inspector panel. Each component class has a version property which is a class property. Class properties are only available on the class itself. The version property returns a string that indicates the version of the component. To access the version property, use the following code:

This example creates a form listener object with a complete callback function that sends a message to the Output panel with the value of the pBar instance, as in the following:
form.complete = function(eventObj){ // eventObj.target is the component which generated the change event, // i.e., the Progress Bar. trace("Value changed to " + eventObj.target.value); } pBar.addEventListener("complete", form);
See also UIEventDispatcher.addEventListener()
Usage pBarInstance.conversion Description
Property; a number that sets a conversion value for the incoming values. It divides the current and total values, floors them, and displays the converted value in the label property. The default value is 1.
The following code displays the value of the loading progress in kilobytes:

pBar.conversion = 1024;

ProgressBar.direction
Usage pBarInstance.direction Description
Property; indicates the fill direction for the progress bar. The default value is "right".
The following code sets makes the progress bar fill from right to left:
pBar.direction = "left";
ProgressBar.indeterminate
Usage pBarInstance.indeterminate Description
Property; a Boolean value that indicates whether the progress bar has a candy-cane striped fill and a loading source of unknown size (true), or a solid fill and a loading source of a known size (false).
The following code creates a determinate progress bar with a solid fill that moves from left to right:
pBar.direction = "right"; pBar.indeterminate = false;

ProgressBar.label

Usage pBarInstance.label Description
Property; text that indicates the loading progress. This property is a string in the format "%1 out of %2 loaded (%3%%)"; %1 is a placeholder for the current bytes loaded, %2 is a placeholder for the total bytes loaded, and %3 is a placeholder for the percent of content loaded. The characters %% are a placeholder for the % character. If a value for %2 is unknown, it is replaced by ??. If a value is undefined, the label doesnt display. The default value is "LOADING %3%%"
The following code sets the text that appears beside the progress bar to the format "4 files loaded":
pBar.label = "%1 files loaded"; See also ProgressBar.labelPlacement
ProgressBar.labelPlacement
Usage pBarInstance.labelPlacement
Property; sets the placement of the label in relation to the progress bar. The possible values are "left", "right", "top", "bottom", and "center".

100*(value-minimum)/(maximum-minimum) Example
The following code sends the value of the percentComplete property to the Output panel:
trace("percent complete = " + pBar.percentComplete);

ProgressBar.progress

listenerObject = new Object(); listenerObject.progress = function(eventObject){. } pBarInstance.addEventListener("progress", listenerObject) Event Object
In addition to the standard event object properties, there are two additional properties defined for the ProgressBar.progress event: current (the loaded value equals total), and total (the total value).
Event; broadcast to all registered listeners whenever the value of a progress bar changes. This event is only broadcast when ProgressBar.mode is set to "manual" or "polled". The first usage example uses an on() handler and must be attached directly to a ProgressBar component instance. The keyword this, used inside an on() handler attached to a component, refers to the component instance. For example, the following code, attached to the instance myPBar, sends _level0.myPBar to the Output panel:
The second usage example uses a dispatcher/listener event model. A component instance (pBarInstance) dispatches an event (in this case, progress) and the event is handled by a listener object (listenerObject) that you create. You define a method with the same name as the event on the listener object; the method is called when the event is triggered. When the event is triggered, it automatically passes an event object (eventObject) to the listener object method. Each event object has a set of properties that contains information about the event. You can use these properties to write code that handles the event. Finally, you call the UIEventDispatcher.addEventListener() method on the component instance that broadcasts the event to register the listener with the instance. When the instance dispatches the event, the listener is called. For more information about event objects, see Event Objects on page 249.
This example creates a listener object, form, and defines a progress event handler on it. The form listener is registered to the pBar instance in the last line of code. When the progress event is triggered, pBar broadcasts the event to the form listener which calls the progress callback function, as follows:
var form:Object = new Object(); form.progress = function(eventObj){ // eventObj.target is the component which generated the change event, // i.e., the Progress Bar. trace("Value changed to " + eventObj.target.value); } pBar.addEventListener("progress", form); See also UIEventDispatcher.addEventListener()
Usage pBarInstance.setProgress(completed, total)

In the following example, the first line of code limits the text field to uppercase letters, numbers, and spaces. The second line of code allows all characters except lowercase letters.
my_txt.restrict = "A-Z 0-9"; // limit control to uppercase letters, numbers, and spaces my_txt.restrict = "^a-z"; // allow all characters, except lowercase letters

TextArea.text

Usage textAreaInstance.text Description
Property; the text contents of a TextArea component. The default value is "" (empty string).
The following code places a string in the myTextArea instance then traces that string to the Output panel:
myTextArea.text = "The Royal Nonesuch"; trace(myTextArea.text); // traces "The Royal Nonesuch"

TextArea.vPosition

Usage textAreaInstance.vPosition Description
Property; defines the vertical position of text in a text field. The scroll property is useful for directing users to a specific paragraph in a long passage, or creating scrolling text fields. You can get and set this property. The default value is 0.
The following code makes the topmost characters in a field display:
myTextArea.vPosition = 0;

TextArea.vScrollPolicy

Usage textAreaInstance.vScrollPolicy Description
Property; determines whether the vertical scroll bar is always present ("on"), never present ("off"), or appears automatically according to the size of the field ("auto"). The default value is "auto".
The following code turns vertical scroll bars off all the time:
text.vScrollPolicy = "off";
Usage textAreaInstance.wordWrap Description
Property; a Boolean value that indicates whether the text wraps (true) or not (false). The default value is true.

TextInput component

The TextInput is a single-line component that wraps the native ActionScript TextField object. You can use styles to customize the TextInput component; when an instance is disabled its contents display in a color represented by the disabledColor style. A TextInput component can also be formatted with HTML, or as a password field that disguises the text. A TextInput component can be enabled or disabled in an application. In the disabled state, it doesnt receive mouse or keyboard input. When enabled, it follows the same focus, selection, and navigation rules as an ActionScript TextField object. When a TextInput instance has focus, you can also use the following keys to control it:

Event summary for the UIObject class
UIObject.draw UIObject.load UIObject.move UIObject.resize UIObject.unload
Description Broadcast when an object is about to draw its graphics. Broadcast when subobjects are being created. Broadcast when the object has moved. Broadcast when the subobjects are being unloaded. Broadcast when the subobjects are being unloaded.
Usage componentInstance.bottom
Property (read-only); a number indicating the bottom position of the object in pixels relative to its parents bottom.
Sets the value of tmp to the bottom position of the check box:
var tmp = checkbox.bottom;

UIObject.createObject()

Usage componentInstance.createObject(linkageName, instanceName, depth, initObject) Parameters linkageName instanceName depth
A string indicating the linkage identifier of a symbol in the Library panel. A string indicating the instance name of the new instance. An object containing initialization properties for the new instance.
A number indicating the depth of the new instance.

initObject Returns

A UIObject that is an instance of the symbol.
Method; creates a subobject on an object. Generally only used by component or advanced developers.
The following example creates a CheckBox instance on the form object:
form.createObject("CheckBox", "sym1", 0);
UIObject.createClassObject()
Usage componentInstance.createClassObject(className, instanceName, depth, initObject)

Parameters className

An object indicating the class of the new instance. A string indicating the instance name of the new instance. An object containing initialization properties for the new instance.

instanceName depth

A UIObject that is an instance of the specified class.
Method; creates a subobject of an object. Generally only used by component or advanced developers. This method allows you to create components at runtime. You need to specify the class package name. Do one of the following:
import mx.controls.Button; createClassObject(Button,"button2",5,{label:"Test Button"});
createClassObject(mx.controls.Button,"button2",5,{label:"Test Button"}); Example
The following example creates a CheckBox object:
form.createClassObject(CheckBox, "cb", 0, {label:"Check this"});

UIObject.destroyObject()

Usage componentInstance.destroyObject(instanceName) Parameters instanceName Returns
A string indicating the instance name of the object to be destroyed.
Method; destroys a component instance.

UIObject.draw

Usage on(draw){. } listenerObject = new Object(); listenerObject.draw = function(eventObject){. } componentInstance.addEventListener("draw", listenerObject) Description