Metaphoria Digitalus

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>

1. Let’s assume this file is named main.mxml. mxml is the file extension for Flex application files.
2. 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.
3. The <?xml ?> tag declares that this document is an XML document, version 1 with utf-8 encoding
4. The basic breakdown of a namespaced tag is this — <namespace:tagName> …stuff… </namespace:tagName>
   1. 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
5. The namespace mx is the default namespace for Flex components.
6. 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.
   1. 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>

1. Every mxml document I’ve seen starts with the <mx:Script> tag right after the <mx:Application> tag.
   1. The script tag is where your ActionScript goes.
   2. 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.
2. The CDATA (character data) block — <![CDATA[ …code… ]]> is marker used in XML to indicate non-markup text.
3. The CDATA wraps scrip code in an mxml file so that the compiler won’t treat it like mark-up.
4. <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>

1. Flex components are manipulated through their attributes. These are like control knobs and most have a limited set of values to choose from.
2. All attributes have the structure attributeName=”value”
3. 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.
4. The <mx:List> component shows an alternate style of listed components with each one on a separate line.
   1. 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.
5. 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>

1. The values of component attributes can be “bound” to values of variables in the script.
   1. The first part of this binding requires the variable to be enhanced with [Bindable].
   2. The second part of the binding is the reference to this bindable variable in the component attribute using the {variableName} syntax.
2. 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>

1. Components are silently firing events all the time.
2. Each event has a name that is an attribute of the component.
3. The <mx:Application> component fires the event creationComplete, when the application has loaded.
   1. In the code above, we’ve associated the occurence of this event with the function creationCompleteHandler() in the script
4. The creationCompleteHandler() function does two things:
   1. It supplies the dataProvider attribute of the <mx:List> component with the id booklist with an array of book titles.
   2. 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”
5. Check the Flex documentation for the events that each component fires.
   

Bookmark It

                   
Hide Sites