Creating and Extending Flex 2 Components ® ™ Adobe Flex 2
© 2006 Adobe Systems Incorporated. All rights reserved. Creating and Extending Flex™ 2 Components If this guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license.
Contents Chapter 1: About Flex Documentation . . . . . . . . . . . . . . . . . . . . . . . 7 PART 1: CREATING CUSTOM FLEX COMPONENTS Chapter 2: Creating Flex Components . . . . . . . . . . . . . . . . . . . . . . 13 About creating components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Creating custom components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Where to go from here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 8: Creating Advanced MXML Components . . . . . . . . . . 91 About reusable MXML components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Adding custom properties and methods to a component . . . . . . . . . . 92 Working with events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 About interfaces. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 14: Creating Custom Validators . . . . . . . . . . . . . . . . . . . 217 Validating data by using custom validators. . . . . . . . . . . . . . . . . . . . . . . 217 Example: Creating a simple validator . . . . . . . . . . . . . . . . . . . . . . . . . . . .219 Example: Validating multiple fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Chapter 15: Creating Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 About creating a custom effect . . . . . . . . . . . . .
Contents
CHAPTER 1 1 About Flex Documentation Creating and Extending Flex 2 Components describes how to create components in MXML and ActionScript. This manual is intended for component developers who are developing new components for use in their Adobe® Flex™ application. Contents Using this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Accessing the Flex documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Accessing the Flex documentation The Flex documentation is designed to provide support for the complete spectrum of participants. Documentation set The Flex documentation set includes the following titles: Book Description Getting Started with Flex 2 Contains an overview of Flex features and application development procedures. Flex 2 Developer’s Guide Describes how to develop your dynamic web applications. Creating and Extending Flex 2 Components Describes how to create and extend Flex components.
Typographical conventions The following typographical conventions are used in this book: ■ Italic font indicates a value that should be replaced (for example, in a folder path). ■ Code font indicates code. ■ Code font italic indicates a parameter. ■ Boldface font indicates a verbatim entry.
About Flex Documentation
PART 1 Creating Custom Flex Components 1 This part contains an introduction to creating custom Adobe Flex components. The following topics are included: Chapter 2: Creating Flex Components . . . . . . . . . . . . . . . . . . . . . . . 13 Chapter 3: Using ActionScript to Create Components . . . . . . . . .25 Chapter 4: Creating Custom Events. . . . . . . . . . . . . . . . . . . . . . . . . .35 Chapter 5: Using Metadata Tags in Custom Components . . . . . .45 Chapter 6: Compiling Components . . . . . . . .
CHAPTER 2 2 Creating Flex Components Adobe Flex supports a component-based development model. You use the predefined components included with Flex to build your applications, and create components for your specific application requirements. You can create components using MXML or ActionScript. Defining your own custom components has several benefits. One advantage is that components let you divide your applications into modules that you can develop and maintain separately.
A common coding practice is to divide an application into functional units, or modules, where each module performs a discrete task. Dividing your application into modules provides you with many benefits, including the following: Different developers or development groups can develop and debug modules independently of each other. Ease of development Reusability You can reuse modules in different applications so that you do not have to duplicate your work.
This example shows the following relationships among the components: ■ You define a main MXML file that contains the tag. ■ In your main MXML file, you define an ActionScript block that uses the tag. Inside the ActionScript block, you write ActionScript code, or include external logic defined by an ActionScript file. Typically, you use this area to write small amounts of ActionScript code.
Customizing existing Flex components One reason for you to create a component is to customize an existing Flex component for your application requirements. This customization could be as simple as setting the label property of a Button control to Submit to create a custom button for all of your forms. You might also want to modify the behavior of a Flex component.
The following example shows two components based on the Flex Button component, one defined in ActionScript and the other in MXML: Button.as MyASButton.as package { public class MyASButton extends Button { // Override inherited methods // and properties. // Define new methods // and properties. // Define custom logic // in ActionScript. } MyMXMLButton.mxml // Override inherited methods // and properties. // Define new methods // and properties.
Some basic guidelines include the following: ■ MXML components and ActionScript components both define new ActionScript classes. ■ Almost anything that you can do in a custom ActionScript custom component, you can also do in a custom MXML component. However, for simple components, such as components that modify the behavior of an existing component or add a basic feature to an existing component, it is simpler and faster to create them in MXML.
Creating custom components You create custom components as either MXML or ActionScript files. This section contains an overview of both methods. Creating MXML components Flex supplies a ComboBox control that you can use as part of a form that collects address information from a customer. In the form, you can include a ComboBox control to let the user select the state portion of the address from a list of the 50 states in the U.S.
The main application, or any other MXML component file, references the StateComboBox component, as the following example shows: PAGE 22For example, you can define a custom button component based on the Flex Button class, as the following example shows: package myComponents { // intro/myComponents/MyButton.as import mx.controls.Button; public class MyButton extends Button { // Define the constructor. public function MyButton() { // Call the constructor in the superclass. super(); // Set the label property to "Submit". label="Submit"; } } } In this example, you write your MyButton class to the MyButton.as file.
Deploying components When you deploy your custom components as MXML or ActionScript files, you typically deploy them in the same directory structure as your application files, in a directory specified in the ActionScript classpath, or for Flex Data Services, in the WEB-INF/flex/user_classes directory. For security reasons, you might not deploy your custom components as source code files. Alternatively, you can deploy your components as SWC files or as part of a Runtime Shared Library (RSL).
Creating Flex Components
CHAPTER 3 3 Using ActionScript to Create Components You use ActionScript code to create ActionScript components for Adobe Flex, or to add logic to MXML components. ActionScript provides flow control and object manipulation features that are not available in MXML. This topic contains a summary of the general rules for using ActionScript code in custom components. This topic does not replace the information contained in the ActionScript reference documentation.
Your package statement must wrap the entire class definition. If you write your ActionScript class file to the same directory as your other application files, you can leave the package name blank. However, as a best practice, you should store your components in a subdirectory, where the package name reflects the directory location. In this example, your write your ActionScript class file to the directory myComponents, a subdirectory of your main application directory.
You then specify the namespace definition for the component, as the following example shows: ... Using the import statement You use the import statement to import any classes that your class requires.
Using the class statement You use the class statement to define your class name, and to specify its superclass, as the following example shows: package myComponents { // Import necessary classes import mx.core.Container; import mx.controls.Button; // Import all classes in the mx.events package import mx.events.*; // Class definition goes here. public class MyButton extends Button { // Define properties, constructor, and methods.
You call the super() method within your constructor to invoke the superclass’s constructor to initialize the inherited items from the superclass. The super() method should be the first statement in your constructor; otherwise, the inherited parts of the superclass might not be properly constructed. In some cases, you might want to initialize your class first, and then call super(). NO T E If you do not define a constructor, the compiler inserts one for you and adds a call to super().
Defining properties as variables Properties let you define data storage within your class. You can define your properties as public, which means that they can be accessed by users of the class. You can also define properties as private, which means that they are used internally by the class, as the following example shows: public class MyButton extends Button { // Define private vars. private var currentFontSize:Number; // Define public vars.
To define getter and setter methods, precede the method name with the keyword get or set, followed by a space and the property name. The following example shows the declaration of a public property named initialCount, and the getter and setter methods that get and set the value of this property: // Define internal private variable. private var _initialCount:uint = 42; // Define public getter. public function get initialCount():uint { return _initialCount; } // Define public setter.
Defining methods Methods define the operations that your class can perform. You define methods in the body of the class. Your methods can override a method of a superclass, or define new functionality for your components. If the method adds new functionality, you define it using the function keyword, as the following example shows: public function myMethod():void { // Method definition } If you define this method as a public method, users of the class can call it.
Flex creates an Array called rest for the optional arguments. Therefore, you can determine the number of arguments passed to the method by using rest.length, and access the arguments by using rest[i]. Using the super keyword in a method override You use the super keyword in a method override to invoke the corresponding method of the superclass. The super keyword has the following syntax: super.methodName([arg1, ...
About scope Scoping is mostly a description of what the this keyword refers to at any given point in your application. In the main MXML application file, the file that contains the tag, the current scope is the Application object and, therefore, the this keyword refers to the Application object. In an ActionScript component, the scope is the component itself and not the application or other file that references the component.
CHAPTER 4 4 Creating Custom Events You can create custom events as part of defining MXML and ActionScript components. Custom events let you add functionality to your custom components to respond to user interactions, to trigger actions by your custom component, and to take advantage of data binding. This topic presents an overview of how to dispatch custom events from your MXML and ActionScript components, and how to create Event classes by creating a subclass of the Event class.
Custom components that extend existing Flex classes inherit all the events of the base class. Therefore, if you extend the Button class to create the MyButton class, you can use the click event, and the events that all controls inherit, such as mouseOver or initialize, as the following example shows:
-
Using an event object When a Flex component dispatches an event, it creates an event object, where the properties of the event object contain information describing the event. An event listener takes this event object as an argument and accesses the properties of the object to determine information about the event. The base class for all event objects is the flash.events.Event class. All event objects are instances of the Event class, or instances of a subclass of the Event class.
-
Dispatching custom events Flex defines many of the most common events, such as the click event for the Button control, however, your application may require that you create events. In your custom Flex components, you can dispatch any of the predefined events inherited by the component from its superclass, and dispatch new events that you define within the component. To dispatch a new event from your custom component, you must do the following: 1. (Optional) Create a subclass from the flash.events.
-
Suppose that you want to pass information about the state of your component to the event listener as part of the event object. To do so, you create a subclass of the Event class to create an event, EnableChangeEvent, as the following example shows: package myEvents { //events/myEvents/EnableChangeEvent.as import flash.events.Event; public class EnableChangeEvent extends Event { // Public constructor.
-
Using the Event metadata tag You use the [Event] metadata tag to define events dispatched by a component so that the Flex compiler can recognize them as MXML tag attributes in an MXML file. You add the [Event] metadata tag in one of the following locations: Above the class definition, but within the package definition, so that the events are bound to the class and not a particular member of the class. ActionScript components MXML components In the tag of an MXML file.
-
Once defined using the [Event] metadata tag, you can refer to the event in an MXML file, as the following example shows: PAGE 42eventObj.isEnabled=true; dispatchEvent(eventObj); For complete examples that create and dispatch custom events, see Chapter 8, “Creating Advanced MXML Components,” on page 91 and Chapter 9, “Creating Simple Visual Components in ActionScript,” on page 121. Creating static constants for the Event.type property The constructor of an event class typically takes a single required argument that specifies the value of the event object’s type property.
You can use this technique when you define your event classes. The following example modifies the definition of the EnableChangeEventConst class to include a static constant for the type property: package myEvents { //events/myEvents/EnableChangeEventConst.as import flash.events.Event; public class EnableChangeEventConst extends Event { // Public constructor. public function EnableChangeEventConst(type:String, isEnabled:Boolean=false) { // Call the constructor of the superclass.
Now you create an instance of the class by using the static constant, as the following example shows for the MyButtonConst custom component: [Event(name="myEnable", type="myEvents.
CHAPTER 5 5 Using Metadata Tags in Custom Components You insert metadata tags into your MXML and ActionScript files to provide information to the Flex compiler. Metadata tags do not get compiled into executable code, but provide information to control how portions of your code get compiled. This topic describes the metadata tags that you use when creating components in MXML and ActionScript.
About metadata tags Metadata tags provide information to the Flex compiler that describe how your components are used in a Flex application. For example, you might create a component that defines a new event. To make that event known to the Flex compiler so that you can reference it in MXML, you insert the [Event] metadata tag into your component, as the following ActionScript class definition shows: [Event(name="enableChanged", type=flash.events.Event)] class ModalText extends TextArea { ...
Using metadata tags The Flex compiler recognizes component metadata statements in your ActionScript class files and MXML files. The metadata tags define component attributes, data binding properties, events, and other properties of the component. Flex interprets these statements during compilation; they are never interpreted during run time. Metadata statements are associated with a class declaration, an individual data field, or a method. They are bound to the next line in the file.
In this example, you add the [Event] metadata tag before the class definition to indicate that the class dispatches an event named enableChanged. You also include the [Inspectable] metadata tag to indicate that the enableTA property is accessible in Flex Builder. In an MXML file, you insert the metadata tags either in an block along with your ActionScript code, or in an block, as the following example shows: In this example, the main application file includes a new namespace definition of xmlns:MyComp="*" as part of the tag. This namespace definition specifies the location of the MXML component.
The StateComboBox.mxmlfile specifies the ComboBox control as its root tag, so you can reference all of the properties of the ComboBox control within the MXML tag of your custom component, or in the ActionScript specified within an tag. For example, the following example specifies the rowCount property and a listener for the close event for your custom control: PAGE 81Creating composite MXML components A composite MXML component is a component that contains multiple component definitions within it. To create a composite component, you specify a container as its root tag, and then add Flex components as children of the container. For example, the following component contains an address form created by specifying a Form container as the root tag of the component, and then defining several children of the Form container.
If you include child tags of the root container tag in an MXML component file, you cannot add child tags when you use the component as a custom tag in another MXML file. If you define an empty container in an MXML file, you can add child tags when you use the component as a custom tag. N OT E The restriction on child tags refers to the child tags that correspond to visual components. Visual components are subclasses of the UIComponent component.
For example, the following example sets the horizontalPageScrollSize property and a listener for the scroll event for your custom control, but you cannot specify properties for the child CheckBox or TextInput controls of the Form container:
The root tag of an MXML component cannot contain an id property. Therefore, if you refer to the object defined by the root tag in the body of the component, you must use the this keyword, as the following example shows:
Alternatively, you might develop a component that you want to deploy with a built-in look so that it is not necessary for application developers to apply any additional styles to it. This type of component might be useful for applications that require a header or footer with a fixed look, while the body of the application has more flexibility in its look. Or, you might develop a custom component by using a combination of these approaches.
Alternatively, you can define these styles by using a class selector style declaration, as the following example shows: .
■ Class selectors ■ Type selectors The styles that application developers can apply correspond to the styles supported by the root tag of the MXML component. The following example uses a tag property to set a style for the custom MXML component: PAGE 88You can also use a type selector to define styles. A type selector applies styles to all instances of a component, as the following example shows: PAGE 89Applying a type selector to the root tag of a custom component All custom components contain a root tag that specifies the superclass of the component. In the case of StateComboBox.mxml, the root tag is . If you define a type selector for the ComboBox control, or for a superclass of the ComboBox control, in your main application file, that style definition is also applied to any custom component that uses a ComboBox control as its root tag, as the following example shows:
If you define a type selector for a superclass of the custom control, and for the custom control itself, Flex ignores any conflicting settings from the type selector for the superclass, as the following example shows: PAGE 91CHAPTER 8 8 Creating Advanced MXML Components One of the common goals when you create MXML components is to create configurable and reusable components. For example, you might want to create MXML components that take properties, dispatch events, define new style properties, have custom skins, or use other customizations. This topic describes advanced techniques for creating advanced MXML components.
With loosely coupled components, you typically define properties of the component to pass information to it. These properties, defined by using variables or setter and getter methods, specify the data type of the parameter value. For more information about defining component properties, see “Adding custom properties and methods to a component” on page 92.
Defining properties and methods in ActionScript With ActionScript, you define properties and methods by using the same syntax that you use in an ActionScript class. For more information on using ActionScript to define properties and methods, see Chapter 3, “Using ActionScript to Create Components,” on page 25. When using ActionScript, you place a property or method definition within an block. The tag must be an immediate child tag of the root tag of the MXML file.
The following MXML application file uses the tag to configure the control to display long state names: The following example modifies the component to add a method that lets you change the display of the state name at run time.
You might use this new method with the click event of a Button control to change the display from long names to short names, as the following example shows: PAGE 96The following example modifies the example in “Defining properties and methods in ActionScript” on page 93 to define the shortNames property by using an MXML tag, rather than an ActionScript variable definition:
You can also define events to be dispatched when a property changes. This enables you to signal the change so that an event listener can recognize the change. For more information on events, see “Working with events” on page 107. You can call a component’s custom methods and access its properties in ActionScript just as you would any instance method or component property, as the following application shows: PAGE 99Supporting data binding in custom properties The Flex data binding mechanism provides a syntax for automatically copying the value of a property of one object to a property of another object at run time. The following example shows a Text control that gets its data from Slider control’s value property. The property name inside the curly braces ({ }) is a binding expression that copies the value of the source property, mySlider.
When a property is the source of a data binding expression, any changes to the property must signal an update to the destination property. The way to signal that change is to dispatch an event, as the following example shows:
If you omit the event name specification from the [Bindable] metadata tag, Flex automatically generates and dispatches an event named propertyChange. If the property value remains the same on a write, Flex does not dispatch the event or update the property. Alternatively, you can place the [Bindable] metadata before a public class definition.
You can also use the parentDocument property to reference the next object up in the document chain of a Flex application. The parentDocument property is inherited by all components from the UIComponent class. For an MXML component, the parentDocument property references the Object corresponding to the component that referenced the MXML component. For more information on the mx.core.Application.
The simplest way to write StateComboBoxDirectRef.mxml is to use the mx.core.Application.application static property to write the index directly to the TextArea control, as the following example shows:
You could make the custom component slightly more reusable by using the parentDocument property to reference the TextArea control, rather than the mx.core.Application.application static property. By using the parentDocument property, you can call the custom component from any other MXML component that contains a TextArea control named myTAMain, as the following example shows: PAGE 105Passing a reference to the component A loosely coupled component is a highly reusable component that you can easily use in different places in one application, or in different applications. To make the component from “Supporting data binding in custom properties” on page 99 reusable, you can pass a reference to the TextArea control to the custom component, as the following example shows: PAGE 106Passing a reference to the calling component In “Passing a reference to the component” on page 105, you passed a reference to a single component to the custom MXML component. This allowed the MXML component to access only a single component in the main application. One type of reference that you can pass to your component is a reference to the calling component. With a reference to the calling component, your custom MXML file can access any properties or object in the calling component.
Remember, an MXML component corresponds to an ActionScript class, where the ActionScript class name is the filename of the MXML component. Therefore, the MXML component defines a new data type. You can then create a variable named whose data type is that of the calling file. With the reference to the calling file, your MXML component can access any property of the calling file, and you can bind the value of the TextInput control in CallingComp.mxml to the TextInput control in StateComboBox.mxml.
The following example uses the StateComboBox.mxml component, and defines the event listener for the component’s close event in the main application:
With simple MXML components, you can define event listeners in both places, and both event listeners process the event. However, the event listeners defined within the component execute before any listeners defined in the application. Creating custom events All MXML components can dispatch events, either those inherited by the components from their superclasses, or new events that you define within your components. When you are developing MXML components, you can add your own event types.
You dispatch new event types by using the dispatchEvent() method, as the following example shows: [Event(name="enableChanged", type="flash.events.Event")]
The following main application includes TextAreaEnabled.mxml and defines an event listener for the enableChanged event:
Handling events from composite components Composite components are components that use a container for the root tag, and define child components in that container. You handle events generated by the root container in the same way as you handle events generated by simple MXML components. That is, you can handle the event within the MXML component, within the referencing file, or both. For more information, see “Handling events from simple MXML components” on page 107.
To propagate the close event outside of the custom component, you define an event listener for it in the MXML component that redispatches it, as the following example shows: [Event(name="close", type="flash.events.Event")]
In this example, you propagate the event to the calling file. You could, alternatively, create an event type and new event object as part the propagation. For more information on the [Event] metadata tag, see Chapter 5, “Using Metadata Tags in Custom Components,” on page 45. You can handle the close event in your main application, as the following example shows: PAGE 115Custom MXML components can implement interfaces just as other ActionScript classes can. To do this, you use the implements attribute. All MXML tags support this attribute. The following code is an example of a simple interface that declares several methods: // The following is in a file named SuperBox.as.
Methods that are implemented in the custom component must have the same return type as their corresponding methods in the interface. If no return type is specified in the interface, the implementing methods can declare any return type. About implementing IMXMLObject You cannot define a constructor for an MXML component. If you do, the Flex compiler issues an error message that specifies that you defined a duplicate function.
Flex calls the IMXMLObject.initialized() method after it initializes the properties of the component. The following example uses this component:
Creating Advanced MXML Components
PART 3 Creating ActionScript Components 3 This part describes how to create custom Adobe Flex components in ActionScript. The following topics are included: Chapter 9: Creating Simple Visual Components in ActionScript 121 Chapter 10: Creating Advanced Visual Components in ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Chapter 11: Creating Custom Style Properties . . . . . . . . . . . . . . . . 183 Chapter 12: Creating Template Components . . . . . . . .
CHAPTER 9 9 Creating Simple Visual Components in ActionScript You define custom ActionScript components to extend the Adobe Flex component library. For example, you can create a customized Button, Tree, or DataGrid component as an ActionScript component. This topic describes how to create simple visual components in ActionScript, and includes examples of creating components that extend the Flex component hierarchy.
Flex components are implemented as a class hierarchy in ActionScript. Each component in your application is an instance of an ActionScript class. The following example shows just a portion of this hierarchy: UIComponent Container Box Button NumericStepper Form ComboBase ComboBox VBox N OT E This example shows a portion of the class hierarchy. For a complete description of the class hierarchy, see the Adobe Flex 2 Language Reference.
Example: Creating a simple component When you define a simple component, you do not create a component yourself, but you modify the behavior of an existing component. In this section, you create a customized TextArea control by extending the mx.controls.TextArea component. This component adds an event listener for the keyDown event to the TextArea control.
N O TE Your class must be specified as public for you to be able to access it by using an MXML tag. In this example, you first define the MyComp namespace to specify the location of your custom component. You then reference the component as an MXML tag by using the namespace prefix. You can specify any inherited properties of the superclass in MXML, as the following example shows: PAGE 125Adding properties and methods to a component To make your custom components reusable, you design them so that users can pass information to them. This section describes how to add public properties and methods to your components. It also describes how the component user can call the methods and access the properties, and how to make them accessible in MXML.
return _prop1; } public function set prop1(value:Number):void { // Typically sets the private variable to the argument. _prop1=value; // Define any other logic, such as dispatching an event. } } You can define and initialize a private variable, as the following example shows: private var _prop2:Number=5; When you specify a value to the property in MXML, Flex automatically calls the setter method.
Defining public properties as variables In the following example, you use the Control+I key combination to extend the TextArea control to let the user increase the font size by one point, or use the Control+M key combination to decrease the font size by one point: package myComponents { // as/myComponents/TextAreaFontControl.as import mx.controls.TextArea; import flash.events.KeyboardEvent; import flash.events.
} break; // Was Ctrl-M pressed? case 77 : if (currentFontSize > minFontSize) { currentFontSize = currentFontSize - 1; setStyle('fontSize', currentFontSize); } break; default : break; } } } } } Notice that the call to the getStyle() method is in the event listener for the creationComplete event. You must wait until component creation is complete before calling getStyle() to ensure that Flex has set all inherited styles. However, you can call setStyle() in the component constructor to set styles.
The following example code defines a component named TextAreaFontControlGetSet that replaces the public property definition for the maxFontSize property shown in “Defining public properties as variables” on page 127: package myComponents { // as/myComponents/TextAreaFontControlGetSet.as import mx.controls.TextArea; import flash.events.KeyboardEvent; import flash.events.
case 73 : if (currentFontSize < maxFontSize) { currentFontSize = currentFontSize + 1; setStyle('fontSize', currentFontSize); } break; // Was Ctrl-M pressed? case 77 : if (currentFontSize > minFontSize) { currentFontSize = currentFontSize - 1; setStyle('fontSize', currentFontSize); } break; default : break; } } } } } In this example, the setter method checks that the specified font size is less than the predefined limit of 30 pixels. If the font size is greater than the limit, it sets it to the limit.
You can use the [DefaultProperty] metadata tag in your ActionScript component to define a single default property, as the following example shows: package myComponents { // as/myComponents/TextAreaDefaultProp.as import mx.controls.TextArea; // Define the default property. [DefaultProperty("defaultText")] public class TextAreaDefaultProp extends TextArea { public function TextAreaDefaultProp() { super(); } // Define a setter method to set the text property // to the value of the default property.
The one place where Flex prohibits the use of a default property is when you use the ActionScript class as the root tag of an MXML component. In this situation, you must use child tags to define the property, as the following example shows: PAGE 133For example, in the section “Defining public properties in ActionScript” on page 125, you created a class with the public property maxFontSize. You can use the maxFontSize property as the destination of a binding expression, as the following example shows: PAGE 134The following example modifies the component in the section “Defining public properties in ActionScript” on page 125 to make the maxFontSize and minFontSize properties usable as the source for data bindings: // Define public properties for tracking font size.
When you define a property by using getter and setter methods so that the property is usable as the source for data binding, you include the [Bindable] metadata tag before the getter method, and optionally include the name of the event dispatched by the setter method when the property changes, as the following example shows: package myComponents { // as/myComponents/TextAreaFontControlBinding.as import mx.controls.TextArea; import flash.events.KeyboardEvent; import flash.events.
// keyDown event handler. private function myKeyDown(eventObj:KeyboardEvent):void { // Was Ctrl key pressed? if (eventObj.ctrlKey) { switch (eventObj.
Defining a method override You can override a method of a base class in your ActionScript component. To override the method, you add a method with the same signature to your class, and prefix it with the override keyword. The following example overrides the HBox.addChild() method to open an Alert box when a new item is added to it: package myComponents { import mx.controls.Alert; import mx.containers.HBox; import flash.display.
The following example uses this component in an application:
Initializing inherited properties with tag attributes in MXML In an MXML component, you can initialize the value of any inherited public, writable property by defining a child tag of the MXML component with an id property that matches the name of the inherited property. For example, you define a custom Panel component based on the Flex Panel container, named MyPanel.as, as the following example shows: package myComponents { import mx.containers.Panel; import mx.controls.Text; import mx.controls.
You can use your custom component in the following Flex application: PAGE 141Custom components that extend existing Flex classes inherit all the events of the superclass. If you extend the Button class to create the MyButton class, you can use the events inherited from the Button class, such as mouseOver or creationComplete, as the following example shows:
Your custom component can also define event listeners within the component itself to handle the events internally. For example, “Defining public properties as variables” on page 127 defined event listeners for the keyDown and creationComplete events within the body of the component. This allows the component to handle those events internally. N OT E Even though you define event listeners for the events in the component itself, your application can also register listeners for those events.
You might define some custom events that are used internally by your component, and are not intended to be recognized by the other components. For example, the following component defines a custom event, dispatches it, and handles it all within the component: package myComponents { import mx.controls.TextArea; import flash.events.Event; public class ModalText extends TextArea { public function ModalText() { super(); // Register event listener.
If you do not identify an event in the class file with the [Event] metadata tag, the compiler generates an error when an MXML component attempts to register a listener for that event. Any component can register an event listener for the event in ActionScript using the addEventListener() method, even if you omit the [Event] metadata tag. You can then handle the event in MXML, as the following example shows: PAGE 145The following ActionScript class file sets the color and borderColor styles of the BlueButton control: package myComponents { // as/myComponents/BlueButton.as import mx.controls.Button; public class BlueButton extends Button { public function BlueButton() { super(); // Set the label text to blue. setStyle("color", 0x0000FF); // Set the borderColor to blue.
In addition to setting the color property, you can set the font face, font size, and other style properties. For more information on the available style properties, see Flex 2 Developer’s Guide. You can also define new style properties for your components. For more information, see Chapter 10, “Creating Advanced Visual Components in ActionScript,” on page 147.
CHAPTER 10 10 Creating Advanced Visual Components in ActionScript This topic describes the details of creating advanced visual components for use in Adobe Flex applications. This topic assumes that you are familiar with creating simple ActionScript components as described in Chapter 9, “Creating Simple Visual Components in ActionScript,” on page 121. Contents About creating advanced components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Implementing the component . . . .
You usually create a component as a subclass of an existing class. For example, to create a component that is based on the Button control, you create a subclass of the mx.controls.Button class. To make your own component, you create a subclass of the mx.core.UIComponent class. About overriding protected UIComponent methods All Flex visual components are subclasses of the UIComponent class.
Component users do not call these methods directly; Flex calls them as part of the initialization process of creating a component, or when other method calls occur. For more information, see “About the component instantiation life cycle” on page 150. About the invalidation methods During the lifetime of a component, your application might modify the component by changing its size or position, modifying a property that controls its display, or modifying a style or skin property of the component.
The following table describes the invalidation methods: Invalidation method Description invalidateProperties() Marks a component so that its commitProperties() method gets called during the next screen update. invalidateSize() Marks a component so that its measure() method gets called during the next screen update. invalidateDisplayList() Marks a component so that its layoutChrome() and updateDisplayList() methods get called during the next screen update.
The following example creates a Button control in ActionScript and adds it to a container: // Create a Box container. var boxContainer:Box = new Box(); // Configure the Box container. // Create a Button control. var b:Button = new Button() // Configure the button control. b.label = "Submit"; ... // Add the Button control to the Box container. boxContainer.addChild(b); The following steps show what occurs when you execute the code to create the Button control, and add the control to the Box container: 1.
4. f. Dispatches the initialize event on the component. At this time, all of the component’s children are initialized, but the component was not sized or processed for layout. You can use this event to perform additional processing of the component before it is laid out. g. Dispatches the childAdd event on the parent container. h. Dispatches the initialize event on the parent container. During the next render event, Flex performs the following actions: a.
You can remove a component from a container by using the removeChild() method. If there are no references to the component, it is eventually deleted from memory by the garbage collection mechanism of Adobe Flash Player 9. About the steps for creating a component When you implement a component, you override component methods, define new properties, dispatch new events, or perform any other customizations required by your application. To implement your component, Follow these general steps: 1.
For example, you can implement a custom Button control that uses a new mechanism for defining its default size. In that case, you only need to override the measure() method. For an example, see “Implementing the measure() method” on page 162. Or, you might implement a new subclass of the VBox container.
The following table lists the main interfaces implemented by Flex components: Interface Use IChildList Indicates the number of children in a container. IDeferredInstantiationUIComponent Indicates that a component or object can effect deferred instantiation. IFlexDisplayObject Specifies the interface for skin elements. IFocusManagerComponent Indicates that a component or object is focusable, which means that the components can receive focus from the FocusManager.
■ “Basic component structure” on page 156 ■ “Implementing the constructor” on page 157 ■ “Implementing the createChildren() method” on page 157 ■ “Implementing the commitProperties() method” on page 158 ■ “Implementing the measure() method” on page 162 ■ “Implementing the layoutChrome() method” on page 166 ■ “Implementing the updateDisplayList() method” on page 166 Basic component structure The following example shows the basic structure of a Flex component: package myComponents { public class
Implementing the constructor Your ActionScript class should define a public constructor method for a class that is a subclass of the UIComponent class, or a subclass of any child of the UIComponent class. The constructor has the following characteristics: ■ No return type ■ Should be declared public ■ No arguments ■ Calls the super() method to invoke the superclass’s constructor Each class can contain only one constructor method; ActionScript does not support overloaded constructor methods.
// Call the createChildren() method of the superclass. super.createChildren(); // // // if Test for the existence of the children before creating them. This is optional, but do this so a subclass can create a different child. (!text_mc) { text_mc = new TextArea(); text_mc.explicitWidth = 80; text_mc.editable = false; text_mc.addEventListener("change", handleChangeEvent); // Add the child component to the custom component. addChild(text_mc); } // Test for the existence of the children before creating them.
Calls to the commitProperties() method occur before calls to the measure() method. This lets you set property values that the measure() method might use. The typical pattern that you use for defining component properties is to define the properties by using getter and setter methods, as the following example shows: // Define a private variable for the alignText property. private var _alignText:String = "right"; // Define a flag to indicate when the _alignText property changes.
Changing the alignment of text in a control does not necessarily change the control’s size. However, if it does, include a call to the invalidateSize() method to trigger the measure() method. The main advantages of using the commitProperties() method are the following: ■ To coordinate the modifications of multiple properties so that the modifications occur synchronously.
bTextChanged = true; invalidateProperties(); // Changing the text causes the control to recalculate its default size. invalidateSize(); invalidateDisplayList(); } // Define a private variable for the alignText property.
} } Implementing the measure() method The measure() method sets the default component size, in pixels, and optionally sets the component’s default minimum size. Flex schedules a call to the measure() method when a call to the invalidateSize() method occurs. The measure() method executes during the next render event after a call to the invalidateSize() method. When you use the addChild() method to add a component to a container, Flex automatically calls the invalidateSize() method.
Component users can also override the default size settings in an application by using the component in the following ways: ■ Setting the explicitHeight and exlicitWidth properties ■ Setting the width and height properties ■ Setting the percentHeight and percentWidth properties For example, you can define a Button control with a default size of 100 pixels wide and 50 pixels tall, and a default minimum size of 50 pixels by 25 pixels, as the following example shows: package myComponents { // asAdvanced/
You can override the default size settings in an application, as the following example shows: In this example, you specify that the width of the button is 50% of the width of the VBox container.
In the following example, you override the measure() method of the TextArea control so that it examines the text passed to the control, and calculates the default size of the TextArea control to display the entire text string in a single line. package myComponents { // asAdvanced/myComponents/MyTextArea.as import mx.controls.TextArea; import flash.text.
Implementing the layoutChrome() method The Container class, and some subclasses of the Container class, use the layoutChrome() method to define the border area around the container. Flex schedules a call to the layoutChrome() method when a call to the method occurs. The layoutChrome() method executes during the next render event after a call to the invalidateDisplayList() method.
A component does not appear on the screen until its updateDisplayList() method gets called. Flex schedules a call to the updateDisplayList() method when a call to the invalidateDisplayList() method occurs. The updateDisplayList() method executes during the next render event after a call to the invalidateDisplayList() method. When you use the addChild() method to add a component to a container, Flex automatically calls the invalidateDisplayList() method.
The properties have the following values: Specifies the width of the component, in pixels, in the component’s coordinates, regardless of the value of the scaleX property of the component. This is the width of the component as determined by its parent container. unscaledWidth Specifies the height of the component, in pixels, in the component’s coordinates, regardless of the value of the scaleY property of the component. This is the height of the component as determined by its parent container.
// of the VBox. var yOfComp:Number = height-vm.bottom; // Temp variable for a container child. var obj:UIComponent; for (var i:int = 0; i < numChildren; i++) { // Get the first container child. obj = UIComponent(getChildAt(i)); // Determine the y coordinate of the child. yOfComp = yOfComp - obj.height; // Set the x and y coordinate of the child. // Note that you do not change the x coordinate. obj.move(obj.x, yOfComp); // Save the y coordinate of the child, // plus the vertical gap between children.
The following application uses this component: PAGE 171When you create a component, you can include ActionScript that enables the component and a screen reader for audio communication. When developers use your component to build an application in Flash, they use the Accessibility panel to configure each component instance.
Best practices when designing a component Use the following practices when you design a component: ■ Keep the file size as small as possible. ■ Make your component as reusable as possible by generalizing functionality. ■ Use the Border class rather than graphical elements to draw borders around objects. ■ Use tag-based skinning. ■ Assume an initial state.
Example: Composite component This section uses an example component, called ModalText and defined in the file ModalText.as, that combines a Button control and a TextArea control. You use the Button control to enable or disable text input in the TextArea control. Defining event listeners for composite components Custom components implement the createChildren() method to create children of the component, as the following example shows: override protected function createChildren():void { super.
However, if a child component dispatches an event, and you want that opportunity to handle the event outside of the component, you must add logic to your custom component to propagate the event. Notice that the event listener for the change event for the TextArea control propagates the event. This lets you handle the event in your application, as the following example shows: PAGE 175■ You can use both the textPlacement property or the text property as the source for a data binding expression. ■ You can optionally use skins for the up, down, and over states of the Button control. The following is an example MXML file that uses the ModalText control and sets the textPlacement property to left: PAGE 176The following example shows the ModalText.as file that defines this control: package myComponents { // Import all necessary classes. import mx.core.UIComponent; import mx.controls.Button; import mx.controls.TextArea; import flash.events.Event; import flash.text.
// different child instead. override protected function createChildren():void { super.createChildren(); // Create and initialize the TextArea control. if (!text_mc) { text_mc = new TextArea(); text_mc.explicitWidth = 80; text_mc.editable = false; text_mc.text= _text; text_mc.addEventListener("change", handleChangeEvent); addChild(text_mc); } // Create and initialize the Button control. if (!mode_mc) { mode_mc = new Button(); mode_mc.
var buttonWidth:Number = mode_mc.getExplicitOrMeasuredWidth(); var buttonHeight:Number = mode_mc.getExplicitOrMeasuredHeight(); // The default and minimum width are the measuredWidth // of the TextArea control plus the measuredWidth // of the Button control. measuredWidth = measuredMinWidth = text_mc.measuredWidth + buttonWidth; // The default and minimum height are the larger of the // height of the TextArea control or the measuredHeight of the // Button control, plus a 10 pixel border around the text.
if (textPlacement == "left") { text_mc.move(4, 4); mode_mc.move(4 + textWidth + 5, 4); } else { mode_mc.move(4, 4); text_mc.move(4 + buttonWidth + 5, 4); } // Draw a simple border around the child components. graphics.lineStyle(1, 0x000000, 1.0); graphics.drawRect(0, 0, unscaledWidth, unscaledHeight); } /*** i) Add methods, properties, and metadata. ***/ // The general pattern for properties is to specify a private // holder variable.
private function handleChangeEvent(eventObj:Event):void { dispatchEvent(new Event("change")); } // Handle events that are dispatched by the children. private function handleClickEvent(eventObj:Event):void { text_mc.editable = !text_mc.editable; } } } Troubleshooting This section describes some common problems and their solutions when you create components for Flex in Flash. I get an error “don't know how to parse…” when I try to use the component from MXML.
In some cases, helper classes are not ready by the time your component requires them. Flex adds classes to the application in the order that they must be initialized (base classes, and then child classes). However, if you have a static method that gets called as part of the initialization of a class, and that static method has class dependencies, Flex does not know to place that dependent class before the other class, because it does not know when that method is going to be called.
Creating Advanced Visual Components in ActionScript
CHAPTER 11 11 Creating Custom Style Properties Styles are useful for defining the look and feel of your Adobe Flex applications, including letting users set component skins. You can use them to change the appearance of a single component, or apply them across all components. This topic describes how to create style properties for your custom components. Contents About styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
About inheritance in Cascading Style Sheets When you implement a style property in an ActionScript component, that property is automatically inherited by any subclasses of your class, just as methods and properties are inherited. This type of inheritance is called object-oriented inheritance. Some style properties also support Cascading Style Sheet (CSS ) inheritance.
Setting styles using MXML tag attributes Component users can use MXML tag attributes to set a style property on a component. For example, the following code creates a TextArea control, then sets the backgroundColor style of the component to blue (0x0000FF): Setting styles using the setStyle() method Component users can use the setStyle() method to set a style property on a component.
About overriding the styleChanged() method When a user sets a style on a component, Flex calls the component’s styleChanged() method, passing to it the name of the style being set. When you create a custom component, you can override the UIComponent.styleChanged() method to check the style name passed to it, and handle the change accordingly, as the following example shows: var bBackgroundColor:Boolean=false; override public function styleChanged(styleProp:String):void { super.
Typically, you use a flag to indicate that a style changed. In the updateDisplayList() method, you check the flag and update the component based on the new style setting, as the following example shows: override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); // Check to see if style changed. if (bBackgroundColor==true) { // Redraw the component using the new style. ...
This gradient is defined by two colors that you set by using a new style property called fillColors. The fillColors style takes an array of two colors that component users can set. The StyledRectangle.as class defines default colors for the fillColors style, but you can also set them as the following example shows: PAGE 189Defining a style property You define a style property for a component in the class definition. To define a new style property: 1. Insert the [Style] metadata tag that defines the style before the class definition. You insert the [Style] metadata tag before the class definition to define the MXML tag attribute for a style property. If you omit the [Style] metadata tag, the MXML compiler issues a syntax error when you try to set the property as an MXML tag attribute.
The following code example defines the StyledRectangle component and the fillColors style: package myComponents { // skinstyle/myComponents/StyledRectangle.as import mx.core.UIComponent; import mx.styles.CSSStyleDeclaration; import mx.styles.StyleManager; import flash.display.GradientType; // Insert the [Style] metadata tag to define the name, type // and other infomration about the style property for the // MXML compiler.
// Define the variable to hold the current gradient fill colors. private var fillColorsData:Array; private var bFillColorsChanged:Boolean = true; // Define variables for additional controls on the fill. // You can create style properties for these as well. private var alphas:Array = [1.0, 1.0]; private var ratios:Array = [0x00, 0xFF]; // Override styleChanged() to detect changes in your new style. override public function styleChanged(styleProp:String):void { super.
Setting default style values One of the issues that you have to decide when you create a style property for your component is how to set its default value. Setting a default value for a style property is not as simple as calling the setStyle() method in the component’s constructor; you must take into consideration how Flex processes styles, and the order of precedence of styles. When Flex compiles your application, Flex first examines any style definitions in the tag, before it creates any components.
If you include the tag, the tag creates the default style definition, as the following example shows: StyledRectangle {fillColors: #FF00FF, #00FFFF} Defining a style property for a skin Flex lets you set component skins by using style properties.
Creating Custom Style Properties
CHAPTER 12 12 Creating Template Components One way to create reusable components is to define them as template components. A template component defines properties with a general data type that lets the component user specify an object of a concrete data type when using the component. By using a general data type to define component properties, you create highly reusable components that can work with many different types of objects. This topic describes how to create template components.
The following example shows an application that uses a template component called MyTemplateComponent: PAGE 197The implementation of the topRow and bottomRow properties lets you specify any Flex component as a value, as the following example shows: PAGE 198The following code shows the implementation of MyTemplateComponent:
Using IDeferredInstance in a template component Deferred creation is a feature of Flex where Flex containers create only the controls that initially appear to the user. Flex then creates the container’s other descendants if the user navigates to them. For more information, see Chapter 6, “Improving Startup Performance,” in Building and Deploying Flex 2 Applications. You can create a template component that also takes advantage of deferred creation.
The following example shows an alternative implementation for the MyTemplateComponent component shown in the section “About template components” on page 195, named MyTemplateComponentDeferred.mxml, by defining the topRow and bottomRow properties to be of type IDeferredInstance:
In MXML, when the compiler encounters a value declaration for a property of type IDeferredInstance, instead of generating code to construct and assign the value to the property, the compiler generates code to construct and assign an IDeferredInstance implementation object, which then produces the value at run time. You can pass any data type to a property of type IDeferredInstance.
Defining an array of template properties You can define an array of template properties, as the following example shows: // Define an Array of deferred properties for a row of components. // Do not restrict the type of the component. [ArrayElementType("mx.core.IDeferredInstance")] public var bottomRow:Array; // Define an Array of deferred properties for a row of components. // Restrict the type of the component to mx.controls.Button. [InstanceType("mx.controls.Button")] [ArrayElementType("mx.core.
In the second example, you can only assign values of type mx.controls.Button to it. Each Array element is created when the application loads. The following template component shows an alternative implementatin of the MyTemplateComponent that restricts the type of components to be of type mx.controls.Button:
Creating Template Components
PART 4 Creating Nonvisual Flex Components 4 This part describes how to create formatter, validator, and effect components for Adobe Flex. The following topics are included: Chapter 13: Creating Custom Formatters . . . . . . . . . . . . . . . . . . . 207 Chapter 14: Creating Custom Validators . . . . . . . . . . . . . . . . . . . . . 217 Chapter 15: Creating Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPTER 13 13 Creating Custom Formatters Adobe Flex includes several predefined formatters that you can use in your applications to format data. You also might have to extend the functionality of these predefined formatters, or create formatters for your specific application needs. This topic describes how to create a custom data formatter. For more information on using formatters, see Chapter 41, “Formatting Data,” in Flex 2 Developer’s Guide. Contents Creating a custom formatter . . . . . . . . . . . .
Creating a custom formatter You create a custom formatter by creating a class that extends the mx.formatters.Formatter base class, or by creating a class that extends one of the standard formatter classes, which all extend mx.formatters.Formatter.
Creating a simple formatter This example defines a simple formatter class that converts any string to all uppercase or all lowercase letters depending on the value passed to the formatString property. By default, the formatter converts a String to all uppercase. package myFormatters { // formatters/myFormatter/SimpleFormatter.as import mx.formatters.Formatter import mx.formatters.SwitchSymbolFormatter public class SimpleFormatter extends Formatter { // Declare the variable to hold the pattern string.
You can use this formatter in a Flex application, as the following example shows: PAGE 214Extending a Formatter class You can extend the Formatter class to create a custom formatter, or any formatter class. This section shows an example that extends the ZipCodeFormatter class by allowing an extra format pattern: "#####*####". In this example, if the user omits a format string, or specifies the default value of "#####*####", the formatter returns the ZIP code using the format "#####*####".
// If the formatString is anything other than '#####*####, // call super and validate and format as usual using // the base ZipCodeFormatter. return super.format(value); } } } Notice that the ExtendedZipCodeFormatter class did not have to define a formatString property because it is already defined in its base class, ZipCodeFormatter. The following example uses this custom formatter in an application: By convention, the name of a factory class is the name of the effect, such as Zoom or Fade. Instance class The instance class implements the effect logic.
The following table lists the methods and properties that you define in a factory class: Factory method/property Description constructor (Required) The class constructor. You typically call the super() method to invoke the superclass constructor to initialize the inherited items from the superclasses. Your constructor must take at least one optional argument, of type Object. This argument specifies the target component of the effect. Effect.
The following table lists the methods and properties that you define in an instance class: Instance method/property Description constructor (Required) The class constructor. You typically call the super() method to invoke the superclass constructor to initialize the inherited items from the superclasses. EffectInstance.play() (Required) Invokes the effect. You must call super.play() from your override. EffectInstance.
Example: Defining a simple effect To define a simple custom effect, you create a factory class from the Effect base class, and the instance class from the mx.effects.EffectInstance class. The following example shows an effect class that uses a Sound object to play an embedded MP3 file when a user action occurs. This example is a simplified version of the SoundEffect class that ships with Flex. package myEffects { // myEffects/MySound.as import mx.effects.Effect; import mx.effects.EffectInstance; import mx.
To define your instance class, you create a subclass from the mx.effects.EffectInstance class. In the class definition, you must define a constructor and play() methods, and you can optionally define an end() method to stop the effect. package myEffects { // myEffects/MySoundInstance.as import mx.effects.EffectInstance; import flash.media.SoundChannel; import flash.media.Sound; public class MySoundInstance extends EffectInstance { // Embed the MP3 file. [Embed(source="sample.
To use your custom effect class in an MXML file, you insert a tag with the same name as the factory class in the MXML file. You reference the custom effect the same way that you reference a standard effect. The following example shows an application that uses the MySound effect: PAGE 235Example: Passing parameters to effects To make your effects more robust, you often design them to let the user pass parameters to them. The example in this section modifies the sound effect from the previous section to take a parameter that specifies the MP3 file to play: package myEffects { // MySoundParam.as import mx.effects.Effect; import mx.effects.EffectInstance; import mx.effects.
Notice that the getAffectedProperties() method still returns an empty Array. That is because getAffectedProperties() returns the list of properties of the effect target that are modified by the effect, not the properties of the effect itself. In your instance class, you define a property named soundMP3, corresponding to the property with the same name in the factory class.
You can now pass the URL of an MP3 to the effect, as the following example shows: PAGE 250Overriding the initEffect() method The EffectInstance class defines the initEffect() method that you can override in your custom effect. This method has the following signature: public initEffect(event:Event):void where event is the Event object dispatched by the event that triggered the effect. For example, a user might create an instance of an effect, but not provide all of the configuration information that is required to play the effect.
Index A accessibility, custom components 170 ActionScript classpath 65 coding practices 25 custom components 21 defining components 121 distributing components as 69 Application object, accessing 101 B behaviors in applications 227 defining custom effects 233 Bindable metadata keyword 49 C class hierarchy 15 class statement 28 classes extending classes and subclasses 16 hierarchy for components 15, 122 classpath, ActionScript 65 commitProperties() method 158, 159 compiling about 63 compc 64 mxmlc 64 web-
deploying components 23 dispatchEvent() method 143 E Effect metadata keyword 49 effects custom 228 custom effect trigger 247 defining custom 233 for transitions 240 tween effects 237 Embed metadata keyword 49 enableAccessibility() method 171 Event class, creating a subclass 38 Event metadata keyword 49, 56, 61 events about 35 adding 143 custom 109 defining in ActionScript components 140 dispatching custom events 38 Event metadata keyword 49, 56, 61 Event metadata tag 40 from composite components 112 handli
MXML components about 77 creating 78 reusable 91 N NonCommittingChangeEvent metadata keyword 49, 60 P package statement 25 performance, RSLs 23, 68 postal codes, formatting 211 properties as getters and setters 30 as variables 30 commitProperties() method 159 getter and setters 128 getters and setters 96 inspectable 98 MXML 95 T tags for metadata 49 See also specific tag names template components about 195 data types 197 transitions 240 troubleshooting 180 tween effects 237 type selector 89 U UIComponen
Index
