Some tags are available in MXML only. The Flex compiler implements these tags; therefore, they are not available in ActionScript.
Tag | Description |
|---|---|
You use the <fx:Binding> tag to tie the data in one object to another object. | |
You use the <fx:Component> tag to define an inline cell renderer or cell editor in an MXML file. | |
You use the <fx:Declarations> tag to declare non-default, non-visual properties of the current class. | |
You use the <fx:Definition> tag inside a <fx:Library> tag to define graphical children that you can then use in other parts of the application. | |
The <fx:DesignLayer> tag is for internal use only. | |
You use the <fx:Library> tag to declar non-default, non-visual properties of the current class. | |
You use the <fx:Metadata> tag to insert metadata tags in an MXML file. | |
You use the <fx:Model> tag to declare a data model in MXML. | |
You use the <fx:Private> tag to provide meta information about the MXML or FXG document. | |
You use the <fx:Reparent> tag to change the parent container of a component as part of a change of view state. | |
You use the <fx:Script> tag to define blocks of ActionScript code. | |
You use the <fx:Style> tag to define styles that apply to the current document and its children. | |
You can declare an XML format data model in MXML in an <fx:XML> tag. | |
You can create an E4X XMLList object from a text-format model in MXML in an <fx:XMLList> tag. |
fx:Binding
You use the <fx:Binding> tag to tie the data in one object to another object. When you use the <fx:Binding> tag, you provide a source property and a destination property. You can use the <fx:Binding> tag to completely separate the view, or user interface, from the model. The <fx:Binding> tag also lets you bind different source properties to the same destination property.
MXML syntax
The <fx:Binding> tag has the following syntax:
<fx:Binding source="No default.>" destination="No default" />;
For example, you might bind the text property of the name field of one form to the text property of the name field of another form, as follows:
<mx:Binding
source="billForm.name.text"
destination="shipform.name.text"
/>fx:Component
You use the <fx:Component> tag to define an inline item renderer or item editor in an MXML file.
The <fx:Component> tag defines a new scope within an MXML file, where the local scope of the item renderer or item editor is defined by the MXML code block delimited by the <fx:Component> and </fx:Component> tags. To access elements outside of the local scope of the item renderer or item editor, you prefix the element name with the outerDocument keyword.
For example, you define one variable named localVar in the scope of the main application, and another variable with the same name in the scope of the item renderer. From within the item renderer, you access the application's localVar by prefixing it with outerDocument keyword, as the following example shows:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
// Variable in the Application scope.
[Bindable]
public var localVar:String="Application localVar";
// Data includes URL to album cover.
private var initDG:Array = [
{ Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99,
Cover:'http://localhost:8100/f15/slanted.jpg'},
{ Artist:'Pavement', Album:'Brighten the Corners', Price:11.99,
Cover:'http://localhost:8100/f15/brighten.jpg'}
];
]]>
</fx:Script>
<mx:DataGrid id="myGrid" dataProvider="{initDG}"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="Artist"/>
<mx:DataGridColumn dataField="Album"/>
<mx:DataGridColumn dataField="Cover">
<mx:itemRenderer>
<fx:Component>
<mx:VBox>
<fx:Script>
<![CDATA[
// Variable in the renderer scope.
public var localVar:String="Renderer localVar";
]]>
</fx:Script>
<mx:Text id="albumName" width="100%" selectable="false" text="{data.Album}"/>
<mx:Image id="albumImage" height="45" source="{data.Cover}"/>
<mx:TextArea text="{'Renderer localVar= ' + localVar}"/>
<mx:TextArea text="{'App localVar= ' + outerDocument.localVar}"/>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="Price"/>
</mx:columns>
</mx:DataGrid>
</s:Application>One use of the outerDocument keyword is to initialize the data provider of a control within the inline item editor. For example, you can use a web service, or other mechanism, to pass data into the application, such as the list of U.S. states. You can then initialize all ComboBox controls that are used as item editors from a single property of the application that contains the list of U.S. states.
MXML syntax
The <fx:Component> tag has the following syntax:
<fx:Component
id=""
className=""
>;
...
child tags
...
</fmx:Component>;You cannot create an empty <fx:Component></fx:Component> tag; you must define at least one child tag within the <fx:Component></fx:Component> tags.
The id property lets you specify an
identifier for the inline component so that you can use it as the
source for a data binding expression.
The className property
lets you specify the name of the class generated by Flex for the
inline component so that you can reference the elements of the component
in ActionScript. For more information, see “Using Item Renderers
and Item Editors” in Using Adobe Flex 4.
fx:Declarations
Use the <fx:Declarations> tag to declare non-default, non-visual properties of the current class. For example, you define effects, validators, and formatters in the body of the <fx:Declarations> tag.
MXML syntax
The <fx:Declarations> tag has the following syntax:
<fx:Declarations> <!-- Non-visual declarations. --> </fx:Declarations>
For example, to apply an effect, you first define it in the <fx:Declarations> tag, and then invoke the effect by calling the Effect.play() method, as the following example shows:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<s:Resize id="myResizeEffect"
target="{myImage}"
widthBy="10" heightBy="10"/>
</fx:Declarations>
<mx:Image id="myImage"
source="@Embed(source='assets/logo.jpg')"/>
<s:Button label="Resize Me"
click="myResizeEffect.end();myResizeEffect.play();"/>
</s:Application>fx:Definition
Use one or more <fx:Definition> tags inside a <fx:Library> tag to define graphical children that you can then use in other parts of the application. A <fx:Library> tag can have any number of <fx:Definition> tags as children. An element in the <fx:Definition> tag is not instantiated or added to the display list until it is added as a tag outside of the <fx:Library> tag.
MXML syntax
The <fx:Definition> tag has the following syntax:
<fx:Library>
<fx:Definition name=defName>
<!-- Graphical children. -->
</fx:Definition>
...
<fx:Definition name=defName>
<!-- Graphical children. -->
</fx:Definition>
</fx:Library>The <fx:Definition> tag must define a name attribute. You use the attribute as the tag name when instantiating the element.
The following example defines the MyCircle and MySquare graphics with the Definition tags. It then instantiates several instances of these in the application file:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Library>
<fx:Definition name="MySquare">
<s:Group>
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="red"/>
</s:stroke>
</s:Rect>
</s:Group>
</fx:Definition>
<fx:Definition name="MyCircle">
<s:Group>
<s:Ellipse width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="blue"/>
</s:stroke>
</s:Ellipse>
</s:Group>
</fx:Definition>
</fx:Library>
<mx:Canvas>
<fx:MySquare x="0" y="0" height="20" width="20"/>
<fx:MySquare x="25" y="0" height="20" width="20"/>
<fx:MyCircle x="50" y="0" height="20" width="20"/>
<fx:MyCircle x="0" y="25" height="20" width="20"/>
<fx:MySquare x="25" y="25" height="20" width="20"/>
<fx:MySquare x="50" y="25" height="20" width="20"/>
<fx:MyCircle x="0" y="50" height="20" width="20"/>
<fx:MyCircle x="25" y="50" height="20" width="20"/>
<fx:MySquare x="50" y="50" height="20" width="20"/>
</mx:Canvas>
</s:Application>Each Definition in the <fx:Library> tag is compiled into a separate ActionScript class. that is a subclass of the type represented by the first node in the definition. In the previous example, the new class is a subclass of mx.graphics.Group. This scope of this class is limited to the document. It should be treated as a private ActionScript class.
fx:DesignLayer
The <fx: DesignLayer> tag is for internal use only.
fx:Library
You use the <fx:Library> tag to define zero or more named graphic <fx:Definition> children. The definition itself in a library is not an instance of that graphic, but it lets you reference that definition any number of times in the document as an instance.
MXML syntax
The <fx:Library> tag has the following syntax:
<fx:Library>
<fx:Definition name=defName>
<!-- Non-visual declarations. -->
</fx:Definition>
...
<fx:Definition name=defName>
<!-- Non-visual declarations. -->
</fx:Definition>
</fx:Library>The <fx:Library> tag must be the first child of the document’s root tag. You can only have one <fx:Library> tag per document.
The following example defines a single graphic in the <fx:Library> tag, and then uses it three times in the application:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Library>
<fx:Definition name="MyTextGraphic">
<s:Group>
<s:Label width="75">
<s:text>Hello World!</s:text>
</s:Label>
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="red"/>
</s:stroke>
</s:Rect>
</s:Group>
</fx:Definition>
</fx:Library>
<s:VGroup left="20" top="20">
<fx:MyTextGraphic/>
<fx:MyTextGraphic/>
<fx:MyTextGraphic/>
</s:VGroup>
</s:Application>Each
fx:Metadata
You use the <fx:Metadata> tag to insert metadata tags in an MXML file. Metadata tags provide information to the Flex compiler that describes how your MXML components are used in a Flex application. Metadata tags do not get compiled into executable code, but provide information to control how portions of your code get compiled.
You can only insert metadata tags in the <fx:Metadata> block; you cannot insert MXML or ActionScript code.
For example, you may create an MXML component that defines a new event. To make that event known to the Flex compiler so that you can reference it in MXML, you insert the [Event] metadata tag into your component, as the following example shows:
<fx:Metadata>;
[Event("darken")]
</fx:Metadata>;In this example, you use metadata to make the darken event available to the MXML compiler. Metadata tags include [Event], [Effect], [Style], [Inspectable], and others. For more information, see “Using Metadata Tags” in Creating and Extending Flex Components.
When using metadata tags in ActionScrip class files, you insert the metadata tag directly into the class definition; you do not use the <fx:Metadata> tag.
In an MXML file, you insert the metadata tags either in an <fx:Script> block along with your ActionScript code, or in an <fx:Metadata> block, as the following example shows:
<?xml version="1.0"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">
<fx:Metadata>
[Event("enableChange")]
</fx:Metadata>
<fx:Script>
<![CDATA[
// Import Event class.
import flash.events.Event;
// Define class properties/methods
private var _enableTA:Boolean;
// Add the [Inspectable] metadata tag before the individual property.
[Inspectable(defaultValue="false")]
public function set enableTA(val:Boolean):void {
_enableTA = val;
this.enabled = val;
// Define event object, initialize it, then dispatch it.
var eventObj:Event = new Event("enableChange");
dispatchEvent(eventObj);
}
]]>
</fx:Script>
</mx:TextArea>
<Rob, should “/mx” above be “/fx”? Also appears
in second line of code example.-ls>
MXML syntax
The <fx:Metadata> tag has the following syntax:
<fx:Metadata>
<!-- Metadata tags go here. -->
</fx:Metadata> fx:Model
You use the <fx:Model> tag to declare a data model in MXML. An <fx:Model> tag is compiled into a tree of ActionScript objects; the leaves of the tree are scalar values.
MXML syntax
You can place an <fx:Model> tag in a Flex application file, or in an MXML component file. The tag must have an id value. It cannot be the root tag of an MXML component. The <fx:Model> tag has the following syntax:
<fx:Model id="modelID"><br> model declaration<br> </fx:Model>
or:
<fx:Model id="modelID" source="fileName" />
where source specifies an external source, such as a file, for the data model. The external source can contain static data and data binding expressions. The file referenced in a source property resides on the server and not on the client machine. The compiler reads the source value and compiles the source into the application; the source value is not read at runtime.
The model declaration, either in-line in the tag or in the source file, must have a single root node that contains all other nodes. You can use MXML binding expressions, such as {myForm.lastName.text} in the model declaration. This way you can bind the contents of form fields to a structured data representation
In the following example, the myEmployee model is placed in an MXML application file:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"">
...
<fx:Model id="MyEmployee">
<root>
<name>
<first>Will</first>
<last>Tuckerman</last>
</name>
<department>Accounting</department>
<email>wtuckerman@wilsoncompany.com</email>
</root>
</fx:Model>
...
</s:Application>fx:Private
Use the <fx:Private> tag to provide meta information about the MXML or FXG document. The compiler ignores all content of the <fx:Private> tag, although it must be valid XML. The XML can be empty, contain arbitrary tags, or contain a string of characters.
MXML syntax
The <fx:Private> tag has the following syntax:
<fx:Private>
<!-- Private declarations. -->
</fx:Private>The <fx:Private> tag must be a child of the root document tag, and it must be the last tag in the file.
The following example adds private information about the author and date to the MXML file:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"">
<mx:Canvas top="0" bottom="0" left="0" right="0">
<s:Graphic>
<s:TextGraphic x="0" y="0">
<content>Hello World!</content>
</s:TextGraphic>
</s:Graphic>
</mx:Canvas>
<fx:Private>
<Date>10/22/2008</Date>
<Author>Nick Danger</Author>
</fx:Private>
</s:Application>fx:Reparent
Use the <fx:Reparent> tag to change the parent container of a component as part of a change of view state.
MXML syntax
You can place an <fx:Reparent> tag in a Flex application file, or in an MXML component file. You can use the <fx:Reparent> tag in any parent component that can hold a child component, and the child can use the includeIn or excludeFrom keywords.
The <fx:Reparent> tag has the following syntax:
<fx:Reparent target="targetComp" includeIn="stateName">
where target specifies the target component, and includeIn specifies a view state. When the current view state is set to stateName, the target component becomes a child of the parent component of the <fx:Reparent> tag.
The following example uses the <fx:Reparent> tag to switch a Button control between two VBox containers in an HDividedBox container:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:states>
<s:State name="Parent1"/>
<s:State name="Parent2"/>
</s:states>
<mx:HDividedBox height="25%" width="100%" borderStyle="inset">
<mx:VBox id="VB1" height="100%" width="100%" borderStyle="inset">
<mx:Label text="VB1"/>
<mx:Button id="setCB" includeIn="Parent1"/>
</VBox>
<mx:VBox id="VB2" height="100%" width="100%" borderStyle="inset">
<mx:Label text="VB2"/>
<fx:Reparent target="setCB" includeIn="Parent2"/>
</VBox>
</mx:HDividedBox>
<s:Group>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="Parent 1"
click="currentState='Parent1'"
enabled.Parent1="false"/>
<s:Button label="Parent 2"
click="currentState='Parent2'"
enabled.Parent2="false"/>
</s:Group>
</s:Application>fx:Script
Use the <fx:Script> tag to define blocks of ActionScript code. ActionScript blocks can contain variable and function definitions. You can place blocks of ActionScript code in the body of the tag, or you can include an external file by specifying the source with the source property of the tag, as shown below:
<fx:Script source="file_name.as" />
The script within an <fx:Script> tag is accessible from any component in the MXML file. The <fx:Script> tag must be located at the top level of the MXML file, within the Application or other top level component tag. You can define multiple script blocks in your MXML files, but you should try to keep them in one location to improve readability.
MXML syntax
When using a script block in the body of the tag, you must wrap the contents in a CDATA construct. This prevents the compiler from interpreting the contents of the script block as XML, and allows ActionScript to be properly generated. As a result, it is a good practice to write all your <fx:Script> and </fx:Script> tags as follows:
<fx:Script><br> <![CDATA[<br /> //ActionScript statements<br /> ]]><br /> </fx:Script>
fx:Style
You use the <fx:Style> tag to define styles that apply to the current document and its children. You define styles in the <fx:Style> tag using CSS syntax and can define styles that apply to all instances of a control or to individual controls.
You can also point to an external CSS file that should be included by using the source property. If you reference a file by using the source property, that file must reside on the server and not on the client machine. The compiler reads the source value and compiles the source into the application at compile-time; the source value is not read at runtime.
The following example specifies an external CSS file with the source property:
<fx:Style source='../assets/styles/MyStyles.css'/>
You can use type and class selectors inside the Style tag’s CSS block.
The following example uses a type selector to apply the same color to all instances of a Button class:
<fx:Style/>
Button {
color:red;
}
</fx:Style/>The following example uses a class selector to apply the same color to all components whose styleName property is set to myStyle:
<fx:Style/>
.myStyle {
color:red;
}
</fx:Style/>MXML syntax
The <fx:Style> tag has the following syntax:
<fx:Style [source="style_sheet"]>
[selector_name {
style_property: value;
[...]
}]
</fx:Style>fx:XML
The <fx:XML> tag is a compile-time tag that generates an XML object or XMLNode object from a text model. The tag has the following features that are not provided directly by the Flash classes:
You can specify a file as the source of the XML text model.
You can use MXML binding expressions in the XML text to extract node contents from variable data; for example, you could bind a node's name attribute to a text input value, as in the following line:
<child name="{textInput1.text}"/>You can use the format="xml" attribute to generate a legacy XMLNode object instead of an E4X-format XML object.
MXML syntax
You can place an <fx:XML> tag in a Flex application file or in an MXML component file. The <fx:XML> tag must have an id attribute value to be referenced by another component. The <fx:XML> tag does not need an id attribute value if the tag is a direct child of an <mx:dataProvider> tag. The tag body must have a single root node containing all child nodes. The <fx:XML> tag cannot be the root tag of an MXML component. You cannot specify Flash XML or XMLNode class properties in the tag; you must specify these in ActionScript.
The <fx:XML> tag has the following syntax:
<fx:XML
id="modelID"
format="e4x|xml">
<root>
child nodes
</root>
</fx:XML> or
<fx:XML
id="modelID"
format="e4x|xml"
source="fileName"
/>The default format property value of e4x creates an XML object, which implements the XML-handling standards defined in the ECMA-357 specification (known as "E4X"). For backward compatibility, you can set the format property to xml to generate an object of the type flash.xml.XMLNode.
The source property specifies an external source, such as a file, for the data model. The external source can contain static data and data binding expressions. The compiler reads the source value and compiles the source into the application; the source value is not read at runtime.
The following example uses the tag to define a model for a MenuBar control:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
backgroundColor="#FFFFFF">
<fx:XML format="e4x" id="myMenuModel">
<root label="Menu">
<menuitem label="MenuItem A">
<menuitem label="SubMenuItem 1-A"/>
<menuitem label="SubMenuItem 2-A" />
</menuitem>
<menuitem label="MenuItem B"/>
<menuitem label="MenuItem C" type="check"/>
<menuitem type="separator"/>
<menuitem label="MenuItem D">
<menuitem label="SubMenuItem 1-D" type="radio" groupName="one"/>
<menuitem label="SubMenuItem 2-D" type="radio" groupName="one"/>
<menuitem label="SubMenuItem 3-D" type="radio" groupName="one"/>
</menuitem>
</root>
</fx:XML>
<mx:MenuBar id="myMenu" labelField="@label" showRoot="true">
<mx:dataProvider>
{myMenuModel}
</mx:dataProvider>
</mx:MenuBar>
</s:Application>fx:XML List
The <fx:XMLList> tag is a compile-time tag that generates an XMLList object from a text model that consists of valid XML nodes.�Unlike the XMLList class in ActionScript, this tag lets you use MXML binding expressions in the XML text to extract node contents from variable data. For example, you can bind a node's name attribute to a text input value, as in the following line:
<child name="{textInput1.text}"/>MXML syntax
You can place an <fx:XMLList> tag in a Flex application file or in an MXML component file. The <fx:XMLList> tag must have an id attribute value to be referenced by another component. The <fx:XMLList> tag does not need an id attribute value if the tag is a direct child of an <mx:dataProvider> tag. The <fx:XMLList> tag cannot be the root tag of an MXML component.
The <fx:XMLList> tag has the following syntax:
<fx:XMLList
id="list ID">
model declaration
</fx:XMLList>The following example uses the tag to define a model for MenuBar control:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
backgroundColor="#FFFFFF">
<fx:XMLList id="myMenuModel">
<menuitem label="MenuItem A" >
<menuitem label="SubMenuItem 1-A" />
<menuitem label="SubMenuItem 2-A" />
</menuitem>
<menuitem label="MenuItem B" />
<menuitem label="MenuItem C" type="check" />
<menuitem type="separator" />
<menuitem label="MenuItem D" >
<menuitem label="SubMenuItem 1-D" type="radio" groupName="one" />
<menuitem label="SubMenuItem 2-D" type="radio" groupName="one" />
<menuitem label="SubMenuItem 3-D" type="radio" groupName="one" />
</menuitem>
</fx:XMLList>
<mx:MenuBar id="myMenu" labelField="@label" showRoot="true">
<mx:dataProvider>
{myMenuModel}
</mx:dataProvider>
</mx:MenuBar>
</s:Application>MXML syntax
The <fx:Binding> tag has the following syntax:
<fx:Binding source="No default.>" destination="No default" />;
For example, you might bind the text property of the name field of one form to the text property of the name field of another form, as follows:
<mx:Binding
source="billForm.name.text"
destination="shipform.name.text"
/>MXML syntax
The <fx:Component> tag has the following syntax:
<fx:Component
id=""
className=""
>;
...
child tags
...
</fmx:Component>;You cannot create an empty <fx:Component></fx:Component> tag; you must define at least one child tag within the <fx:Component></fx:Component> tags.
The id property lets you specify an
identifier for the inline component so that you can use it as the
source for a data binding expression.
The className property
lets you specify the name of the class generated by Flex for the
inline component so that you can reference the elements of the component
in ActionScript. For more information, see “Using Item Renderers
and Item Editors” in Using Adobe Flex 4.
MXML syntax
The <fx:Declarations> tag has the following syntax:
<fx:Declarations> <!-- Non-visual declarations. --> </fx:Declarations>
For example, to apply an effect, you first define it in the <fx:Declarations> tag, and then invoke the effect by calling the Effect.play() method, as the following example shows:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<s:Resize id="myResizeEffect"
target="{myImage}"
widthBy="10" heightBy="10"/>
</fx:Declarations>
<mx:Image id="myImage"
source="@Embed(source='assets/logo.jpg')"/>
<s:Button label="Resize Me"
click="myResizeEffect.end();myResizeEffect.play();"/>
</s:Application>MXML syntax
The <fx:Definition> tag has the following syntax:
<fx:Library>
<fx:Definition name=defName>
<!-- Graphical children. -->
</fx:Definition>
...
<fx:Definition name=defName>
<!-- Graphical children. -->
</fx:Definition>
</fx:Library>The <fx:Definition> tag must define a name attribute. You use the attribute as the tag name when instantiating the element.
The following example defines the MyCircle and MySquare graphics with the Definition tags. It then instantiates several instances of these in the application file:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Library>
<fx:Definition name="MySquare">
<s:Group>
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="red"/>
</s:stroke>
</s:Rect>
</s:Group>
</fx:Definition>
<fx:Definition name="MyCircle">
<s:Group>
<s:Ellipse width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="blue"/>
</s:stroke>
</s:Ellipse>
</s:Group>
</fx:Definition>
</fx:Library>
<mx:Canvas>
<fx:MySquare x="0" y="0" height="20" width="20"/>
<fx:MySquare x="25" y="0" height="20" width="20"/>
<fx:MyCircle x="50" y="0" height="20" width="20"/>
<fx:MyCircle x="0" y="25" height="20" width="20"/>
<fx:MySquare x="25" y="25" height="20" width="20"/>
<fx:MySquare x="50" y="25" height="20" width="20"/>
<fx:MyCircle x="0" y="50" height="20" width="20"/>
<fx:MyCircle x="25" y="50" height="20" width="20"/>
<fx:MySquare x="50" y="50" height="20" width="20"/>
</mx:Canvas>
</s:Application>Each Definition in the <fx:Library> tag is compiled into a separate ActionScript class. that is a subclass of the type represented by the first node in the definition. In the previous example, the new class is a subclass of mx.graphics.Group. This scope of this class is limited to the document. It should be treated as a private ActionScript class.
MXML syntax
The <fx:Library> tag has the following syntax:
<fx:Library>
<fx:Definition name=defName>
<!-- Non-visual declarations. -->
</fx:Definition>
...
<fx:Definition name=defName>
<!-- Non-visual declarations. -->
</fx:Definition>
</fx:Library>The <fx:Library> tag must be the first child of the document’s root tag. You can only have one <fx:Library> tag per document.
The following example defines a single graphic in the <fx:Library> tag, and then uses it three times in the application:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Library>
<fx:Definition name="MyTextGraphic">
<s:Group>
<s:Label width="75">
<s:text>Hello World!</s:text>
</s:Label>
<s:Rect width="100%" height="100%">
<s:stroke>
<s:SolidColorStroke color="red"/>
</s:stroke>
</s:Rect>
</s:Group>
</fx:Definition>
</fx:Library>
<s:VGroup left="20" top="20">
<fx:MyTextGraphic/>
<fx:MyTextGraphic/>
<fx:MyTextGraphic/>
</s:VGroup>
</s:Application>Each
MXML syntax
The <fx:Metadata> tag has the following syntax:
<fx:Metadata>
<!-- Metadata tags go here. -->
</fx:Metadata> MXML syntax
You can place an <fx:Model> tag in a Flex application file, or in an MXML component file. The tag must have an id value. It cannot be the root tag of an MXML component. The <fx:Model> tag has the following syntax:
<fx:Model id="modelID"><br> model declaration<br> </fx:Model>
or:
<fx:Model id="modelID" source="fileName" />
where source specifies an external source, such as a file, for the data model. The external source can contain static data and data binding expressions. The file referenced in a source property resides on the server and not on the client machine. The compiler reads the source value and compiles the source into the application; the source value is not read at runtime.
The model declaration, either in-line in the tag or in the source file, must have a single root node that contains all other nodes. You can use MXML binding expressions, such as {myForm.lastName.text} in the model declaration. This way you can bind the contents of form fields to a structured data representation
In the following example, the myEmployee model is placed in an MXML application file:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"">
...
<fx:Model id="MyEmployee">
<root>
<name>
<first>Will</first>
<last>Tuckerman</last>
</name>
<department>Accounting</department>
<email>wtuckerman@wilsoncompany.com</email>
</root>
</fx:Model>
...
</s:Application>MXML syntax
The <fx:Private> tag has the following syntax:
<fx:Private>
<!-- Private declarations. -->
</fx:Private>The <fx:Private> tag must be a child of the root document tag, and it must be the last tag in the file.
The following example adds private information about the author and date to the MXML file:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"">
<mx:Canvas top="0" bottom="0" left="0" right="0">
<s:Graphic>
<s:TextGraphic x="0" y="0">
<content>Hello World!</content>
</s:TextGraphic>
</s:Graphic>
</mx:Canvas>
<fx:Private>
<Date>10/22/2008</Date>
<Author>Nick Danger</Author>
</fx:Private>
</s:Application>MXML syntax
You can place an <fx:Reparent> tag in a Flex application file, or in an MXML component file. You can use the <fx:Reparent> tag in any parent component that can hold a child component, and the child can use the includeIn or excludeFrom keywords.
The <fx:Reparent> tag has the following syntax:
<fx:Reparent target="targetComp" includeIn="stateName">
where target specifies the target component, and includeIn specifies a view state. When the current view state is set to stateName, the target component becomes a child of the parent component of the <fx:Reparent> tag.
The following example uses the <fx:Reparent> tag to switch a Button control between two VBox containers in an HDividedBox container:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:states>
<s:State name="Parent1"/>
<s:State name="Parent2"/>
</s:states>
<mx:HDividedBox height="25%" width="100%" borderStyle="inset">
<mx:VBox id="VB1" height="100%" width="100%" borderStyle="inset">
<mx:Label text="VB1"/>
<mx:Button id="setCB" includeIn="Parent1"/>
</VBox>
<mx:VBox id="VB2" height="100%" width="100%" borderStyle="inset">
<mx:Label text="VB2"/>
<fx:Reparent target="setCB" includeIn="Parent2"/>
</VBox>
</mx:HDividedBox>
<s:Group>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="Parent 1"
click="currentState='Parent1'"
enabled.Parent1="false"/>
<s:Button label="Parent 2"
click="currentState='Parent2'"
enabled.Parent2="false"/>
</s:Group>
</s:Application>MXML syntax
When using a script block in the body of the tag, you must wrap the contents in a CDATA construct. This prevents the compiler from interpreting the contents of the script block as XML, and allows ActionScript to be properly generated. As a result, it is a good practice to write all your <fx:Script> and </fx:Script> tags as follows:
<fx:Script><br> <![CDATA[<br /> //ActionScript statements<br /> ]]><br /> </fx:Script>
MXML syntax
The <fx:Style> tag has the following syntax:
<fx:Style [source="style_sheet"]>
[selector_name {
style_property: value;
[...]
}]
</fx:Style>MXML syntax
You can place an <fx:XML> tag in a Flex application file or in an MXML component file. The <fx:XML> tag must have an id attribute value to be referenced by another component. The <fx:XML> tag does not need an id attribute value if the tag is a direct child of an <mx:dataProvider> tag. The tag body must have a single root node containing all child nodes. The <fx:XML> tag cannot be the root tag of an MXML component. You cannot specify Flash XML or XMLNode class properties in the tag; you must specify these in ActionScript.
The <fx:XML> tag has the following syntax:
<fx:XML
id="modelID"
format="e4x|xml">
<root>
child nodes
</root>
</fx:XML> or
<fx:XML
id="modelID"
format="e4x|xml"
source="fileName"
/>The default format property value of e4x creates an XML object, which implements the XML-handling standards defined in the ECMA-357 specification (known as "E4X"). For backward compatibility, you can set the format property to xml to generate an object of the type flash.xml.XMLNode.
The source property specifies an external source, such as a file, for the data model. The external source can contain static data and data binding expressions. The compiler reads the source value and compiles the source into the application; the source value is not read at runtime.
The following example uses the tag to define a model for a MenuBar control:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
backgroundColor="#FFFFFF">
<fx:XML format="e4x" id="myMenuModel">
<root label="Menu">
<menuitem label="MenuItem A">
<menuitem label="SubMenuItem 1-A"/>
<menuitem label="SubMenuItem 2-A" />
</menuitem>
<menuitem label="MenuItem B"/>
<menuitem label="MenuItem C" type="check"/>
<menuitem type="separator"/>
<menuitem label="MenuItem D">
<menuitem label="SubMenuItem 1-D" type="radio" groupName="one"/>
<menuitem label="SubMenuItem 2-D" type="radio" groupName="one"/>
<menuitem label="SubMenuItem 3-D" type="radio" groupName="one"/>
</menuitem>
</root>
</fx:XML>
<mx:MenuBar id="myMenu" labelField="@label" showRoot="true">
<mx:dataProvider>
{myMenuModel}
</mx:dataProvider>
</mx:MenuBar>
</s:Application>MXML syntax
You can place an <fx:XMLList> tag in a Flex application file or in an MXML component file. The <fx:XMLList> tag must have an id attribute value to be referenced by another component. The <fx:XMLList> tag does not need an id attribute value if the tag is a direct child of an <mx:dataProvider> tag. The <fx:XMLList> tag cannot be the root tag of an MXML component.
The <fx:XMLList> tag has the following syntax:
<fx:XMLList
id="list ID">
model declaration
</fx:XMLList>The following example uses the tag to define a model for MenuBar control:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
backgroundColor="#FFFFFF">
<fx:XMLList id="myMenuModel">
<menuitem label="MenuItem A" >
<menuitem label="SubMenuItem 1-A" />
<menuitem label="SubMenuItem 2-A" />
</menuitem>
<menuitem label="MenuItem B" />
<menuitem label="MenuItem C" type="check" />
<menuitem type="separator" />
<menuitem label="MenuItem D" >
<menuitem label="SubMenuItem 1-D" type="radio" groupName="one" />
<menuitem label="SubMenuItem 2-D" type="radio" groupName="one" />
<menuitem label="SubMenuItem 3-D" type="radio" groupName="one" />
</menuitem>
</fx:XMLList>
<mx:MenuBar id="myMenu" labelField="@label" showRoot="true">
<mx:dataProvider>
{myMenuModel}
</mx:dataProvider>
</mx:MenuBar>
</s:Application>Thu May 20 2010, 02:36 AM -07:00