It is important to know that Flex is not here to replace ActionScript. Moreover, Flex and ActionScript complement each other. Though Flex provides several built in components, we should not forget that these components were actually built in ActionScript. Let us look at how ActionScript can be used in Flex.
Flex and ActionScript
I have mentioned earlier in one of my posts that Flex uses ActionScript – in a big way. Actually the mxml code we see is converted to ActionScript in the back end and the final output is given to us as a SWF file.
I have heard several developers say that Flex is here to replace ActionScript. Well, they are wrong – Flex will not replace ActionScript, at least for now. Flex and ActionScript complement each other. While Flex makes it easy for developers by providing several built-in components that can be used with ease, we should not forget that these components are actually built in ActionScript.
Flex builder 3.0 accepts only the latest version, ActionScript 3.0 to be used in a Flex application as it sticks to Object Oriented Programming.
How to use ActionScript in Flex?
we can include ActionScript in Flex in more than one way:
- Inline ActionScript
- ActionScript within the Script tag
- External ActionScript
1. Inline Scripting
ActionScript can be placed within an mxml tag. Let us consider a Button which says “Click Here” and an empty TextField. The code will be as follows:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button label="Click Here"/>
<mx:TextInput id="sampleText"/>
</mx:Application>Observe that I have given an ‘id‘ to the TextInput component, so I can refer that component using the id.
Right Now, the code doesn’t perform any action. Let us now, include a script for the Button tag which will insert some text into the TextInput. Observe the Inline ActionScript below (in red):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button label="Click Here" click="sampleText.text='DeveloperWall'"/>
<mx:TextInput id="sampleText"/>
</mx:Application>The above code says – on click of the Button, pass the value of “DeveloperWall” to the TextInput with the name “sampleText”.
So, when a user clicks on the button, the event of the button click is called and the value is passed to the TextField. the output will be like this:
Output of Inline ActionScript Example
2. ActionScripting in Flex using the </mx:Script> tag
Flex provides another great way of including ActionScript within the code – using the </mx:Script> tag. The tag will start like any other normal tag in Flex. However, there is some ‘CDATA’ stuff that should be included within the </mx:Script> tag. Overall, the Script tag would look like this:
<mx:Script>
<![CDATA[
]]>
</mx:Script>The CDATA looks like nerdy stuff to remember, but again Flex Builder is handy to provide code auto-completion. You can simply type <mx:Script and when you close the tag with >, Flex inserts the rest of the code for you. Simple, ain’t it?
Anyway, what is the CDATA for? What does it do?
Flex renders the entire code as XML. So, to tell Flex that the ActionScript is not to be rendered as XML, we have to embed the ActionScript within the CDATA code. To put it simple, CDATA tells Flex not to render the code within as XML.
Let us now modify the code so that the ActionScript is written in the <mx:Script> tag. Observe the code below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button label="Click Here" click="text()"/>
<mx:TextInput id="sampleText"/>
<mx:Script>
<![CDATA[
public function text():void{
sampleText.text='DeveloperWall';
}
]]>
</mx:Script>
</mx:Application>Observe that I have inserted a function for “click” in the button tag. This function is called when the button is clicked and is referenced in the <mx:Script> where the function is defined. The keywords “public” defines the scope of the function as public and “void” is to state that there is no return type for the function. Again, the output is the same as the Inline ActionScript.
3. External ActionScript Files
This is best way to include ActionScript code for a Flex application. To import an External ActionScript file, we can either use the source attribute for the Script tag or use the include directive. Both methods copy the contents of the specified file into your MXML file.
The source attribute for the Script tag is written as follows:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button label="Click Here" click="text()"/>
<mx:TextInput id="sampleText"/>
<mx:Script source="actionscript/sample.as"/>
</mx:Application>
Using the above method makes the MXML files less cluttered and also promotes code reuse across different applications.
The include directive syntax is as follows:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button label="Click Here" click="text()"/>
<mx:TextInput id="sampleText"/>
<mx:Script>
<![CDATA[
include "actionscript/sample.as";
]]>
</mx:Script>
</mx:Application>
The above two methods tell Flex to collect the contents of the sample.as file, which is in the folder ‘actionscript’ to the current mxml file.
As an instance, I have created a AS file – sample.as (we can create AS files in Flex) and have placed it in a folder called ‘actionscript’ within the ’src’ folder.
The folder structure I have given is as follows:
External ActionScript Folder Structure
Once we run the application, we get the same output.
Output of External ActionScript Example
I hope the above information was helpful. Please let me know your feedback by posting your comments below.
Related posts:
- Introduction to the Alert Control in Flex This article gives an introduction to the Alert Control in...
- Events in Flex What are Events and Listeners? Events are what make an...
- Examples on Registering Events in Flex We can register Event Handlers and Listeners in more than...
- Flex 3 – Beginner example I will now show you a basic “Hello World” example...
- Flex 3 for beginners Lets start off with Flex 3, an Adobe product to...
Related posts brought to you by Yet Another Related Posts Plugin.
4 Responses
That was a handful of information … useful ..
[...] hope my post on ActionScript in Flex was informative. I decided to make a video of it, so you would understand [...]
I think it makes more sense (and is cleaner) in this situation to use the source attribute of the Script tag to include a related AS file, although using this method you have to name the file differently from the MXML file, eg:
<mx:Script source="SampleBase.as" />
True Darren – I somehow overlooked the source attribute. Thanks for pointing it out. I will include it.