Learn Flex 3.0

[Embed]

The Embed metadata tag is used to import images into your application. There are two ways to use Embed. You can either Embed the image within ActionScript and assign it to a variable (as in the first example in the following code), or you can assign it directly to the component property (using the syntax shown in the second example of the following code).

[Embed(source=”myIcon.gif”)]
[Bindable]
public var myIcon:Class;

<mx:Button label=”Icon Button 1″ icon=”{myIcon}”/>

<mx:Button label=”Icon Button 2″ icon=”{myIcon}”/>

The output from the following is identical to the previous code block. The benefits of creating the myIcon class are that it can be defined one time within a single class, and bound to multiple components within your application.

ButtonLabel.as

package { import mx.controls.Button; import flash.events.Event; // Define the custom event [Event(name=”labelChanged”, type=”flash.events.Event”)] public class ButtonLabel extends Button { // property to hold label value private var _myLabel:String; // public setter method public function set myLabel(s:String):void { _myLabel = s; this.label = s; // Create and dispatch custom event var eventObj:Event = new Event(”labelChanged”); dispatchEvent(eventObj); } } }

EventSample.mxml

<?xml version=”1.0″ encoding=”utf-8″?> <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:comps=”*” backgroundColor=”#FFFFFF”> <mx:Script> <![CDATA[ import mx.controls.Alert; import flash.events.Event; // method to handle custom event public function labelChanged(eventObj:Event):void { myTA.text= myTA.text + “\n”+ eventObj.target.label; myTA.verticalScrollPosition = myTA.verticalScrollPosition + 20; } ]]> </mx:Script> <mx:Panel title=”Event Sample” width=”500″ height=”275″ paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″ layout=”absolute”> <mx:TextInput id=”buttonLabelTI” change=”myButton.myLabel=buttonLabelTI.text” x=”10″ y=”9″/> <!–Instantiate custom class and define method to handle labelChanged event–> <comps:ButtonLabel id=”myButton” labelChanged=”labelChanged(event);” x=”10″ y=”39″/> <mx:TextArea id=”myTA” width=”200″ height=”200″ x=”249″ y=”10″/> </mx:Panel> </mx:Application>

[Effect]

The Effect metadata tag is used to define a custom effect that will be dispatched when an event occurs. This can be easily demonstrated by building on the earlier Event examples. By simply changing a single line to the ButtonLabel class , an effect is defined that can be assigned to an Effect instance

[IconFile(”icon.png”)]
public class CustomButton extends Button
{

}

<mx:Button label=”Icon Button 1″ icon=”@Embed(source=myIcon.gif’)”/>

<mx:Button label=”Icon Button 2″ icon=”@Embed(source=myIcon.gif’)”/>

[Event]

The Event metadata tag is used to declare events that will be dispatched by your custom class. Adding this metadata tag to your class definition allows you to add an event handler function to the MXML tag used to instantiate your custom class.  creates a custom Button class that will dispatch an event whenever its label property changes. The main application file shown in instantiates the custom Button and creates the event handler function, which dumps the new label property to a TextArea component to show the changes that occur.

[InstanceType]

The InstanceType metadata tag is used to declare the type of object that will be allowed when declaring a variable as IDeferredInstance within a template object. The syntax of InstanceType looks like this:

[InstanceType(”package.className“)]

[NonCommittingChangeEvent]

The NonCommittingChangeEvent is a metadata tag that will prevent a change from occurring when a specified event occurs.  demonstrates how this works. A private variable named s of type String is created and bound to the ti2 TextInput component. The other TextInput component with the id of ti1 sets the value of s equal to the value of its text property whenever the text changes. Additionally, the Binding metadata tag attached to the s variable is set to bind when the trigger Binding event is dispatched. The triggerBinding event is dispatched only when the Enter key is pressed while typing in the ti1 TextInput component.