Event Handlers using Inline ActionScript
Events objects are created by Flex everytime an event is dispash.
AS file (funtions.as)
Examining Flex events and funtionalities of AS3 that we have at our disposal.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
//creationComple calling addToTextArea funtion below and passing the stirng 'Application Creation Complete'
//When this cerationComplete is called, it means the entire api is aready for use and all the different controls are available to us. Not only the button below within the creationComplete
creationComplete="addToTextArea('Application Creation Complete')">
//funtion addToTextArea
<mx:Script>
<![CDATA[
private function addToTextArea(eventText:String):void
{
var existingText:String=reportEvents.text;
//populate the text box reportEvent everytime an event occurs reportEvents.text=existingText+eventText+"\n";
}
]]>
</mx:Script>
<mx:Label text="Events"/>
<mx:TextArea editable="false"
height="200"
width="200"
borderStyle="solid"
//reportEvents TextArea id to bind data to function
id="reportEvents" />
<mx:Button label="Clear Events" click="reportEvents.text=''"/>
//Use the addToTextArea metho in multiple ways
<mx:Button id="myButton" label="Test"
//prinitialize is called to fired an event before the fisical attributes of the buttom has been drawn by Flex framework. Can be called at any point. Useful to do some pre-work. (ea. putting into a funtion). Also the initialize event is been called, meaning the initialize is enable by framework but hasn't been drawn complete yet.
preinitialize="addToTextArea('Button Preinitialized')"
initialize="addToTextArea('Button Initialized')"
//CreationComplete here is a very important because is in the button control. This means that button has been drawn and compleate and ready for use. If you have some code that depends on the button you want to put it on creationComplete
creationComplete="addToTextArea('Button Creation Complete')"
click="addToTextArea('Button Clicked')"
buttonDown="addToTextArea('Button Down')"
mouseDown="addToTextArea('Mouse Down')"
mouseOver="addToTextArea('Mouse Over')"
mouseOut="addToTextArea('Mouse Out')"/>
</mx:Application>
//creationComple calling addToTextArea funtion below and passing the stirng 'Application Creation Complete'
//When this cerationComplete is called, it means the entire api is aready for use and all the different controls are available to us. Not only the button below within the creationComplete
creationComplete="addToTextArea('Application Creation Complete')">
//funtion addToTextArea
<mx:Script>
<![CDATA[
private function addToTextArea(eventText:String):void
{
var existingText:String=reportEvents.text;
//populate the text box reportEvent everytime an event occurs reportEvents.text=existingText+eventText+"\n";
}
]]>
</mx:Script>
<mx:Label text="Events"/>
<mx:TextArea editable="false"
height="200"
width="200"
borderStyle="solid"
//reportEvents TextArea id to bind data to function
id="reportEvents" />
<mx:Button label="Clear Events" click="reportEvents.text=''"/>
//Use the addToTextArea metho in multiple ways
<mx:Button id="myButton" label="Test"
//prinitialize is called to fired an event before the fisical attributes of the buttom has been drawn by Flex framework. Can be called at any point. Useful to do some pre-work. (ea. putting into a funtion). Also the initialize event is been called, meaning the initialize is enable by framework but hasn't been drawn complete yet.
preinitialize="addToTextArea('Button Preinitialized')"
initialize="addToTextArea('Button Initialized')"
//CreationComplete here is a very important because is in the button control. This means that button has been drawn and compleate and ready for use. If you have some code that depends on the button you want to put it on creationComplete
creationComplete="addToTextArea('Button Creation Complete')"
click="addToTextArea('Button Clicked')"
buttonDown="addToTextArea('Button Down')"
mouseDown="addToTextArea('Mouse Down')"
mouseOver="addToTextArea('Mouse Over')"
mouseOut="addToTextArea('Mouse Out')"/>
</mx:Application>
Below is another way to handle simples events using AS inside the controls
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor=#FFFFFF">
//Label control
<mx:Label id="myL"/>
//Button control
<mx:Button id="myButton"
label="Click Me"
//Adding a click event to the label control to bind with (myL)
//Whenever you have an event like this you put the AS inside of it.
//The text property is a string with single quotes. If we use double quotes it wont work with the XML parser
click="myL.text='Button Clicked'"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor=#FFFFFF">
//Label control
<mx:Label id="myL"/>
//Button control
<mx:Button id="myButton"
label="Click Me"
//Adding a click event to the label control to bind with (myL)
//Whenever you have an event like this you put the AS inside of it.
//The text property is a string with single quotes. If we use double quotes it wont work with the XML parser
click="myL.text='Button Clicked'"/>
</mx:Application>
Not only you can handle events with inline AS, but can also write ActionScript functions.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor=#FFFFFF">
<mx:Script>
<![CDATA[
//private function clickHandler not to called from out side of my script block. //function will not be returning anything specify void //
private function clickHandler():void
//the same thing we wrote within the inline AS but inside the AS function {
//Because we're within CDATA tag and is not an XML attribute, we can use double " quote instead of singles' myL.text="Button Clicked";
}
]]>
</mx:Script>
//Label control
<mx:Label id="myL"/>
//Butoon control <mx:Button id="myButton"
label="Click Me"
//Instead of writing the AS inline as we wroted before using it in a function is more maintanable fashion because we writing the code within the function.
click="clickHandler()"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor=#FFFFFF">
<mx:Script>
<![CDATA[
//private function clickHandler not to called from out side of my script block. //function will not be returning anything specify void //
private function clickHandler():void
//the same thing we wrote within the inline AS but inside the AS function {
//Because we're within CDATA tag and is not an XML attribute, we can use double " quote instead of singles' myL.text="Button Clicked";
}
]]>
</mx:Script>
//Label control
<mx:Label id="myL"/>
//Butoon control <mx:Button id="myButton"
label="Click Me"
//Instead of writing the AS inline as we wroted before using it in a function is more maintanable fashion because we writing the code within the function.
click="clickHandler()"/>
</mx:Application>
Best practice, take the AS and to put them into separte AS (.as) files to handler better and provide a more mantainable application. Below is the MXML file followed by the AS file.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor=#FFFFFF">
//We add source to the script to point to the directory within the AS
<mx:Script source="as/functions.as">
</mx:Script>
//Label control
<mx:Label id="myL"/>
//Butoon control <mx:Button id="myButton"
label="Click Me"
//Instead of writing the AS inline as we wroted before using it in a function is more mantainable fashion because we writing the code within the function.
click="clickHandler()"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor=#FFFFFF">
//We add source to the script to point to the directory within the AS
<mx:Script source="as/functions.as">
</mx:Script>
//Label control
<mx:Label id="myL"/>
//Butoon control <mx:Button id="myButton"
label="Click Me"
//Instead of writing the AS inline as we wroted before using it in a function is more mantainable fashion because we writing the code within the function.
click="clickHandler()"/>
</mx:Application>
AS file (funtions.as)
private function clickHandler():void
{
myL.text="Button Clicked";
}
{
myL.text="Button Clicked";
}
Examining the event object and how it works. Everytime and event object occurs, wether a complete event, or click event an event object is create by the Flex framework.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
//import moseEvent class. This class comes with Flex framework using the import command
//This means we're importing the class to have acces to everthing that is available within this class
import flash.eventsMouseEvent;
private function clickHandler(event:MouseEvent):void
{
myL.text="Button Clicked";
//To view the event we're specifing the text properties //This property is generated by event framework . Using the id of the label that excecuted the event
targetLabel.text = event.target.id;
typeLabel.text = event.type;
}
]]>
</mx:Script>
<mx:HBox>
<mx:Label text="This is the target"/>
//Label with an id for reference and to display the event target
<mx:Label id="targetLabel"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="This is the type"/>
//Label with an id for reference and to display the type event
<mx:Label id="typeLabel"/>
</mx:HBox>
<mx:Label id="myL"/>
//When you click the button an event object is generate by the framework that contain two properties Target and Type.
<mx:Button id="myButton"
label="Click Me"
//Pass a parameter of the event object to the clickHandler function //By setting the event function within script block above the to make it work (event:MouseEvent)
click="clickHandler(event)"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
//import moseEvent class. This class comes with Flex framework using the import command
//This means we're importing the class to have acces to everthing that is available within this class
import flash.eventsMouseEvent;
private function clickHandler(event:MouseEvent):void
{
myL.text="Button Clicked";
//To view the event we're specifing the text properties //This property is generated by event framework . Using the id of the label that excecuted the event
targetLabel.text = event.target.id;
typeLabel.text = event.type;
}
]]>
</mx:Script>
<mx:HBox>
<mx:Label text="This is the target"/>
//Label with an id for reference and to display the event target
<mx:Label id="targetLabel"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="This is the type"/>
//Label with an id for reference and to display the type event
<mx:Label id="typeLabel"/>
</mx:HBox>
<mx:Label id="myL"/>
//When you click the button an event object is generate by the framework that contain two properties Target and Type.
<mx:Button id="myButton"
label="Click Me"
//Pass a parameter of the event object to the clickHandler function //By setting the event function within script block above the to make it work (event:MouseEvent)
click="clickHandler(event)"/>
</mx:Application>
Comments
Comments are not allowed for this entry.
