Flex 之几个常用MXML标签

时间：2022-10-12 18:54:37


mx:Binding: 可以使用 <mx:Binding> 标签将某个对象的数据绑定到另一个对象。在使用 <mx:Binding> 标签时，需要提供源属性和目标属性。可以使用 <mx:Binding> 标签将视图或用户界面与模型完全分离。通过 <mx:Binding> 标签还可将不同的源属性绑定到同一目标属性。

MXML 语法

<mx:Binding> 标签的语法如下：
    <mx:Binding 
        source="No default."
        destination="No default"
    />
例如，可以将一个表单的名称字段的 text 属性绑定到另一个表单的名称字段的 text 属性，如下所示：
        <mx:Binding 
            source="billForm.name.text"
            destination="shipform.name.text"
        />


mx:Component: 可以使用<mx:Component> 标签在 MXML 文件中定义内嵌项目渲染器或项目编辑器。
<mx:Component> 标签将在 MXML 文件内定义一个新作用域，其中项目渲染器或项目编辑器的本地作用域由 MXML 代码块定义，并由<mx:Component> 和</mx:Component> 标签分隔。要访问项目渲染器或项目编辑器的本地作用域之外的元素，可以在该元素名称前添加outerDocument 关键字作为前缀。
例如，您在主应用程序的作用域中定义了一个名为 localVar 的变量，并在项目渲染器的作用域中定义了另一个同名变量。通过为应用程序的 localVar 添加outerDocument 关键字作为前缀，可以在项目渲染器中访问该变量，如下例所示：
<?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

      <mx: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'}
          ];
        ]]>
      </mx: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>
              <mx:Component>
                <mx:VBox>
                  <mx:Script>
                    <![CDATA[            
                      // Variable in the renderer scope.
                      public var localVar:String="Renderer localVar";       
                    ]]>
                  </mx: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>
              </mx:Component>
            </mx:itemRenderer>
          </mx:DataGridColumn>    
          <mx:DataGridColumn dataField="Price"/>
        </mx:columns>     
      </mx:DataGrid>      
    </mx:Application>
outerDocument 关键字的用途之一是，可以初始化内嵌项目编辑器中控件的数据提供程序。例如，可以使用 Web 服务或其它机制将数据（例如美国州列表）传递给应用程序，然后通过应用程序的一个包含美国州列表的属性，初始化所有用作项目编辑器的 ComboBox 控件。
MXML 语法
<mx:Component> 标签的语法如下：

      <mx:Component
        id=""
        className=""
      >
          ...
          child tags
          ...
      </mx:Component>
不能创建空的 <mx:Component></mx:Component> 标签；必须在 <mx:Component></mx:Component> 标签内至少定义一个子标签。
通过 id 属性可以为内嵌组件指定一个标识符，从而可以将它用作数据绑定表达式的源。
通过 className 属性可以指定 Flex 为内嵌组件生成的类的名称，从而可以在 ActionScript 中引用该组件的元素。

mx:Metadata: 可以使用<mx:Metadata> 标签在 MXML 文件中插入 metadata 标签。Metadata 标签为 Flex 编译器提供了描述在 Flex 应用程序中如何使用 MXML 组件的信息。Metadata 标签不会被编译为可执行代码，但提供了用于控制如何编译相应的代码部分的信息。
请注意，在 <mx:Metadata> 块中只能插入 metadata 标签；不能插入 MXML 或 ActionScript 代码。
例如，可以创建一个定义新事件的 MXML 组件。若要使 Flex 编译器知悉该事件，以便在 MXML 中对其进行引用，可以在该组件中插入 [Event] metadata 标签，如下例所示：
<mx:Metadata>
  [Event("darken")]
</mx:Metadata>
此示例使用元数据将 darken 事件提供给 MXML 编译器。metadata 标签包括 [Event]、[Effect]、[Style]、[Inspectable] 和其它标签。有关详细信息，请参阅《创建和扩展 Flex 组件》一书中的“使用 Metadata 标签”一章。
在 ActionScrip 类文件中使用 metadata 标签时，可以直接将 metadata 标签插入类定义中，而不必使用 <mx:Metadata> 标签。
在 MXML 文件中，可以将 metadata 标签与 ActionScript 代码一起插入 <mx:Script> 块，或将 metadata 标签插入<mx:Metadata> 块，如下例所示：
<?xml version="1.0"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Metadata>
    [Event("enableChange")]
  </mx:Metadata>

  <mx: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);
      }
    ]]>
  </mx:Script>
</mx:TextArea>
MXML 语法
<mx:Metadata> 标签的语法如下：
  <mx:Metadata> 
    <!-- Metadata tags go here. -->
  </mx:Metadata> 


mx:Model: 可以使用 <mx:Model> 标签在 MXML 中声明数据模型。<mx:Model> 标签编译为 ActionScript 对象的树；树叶是一些标量值。
MXML 语法
可以将 <mx:Model> 标签放在 Flex 应用程序文件或 MXML 组件文件中。该标签必须有一个 ID 值，它不能是 MXML 组件的根标签。<mx:Model> 标签的语法如下：
 <mx:Model id="modelID">
   model declaration
 </mx:Model> 
或者:
 <mx:Model id="modelID" source="fileName" />

source 为数据模型指定外部源（如文件）。外部源可包含静态数据和数据绑定表达式。source 属性中引用的文件位于服务器而非客户端计算机上。编译器将读取源值，并将该源编译为应用程序；不会在运行时读取source 值。
模型声明（内嵌在标签或源文件中）必须具有一个包含所有其它节点的单个根节点。可以在模型声明中使用 MXML 绑定表达式，如 {myForm.lastName.text}。这样，就可以将表单字段的内容绑定到结构化数据表示形式。
在以下示例中，将 myEmployee 模型放到 MXML 应用程序文件中：
    <?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    ...
      <mx:Model id="MyEmployee">
        <root>
            <name>
               <first>Will</first>
               <last>Tuckerman</last>
            </name>
            <department>Accounting</department>
            <email>wtuckerman@wilsoncompany.com</email>
        </root>
      </mx:Model>
    ...
    </mx:Application>

