Adobe ActionScript 3 documentation
Abode Flex API
Basic Flex Program
<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”>
</mx:Application>
- Let’s assume this file is named main.mxml. mxml is the file extension for Flex application files.
- When compiled, the mxml file produces a swf file. swf files can be loaded into other Flex applciations and Flash applications. swf files are also the files that the Flash Player recognizes and plays.
- The <?xml ?> tag declares that this document is an XML document, version 1 with utf-8 encoding
- The basic breakdown of a namespaced tag is this — <namespace:tagName> …stuff… </namespace:tagName>
- All tags in an XML document msut be closed, meaning that a <tag> must have a matching </tag> with a slash following it in the document
- The namespace mx is the default namespace for Flex components.
- Namespaces allow for duplicate component names, for example, <mx:Panel> and <myComponent:Panel> are different components if I declared the namespace myComponent in the <mx:Application> tag.
- xmlns:mx=”http://www.adobe.com/2006/xml” is the mx namespace declaration.
Basic Flex Program with a Script Block and a Container
<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”>
<mx:Script>
<![CDATA[
…ActionScript Code…
]]>
</mx:Script>
<mx:Panel>
…More Flex Tags…
</mx:Panel>
</mx:Application>
- Every mxml document I’ve seen starts with the <mx:Script> tag right after the <mx:Application> tag.
- The script tag is where your ActionScript goes.
- Just a hint: the mxml document components can refer to functions in the Script tag all the time and to variable values if those variables are declared [Bindable] by prepending [Bindable] in the line above the variable declaration in the code. Example below.
- The CDATA (character data) block — <![CDATA[ …code… ]]> is marker used in XML to indicate non-markup text.
- The CDATA wraps scrip code in an mxml file so that the compiler won’t treat it like mark-up.
- <mx:Panel> is an example component
Attributes of Components
<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”>
<mx:Script>
<![CDATA[
…ActionScript Code…
]]>
</mx:Script>
<mx:Panel title=”This is my Panel” layout=”horizontal” width=”300″ height=”250″>
<mx:Label text=”This is a Label” />
<mx:List id=”booklist”
width=”100%”
height=”100%”
/>
</mx:Panel>
</mx:Application>
- Flex components are manipulated through their attributes. These are like control knobs and most have a limited set of values to choose from.
- All attributes have the structure attributeName=”value”
- The <mx:Panel> tag is given a title through the title attribute. The width and height are always measured in pixels or percent if % is specified.
- The <mx:List> component shows an alternate style of listed components with each one on a separate line.
- The tag does not contain other tags, so it is closed by />, also on its own line, aligned with the left edge of the <mx:List> tag for purposes of visual organization.
- For a list of component attributes, consult the Flex API.
Flex Program with Some Communication Between the Components and the Script
<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”>
<mx:Script>
<![CDATA[
[Bindable]
private var myTitle:String;
]]>
</mx:Script>
<mx:Panel title=”{myTitle}” layout=”horizontal” width=”300″ height=”250″>
<mx:Label text=”This is a Label” />
<mx:List id=”booklist”
width=”100%”
height=”100%”
/>
</mx:Panel>
</mx:Application>
- The values of component attributes can be “bound” to values of variables in the script.
- The first part of this binding requires the variable to be enhanced with [Bindable].
- The second part of the binding is the reference to this bindable variable in the component attribute using the {variableName} syntax.
- Any update to the value of a bindable variable in the application will be automatically reflected in the value of the component attributes that are bound to it.
Keying Actions Off of Events
<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”
creationComplete=”creationCompleteHandler();”>
<mx:Script>
<![CDATA[
[Bindable]
private var myTitle:String;
private function creationCompleteHandler()
{
booklist.dataProvider = [”Ender’s Game”, “Eon”, “Lord of the Rings”];
myTitle = “This is my Panel”;
}
]]>
</mx:Script>
<mx:Panel title=”{myTitle}” layout=”horizontal” width=”300″ height=”250″>
<mx:Label text=”This is a Label” />
<mx:List id=”booklist”
width=”100%”
height=”100%”
/>
</mx:Panel>
</mx:Application>
- Components are silently firing events all the time.
- Each event has a name that is an attribute of the component.
- The <mx:Application> component fires the event creationComplete, when the application has loaded.
- In the code above, we’ve associated the occurence of this event with the function creationCompleteHandler() in the script
- The creationCompleteHandler() function does two things:
- It supplies the dataProvider attribute of the <mx:List> component with the id booklist with an array of book titles.
- It updates the value of the myTitle variable. The title attribute of the <mx:Panel> component is bound to this variable, so it will receive the title “This is my Panel”
- Check the Flex documentation for the events that each component fires.