User manual MACROMEDIA FLEX 2 CREATING AND EXTENDING COMPONENTS

[. . . ] Adobe Flex 2 ® TM Creating and Extending Flex 2 Components © 2006 Adobe Systems Incorporated. Creating and Extending FlexTM 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. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end-user license agreement. [. . . ] The KeyDown event deletes all the text in the control when a user presses the Control+Z key combination: package myComponents { // as/myComponents/DeleteTextArea. as import mx. controls. TextArea; import flash. events. KeyboardEvent; public class DeleteTextArea extends TextArea { // Constructor public function DeleteTextArea() { // Call super(). addEventListener("keyDown", myKeyDown); } // Define private keyDown event handler. private function myKeyDown(eventObj:KeyboardEvent):void { // Check to see if Ctrl-Z pressed. if (eventObj. ctrlKey && eventObj. keyCode == 90) text = ""; } } } The filename for this component is DeleteTextArea. as, and its location is in the myComponents subdirectory of the application, as specified by the package statement. For more information on using the package statement, and specifying the directory location of your components, see Chapter 3, "Using ActionScript to Create Components, " on page 25. You can now use your new TextArea control in an application, as the following example shows: <?xml version="1. 0"?> <!-- as/MainDeleteTextArea. mxml --> <mx:Application xmlns:mx="http://www. adobe. com/2006/mxml" xmlns:MyComp="myComponents. *"> <MyComp:DeleteTextArea/> </mx:Application> About ActionScript components 123 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: <?xml version="1. 0"?> <!-- as/MainDeleteTextAreaProps. mxml --> <mx:Application xmlns:mx="http://www. adobe. com/2006/mxml" xmlns:MyComp="myComponents. *"> <MyComp:DeleteTextArea wordWrap="true" text="My Message"/> </mx:Application> You do not have to change the name of your custom component when you create a subclass of a Flex class. In the previous example, you could have named your custom component TextArea, and written it to the TextArea. as file in the myComponents directory, as the following example shows: package myComponents { import mx. controls. TextArea; import flash. events. KeyboardEvent; public class TextArea extends mx. controls. TextArea { . . . } } You can now use your custom TextArea control, and the standard TextArea control, in an application. To differentiate between the two controls, you use the namespace prefix, as the following example shows: <?xml version="1. 0"?> <mx:Application xmlns:mx="http://www. adobe. com/2006/mxml" xmlns:MyComp="myComponents. *" > <MyComp:TextArea/> <mx:TextArea/> </mx:Application> 124 N O TE Your class must be specified as public for you to be able to access it by using an MXML tag. Creating Simple Visual Components in ActionScript Adding 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. Defining public properties in ActionScript You can use one of the following methods to add public properties to your ActionScript components: Define public variables Define public getter and setter methods Accessing public properties in MXML All public properties defined in your component are accessible in MXML by using MXML tag properties. For example, you might allow the user to pass a value to your component, as the following example shows: <MyComp:MyCustomComponent prop1="3"/> To create a component that takes tag attributes in MXML, you define a public variable with the same name as the tag attribute in your class definition: public class MyCustomComponent extends TextArea { // Define an uninitialized variable. } You can also use public getter and setter methods to define a property, as the following example shows: public class MyCustomComponent extends TextArea { private var _prop1:Number; public function get prop1():Number { // Method body. // Typically the last line returns the value of the private variable. Adding properties and methods to a component 125 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. If you do not set the property in MXML, Flex sets it to its initial value, if you specified one, or to the type's default value, which is NaN for a variable of type Number. 126 Creating Simple Visual Components in ActionScript 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. Event; public class TextAreaFontControl extends TextArea { // Constructor public function TextAreaFontControl() { super(); // Add event listeners. addEventListener("keyDown", myKeyDown); addEventListener("creationComplete", myCreationComplete); } // Define private var for current font size. private var currentFontSize:Number; // Define a public property for public var minFontSize:Number = // Define a public property for public var maxFontSize:Number = the minimum font size. private function myCreationComplete(eventObj:Event):void { // Get current font size currentFontSize = getStyle('fontSize'); } // keyDown event handler. [. . . ] --> [Event(name="darken", type="flash. events. Event")] [Event(name="brighten", type="flash. events. Event")] [Effect(name="darkenEffect", event="darken")] [Effect(name="brightenEffect", event="brighten")] </mx:Metadata> <mx:Script> <![CDATA[ import flash. events. Event; Defining a custom effect trigger 247 // Define the private variable for the bright setting. private var _bright:Boolean = true; // Define the setter to dispatch the events // corresponding to the effect triggers. public function set bright(value:Boolean):void { _bright = value; if (_bright) dispatchEvent(new Event("brighten")); else dispatchEvent(new Event("darken")); } // Define the getter to return the current bright setting. public function get bright():Boolean { return _bright; } ]]> </mx:Script> </mx:Button> When you declare an event in the form [Event(name="eventName", type="package. eventType")], you can also create a corresponding effect, in the form [Effect(name="eventnameEffect", event="eventname")]. [. . . ]