mx:Script: 可以使用 <mx:Script> 标签定义 ActionScript 代码块。ActionScript 块可以包含变量和函数定义。可以将 ActionScript 代码块放在标签体中，也可以通过使用标签的source 属性指定源来包括外部文件，如下所示：
<mx:Script source="file_name.as" />
可通过 MXML 文件中的任何组件访问 <mx:Script> 标签中的脚本。<mx:Script> 标签必须位于 MXML 文件的*，并且在 Application 或其它*组件标签内。可以在 MXML 文件中定义多个脚本块，但应尽量将它们保存在一个位置，以提高可读性。
MXML 语法
在标签体中使用脚本块时，必须将这些内容包装在 CDATA 构造中。这可防止编译器将脚本块的内容解释为 XML，并能够正确生成 ActionScript。因此，最好按如下所示编写所有 <mx:Script> 和 </mx:Script> 标签：
 <mx:Script>
   <![CDATA[
       //ActionScript statements
   ]]>
 </mx:Script> 


mx:Style:  可以使用 <mx:Style> 标签定义适用于当前文档及其子项的样式。可以使用 CSS 语法在 <mx:Style> 标签中定义样式，并可定义适用于一个控件的所有实例或适用于各个控件的样式。
如果使用 source 属性引用文件，则该文件必须位于服务器上，而不是位于客户端计算机上。编译器将读取源值，并在编译时将该源编译为应用程序；不会在运行时读取source 值。
MXML 语法
<mx:Style> 标签的语法如下：
<mx:Style [source="style_sheet"]>
  [selector_name {
    style_property: value;
    [...]
  }]
</mx:Style>


mx:XML: <mx:XML> 标签是一个编译时标签，可通过文本模型生成 XML 对象或 XMLNode 对象。该标签具有以下不能直接由 Flash 类提供的功能：

  
  


    

  • 可以指定一个文件作为 XML 文本模型的源。 
    • 
   
   
  • 可以在 XML 文本中使用 MXML 绑定表达式，以便从变量数据中提取节点内容；例如，可以将节点的名称属性绑定到文本输入值，如下行所示：
       <child name="{textInput1.text}"/>
    

    • 
   
   
  • 可以使用 format="xml" 属性生成旧 XMLNode 对象而非 E4X 格式的 XML 对象。 
    • 
  
  




MXML 语法


可以将 <mx:XML> 标签放在 Flex 应用程序文件或 MXML 组件文件中。<mx:XML> 标签必须有一个可由其它组件引用的 id 属性值。如果 <mx:XML> 标签是 <mx:dataProvider> 标签的直接子级，则前一个标签不需要id 属性值。标签体必须具有包含所有子节点的单个根节点。<mx:XML> 标签不能是 MXML 组件的根标签。不能在该标签中指定 Flash XML 或 XMLNode 类属性；必须在 ActionScript 中指定它们。


<mx:XML> 标签的语法如下：


    <mx:XML
       id="modelID"
       format="e4x|xml">
          <root>
             child nodes
          </root>
    </mx:XML> 



或者:


    <mx:XML
       id="modelID"
       format="e4x|xml"
       source="fileName"
       />



e4x 的默认 format 属性值会创建一个 XML 对象，用于实现 ECMA-357 规范（称为“E4X”）中定义的 XML 处理标准。为提供向后兼容性，可以将format 属性设置为xml，以生成 flash.xml.XMLNode 类型的对象。


source 属性为数据模型指定外部源（如文件）。外部源可包含静态数据和数据绑定表达式。编译器将读取源值，并将该源编译为应用程序；不会在运行时读取source 值。


以下示例使用 </mx:XML> 标签为 MenuBar 控件定义模型：




    <?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF">

        <mx: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>
        </mx:XML>


        <mx:MenuBar id="myMenu" labelField="@label" showRoot="true">
            <mx:dataProvider>
                {myMenuModel}
            </mx:dataProvider>
        </mx:MenuBar>

    </mx:Application>






mx:XMLList: <mx:XMLList> 标签是一个编译时标签，可通过文本模型生成 XMLList 对象（由有效的 XML 节点组成）。


与 ActionScript 中的 XMLList 类不同的是，通过此标签可以在 XML 文本中使用 MXML 绑定表达式，以便从变量数据中提取节点内容。例如，可以将节点的名称属性绑定到文本输入值，如下行所示：

<child name="{textInput1.text}"/>


MXML 语法


可以将 <mx:XMLList> 标签放在 Flex 应用程序文件或 MXML 组件文件中。<mx:XMLList> 标签必须有一个可由其它组件引用的 
id 属性值。如果 <mx:XMLList> 标签是 <mx:dataProvider> 标签的直接子级，则前一个标签不需要 id 属性值。<mx:XMLList> 标签不能是 MXML 组件的根标签。


<mx:XMLList> 标签的语法如下：


    <mx:XMLList
       id="list ID">
          model declaration
    </mx:XMLList>



以下示例使用 </mx:XMLList> 标签为 MenuBar 控件定义模型：


    <?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF">

        <mx: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>
        </mx:XMLList>


        <mx:MenuBar id="myMenu" labelField="@label" showRoot="true">
            <mx:dataProvider>
                {myMenuModel}
            </mx:dataProvider>
        </mx:MenuBar>

    </mx:Application>



   

标签：
相关文章