`

MXML语言简介

    博客分类：
  • Flex
 
阅读更多

1. MXML语法

MXML语言是专门用于Flex程序中，描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局，控制组件的样式和外观，也可以构建非可视化的对象，比如XML数据、与服务器端通信的WebService、组件的数据源等。

    1.1 命名规范

MXML区分大小写，且文件名和变量标示名都区分大小写。

MXML文件以mxml作为扩展名，文件名要遵循AS中变量的命名规则。

所有的MXML都被视为用户自定义的组件，相当于对象，可以使用代码动态创建。

变量名必须以字母或下划线开始，且只能包含字母、数字和下划线。

不能命名为application ，application 是主程序文件的默认标记，不可再使用。

 程序不能使用“mx”做为目录名，mx 是官方组件库的命名空间。

    2.2 MXML 文件结构

 MXML为标准的XML文件。

我们以一个MXML文件来说明：

Xml代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
  3.        
  4.     <mx:Script>  
  5.         <![CDATA[  
  6.             internal function doClick():void{  
  7.                 tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';  
  8.             }  
  9.         ]]>  
  10.     </mx:Script>  
  11.        
  12.     <mx:Button x="41" y="90" label="Hello Flex" click="doClick()"/>  
  13.     <mx:Label id="tip_txt" x="41" y="41" text="你好，Flex" fontSize="12"/>      
  14. </mx:Application>   
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Script>
		<![CDATA[
			internal function doClick():void{
				tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
			}
		]]>
	</mx:Script>
	
	<mx:Button x="41" y="90" label="Hello Flex" click="doClick()"/>
	<mx:Label id="tip_txt" x="41" y="41" text="你好，Flex" fontSize="12"/>	
</mx:Application>

第一行声明XML文件采用的语法版本version 和编码格式encoding（默认为utf-8）。

mx:Application：在每个Flex项目中，可能有多个MXML文件，mx:Application为根节点标示程序入口的运行文件。

xmlns:mx=http://www.adobe.com/2006/mxml ：将mx定义为XML的命名空间，对应路径为http://www.adobe.com/2006/mxml ，Flex的配置文件中将这个路径定义为一个全局资源标识符，并对应了一个列出mx命名空间下的所有标签的文件。flex-config.xml中配置了命名空间。该文件可在Flex Builder2的安装路径下的Flex SDK 2\frameworks目录中找到。并找到如下代码。

Xml代码 复制代码 收藏代码
  1. <namespaces>  
  2.    <!-- Specify a URI to associate with a manifest of components for use as MXML -->  
  3.    <!-- elements.                                                                -->  
  4.    <namespace>  
  5.       <uri>http://www.adobe.com/2006/mxml</uri>  
  6.       <manifest>mxml-manifest.xml</manifest>  
  7.    </namespace>  
  8. </namespaces>   
      <namespaces>
         <!-- Specify a URI to associate with a manifest of components for use as MXML -->
         <!-- elements.                                                                -->
         <namespace>
            <uri>http://www.adobe.com/2006/mxml</uri>
            <manifest>mxml-manifest.xml</manifest>
         </namespace>
      </namespaces>

从上面的配置发现，http://www.adobe.com/2006/mxml 这个URI和mxml-manifest.xml文件对应，找到该文件，里面列出了所有标签和与标签相关联的类文件路径。

Xml代码 复制代码 收藏代码
  1. <?xml version="1.0"?>  
  2. <componentPackage>  
  3.   
  4.     <component id="Accordion" class="mx.containers.Accordion"/>  
  5. ....................   
  6. ....................   
  7.     <component id="WebServiceOperation" class="mx.rpc.soap.mxml.Operation"/>  
  8.     <component id="RemoteObject" class="mx.rpc.remoting.mxml.RemoteObject"/>  
  9.     <component id="RemoteObjectOperation" class="mx.rpc.remoting.mxml.Operation"/>  
  10.     <component id="HTTPService" class="mx.rpc.http.mxml.HTTPService"/>  
  11.     <component id="Consumer" class="mx.messaging.Consumer"/>  
  12.     <component id="Producer" class="mx.messaging.Producer"/>  
  13.   
  14. </componentPackage>   
<?xml version="1.0"?>
<componentPackage>

    <component id="Accordion" class="mx.containers.Accordion"/>
....................
....................
    <component id="WebServiceOperation" class="mx.rpc.soap.mxml.Operation"/>
    <component id="RemoteObject" class="mx.rpc.remoting.mxml.RemoteObject"/>
    <component id="RemoteObjectOperation" class="mx.rpc.remoting.mxml.Operation"/>
    <component id="HTTPService" class="mx.rpc.http.mxml.HTTPService"/>
    <component id="Consumer" class="mx.messaging.Consumer"/>
    <component id="Producer" class="mx.messaging.Producer"/>

</componentPackage>

 <component id="Accordion" class="mx.containers.Accordion"/>
中的id代表标签名，class表示类文件路径。

 

 xmlns:comp="comps.*" 定义一个命名空间，因为使用了通配符“*”，comps目录下的所有MXML和AS类（不包括子目录的文件）都被包括在comp命名空间下。如comps下有Login.mxml，则在程序中可这样调用：

<comp:Login></comp:Login>

 

Application 还有一个属性layout ，定义了该节点下元素的布局方式，也就是程序的总体布局方式。absolute 表示绝对定位，所有子元素将按照各自的x、y坐标来定位。

 

 2. 使用组件

<mx:Button></mx:Button> 定义一个按钮组件

如果组件中未包含其他子元素可这样写：<mx:Button />

    组件分类：

布局类： 包括所有的容器组件，如：HBox、Panel等，Spacer、HRule、VRule不是容器，但是主要用于布局。

导航类： 菜单条、按钮条等各种导航功能的组件。

交互类： 内容展示、数据交互相关组件，如：按钮、下拉框、图片、视频等。

 

    IDE中的组件面板列出了所有的可视化组件， 可直接拖入编辑区使用。

    通过IDE的代码提示输入<mx:跟进可以列出mx下的所有对象。

 

3. 自定义MXML组件

基于组件开发模式是Flex的一个特色，程序中所有的MXML和AS类文件，都被当作用户自定义的组件。

我们来建一个MXML组件：

New->MXML Component

在弹出的窗口输入组件的文件名Filename，并选择扩展哪一种组件Based on，我们这里选择Image对象。然后Finish。

然后点击Image组件，在属性面板的Source属性设置图片的路径。

Xml代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" source="pic/9.jpg">  
  3. </mx:Image>   
<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" source="pic/9.jpg">
</mx:Image>

 

然后在程序中就可以使用该自定义的组件，将其从用户面板拖入到编辑区，图片显示正常。

Xml代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">  
  3.        
  4.     <mx:Script>  
  5.         <![CDATA[  
  6.             internal function doClick():void{  
  7.                 private function _btn_click(event:MouseEvent):void{  
  8.   tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';  
  9. }          }  
  10.         ]]>  
  11.     </mx:Script>  
  12.        
  13.     <mx:Button x="41" y="90" label="Hello Flex" click="doClick()"/>  
  14.     <mx:Label id="tip_txt" x="41" y="41" text="你好，Flex" fontSize="12"/>      
  15.     <ns1:imageEnboga x="205" y="90"/>  
  16. </mx:Application>   
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
	
	<mx:Script>
		<![CDATA[
			internal function doClick():void{
				private function _btn_click(event:MouseEvent):void{
  tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
} 			}
		]]>
	</mx:Script>
	
	<mx:Button x="41" y="90" label="Hello Flex" click="doClick()"/>
	<mx:Label id="tip_txt" x="41" y="41" text="你好，Flex" fontSize="12"/>	
	<ns1:imageEnboga x="205" y="90"/>
</mx:Application>

 <ns1:imageEnboga x="205" y="90"/>
就是我们拖入的自定义组件，程序自动添加了ns1命名空间。我们改变自定义组件的位置放到view文件夹，代码变成：

<view:imageEnboga x="205" y="90"/>

 

4. 编写ActionScript

    MXML文件经过编译最后也是被转换成AS来执行，在一个Flex程序中，主程序会被转换为Application对象的子类，自定义对象会被转换为父级对象的子类。

4.1 在MXML中使用AS

在组件的事件属性中使用AS来处理事件

比如

Xml代码 复制代码 收藏代码
  1. <mx:Button x="41" y="90" label="Hello Flex" click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"/>  
<mx:Button x="41" y="90" label="Hello Flex" click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"/>

上面代码中的click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"会被编译为

Xml代码 复制代码 收藏代码
  1. private function _btn_click(event:MouseEvent):void{     
  2.     tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';   
  3. }  
private function _btn_click(event:MouseEvent):void{  
    tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
}

这个函数被注册为按钮的点击事件侦听器，一旦点击事件触发，函数就会被调用。

 

在MXML中插入AS块

Xml代码 复制代码 收藏代码
  1. <mx:Script>  
  2.     <![CDATA[  
  3.     //这里是AS代码  
  4.     ]]>  
  5. </mx:Script>   
<mx:Script>
    <![CDATA[
    //这里是AS代码
    ]]>
</mx:Script>

此标签可以放在根节点内的任何位置，同时必须用CDATA将代码包起来。CDATA不能嵌套使用。

AS中的注释是 //单行注释    /*多行注释*/

MXML中的注释和XML一样<!-- 注释-->

 

4.2 创建外部AS文件

New->ActionScript file 可以创建一个外部AS文件

Xml代码 复制代码 收藏代码
  1. <mx:Script source="my.as"/>  
<mx:Script source="my.as"/>

在程序中可以使用上面的代码导入。

 

4.3 创建AS类文件

New->ActionScript Class 可以创建一个AS类文件

Xml代码 复制代码 收藏代码
  1. package   
  2. {   
  3.     public class Test   
  4.     {   
  5.         function Test(){   
  6.             trace("Test");   
  7.         }   
  8.     }   
  9. }  
package
{
    public class Test
    {
		function Test(){
			trace("Test");
		}
    }
}

上面代码创建了一个Test类，在构造函数Test()中在控制台打印Test。

在主程序中可调用：

Xml代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initApp()">  
  3.        
  4.     <mx:Script>  
  5.         <![CDATA[  
  6.             internal function initApp():void{  
  7.  
  8.                 var myTest:Test = new Test();  
  9.             }  
  10.         ]]>  
  11.     </mx:Script>  
  12. </mx:Application>   
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initApp()">
	
	<mx:Script>
		<![CDATA[
			internal function initApp():void{

				var myTest:Test = new Test();
			}
		]]>
	</mx:Script>
</mx:Application>

applicationComplete是Application对象的一个事件，程序初始化后触发此事件。

var myTest:Test = new Test()这个代码的作用是创建一个Test对象，创建对象用new关键字。

 

5 编辑非可视化对象

创建数据

Xml代码 复制代码 收藏代码
  1.      <mx:Array id="array_data">  
  2. <mx:String>Flex developer</mx:String>    
  3. <mx:String>Flash developer</mx:String>    
  4. <mx:String>Web developer</mx:String>    
  5. <mx:String>Mobile developer</mx:String>    
  6. lt;/mx:Array>   
       <mx:Array id="array_data">
		<mx:String>Flex developer</mx:String> 
		<mx:String>Flash developer</mx:String> 
		<mx:String>Web developer</mx:String> 
		<mx:String>Mobile developer</mx:String> 
	</mx:Array>

定义1个包含4个字符串元素的数组，相当于下面的代码

Xml代码 复制代码 收藏代码
  1.        <mx:Script>  
  2.     <![CDATA[  
  3.         public var array_data:Array = new Array();  
  4.         array_data.push("Flex developer");  
  5.         array_data.push("Flash developer");  
  6.         array_data.push("Web developer");  
  7.         array_data.push("Mobile developer");  
  8.     ]]>  
  9. </mx:Script>   
        <mx:Script>
		<![CDATA[
			public var array_data:Array = new Array();
			array_data.push("Flex developer");
			array_data.push("Flash developer");
			array_data.push("Web developer");
			array_data.push("Mobile developer");
		]]>
	</mx:Script>

定义好数组之后，可以作为List或者其他组件的数据源dataProvider

<mx:List x="20" y="20" dataProvider="{array_data}" width="180"></mx:List>

Xml代码 复制代码 收藏代码
  1.       <mx:XML id="myData">  
  2.        <node label="资料">  
  3.                 <node label="Music">  
  4.                <node label="古典"/>  
  5.                <node label="摇滚"/>  
  6.                <node label="民歌"/>  
  7.            </node>  
  8.            <node label="Movie">  
  9.                <node label="法国"/>  
  10.                <node label="美国"/>  
  11.            </node>  
  12.        </node>       
  13. </mx:XML>   
       <mx:XML id="myData">
        <node label="资料">
                 <node label="Music">
                <node label="古典"/>
                <node label="摇滚"/>
                <node label="民歌"/>
            </node>
            <node label="Movie">
                <node label="法国"/>
                <node label="美国"/>
            </node>
        </node>    
	</mx:XML>

创建一段XML做为Tree树型组件的数据源。

<mx:Tree x="20" y="200" labelField="@label" dataProvider="{myData}" width="180"></mx:Tree>

 

用MXML语句创建类实例

<view:Test></view:Test>

这样就创建了之前定义的Test类的实例。相当于用AS new一个出来

分享到：
| mysql分页与orcale分页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flex的mxml语言基础

    **Flex的MXML语言基础** Flex是一个用于构建富互联网应用程序（RIA）的框架，而MXML是Flex中用于创建用户界面的主要语言。MXML是一种基于XML的标记语言，它的设计目的是简化界面组件的布局和可视化元素的创建。通过...

    MXML.doc MXML语言是专门用于Flex程序中

    MXML语言是专门用于Flex程序中，描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局，控制组件的样式和外观，也可以构建非可视化的对象，比如XML数据、与服务器端通信的WebService、组件的数据源等。

    mxml-2.9.rar_mxml_mxml-2.9 编译_rhythmeg1_xml

    MXML-2.9是一款用于构建Flex应用程序的标记语言，它是ActionScript的扩展，主要用于创建用户界面。在Flex开发中，MXML允许开发者以声明式的方式定义用户界面的组件、布局和事件处理，极大地简化了UI的设计工作。这个...

    mxml2.0 源码

    MXML（MXML 2.0）是一种标记语言，主要用于构建Flex应用程序，它是Adobe Flex框架的一部分。Flex是一个开源的、跨平台的RIA（Rich Internet Application）开发框架，它允许开发者创建具有丰富用户界面的Web应用。...

    xml、mxml总结

    **MXML**（Flex Markup Language）是Adobe Flex应用程序的一种声明式标记语言，用于构建RIA（Rich Internet Applications）。MXML继承了很多XML的特性，并且结合了ActionScript编程能力，用于构建复杂的交互式应用。...

    MXML语法关于flexview

    MXML（Markup for the MX User Interface）是一种基于XML的标记语言，主要用于Flex应用程序中构建用户界面。它允许开发者以声明式的方式描述UI组件、布局、样式和数据绑定，使得界面设计更加直观易懂。在FlexView中...

    mxml-release-2.10.tar.gz

    **mxml** 项目是针对XML（可扩展标记语言）处理的一个库，主要应用于C语言环境中。XML是一种通用的数据交换格式，广泛用于网络服务、应用程序配置以及数据存储等领域。这个压缩包的版本为2.10，意味着它是该开源项目...

    mxml-2.5.zip_mxml

    XML（eXtensible Markup Language）是一种标记语言，广泛用于数据交换、文档存储和配置文件等场景。MXML库的出现，旨在简化开发者在C或C++项目中处理XML的工作流程。它提供了API接口，使得开发者能够轻松地创建、...

    flex入门教程，主要介绍了mxml和ActionScript的简单应用

    Flex是Adobe公司开发的一种用于构建富互联网应用程序（RIA）的技术框架，它主要基于ActionScript和MXML两种语言。本教程是针对Flex初学者设计的，旨在帮助他们理解并掌握Flex的基础知识，包括MXML和ActionScript的...

    About-MXML.zip_flex_mxml

    MXML（Mark-up for the Middle Tier）是一种基于XML的标记语言，主要用于构建Flex应用程序的用户界面。Flex，是Adobe开发的一个开源框架，用于构建富互联网应用程序（Rich Internet Applications，简称RIA）。在Flex...

    as3 flex mxml调用.as文件例子

    MXML是一种标记语言，主要用于描述用户界面布局和组件。AS3则是ActionScript的第3个版本，是一门面向对象的编程语言，用于实现逻辑和功能。在Flex项目中，MXML和AS3通常一起工作，MXML负责视图，而AS3处理业务逻辑和...

    FELX中文帮助（包括ActionScript 3.0、MXML等内容）

    Flex是Adobe公司开发的一种开源框架，主要用于构建富互联网应用程序（RIA），它基于ActionScript 3.0编程语言和MXML标记语言。这个压缩包提供的"中文帮助"包含了对ActionScript 3.0、MXML以及Flex入门的详细指导，...

    mxml-2.2.1.tar.gz_mxml

    XML（Extensible Markup Language）是一种用于存储和传输数据的标记语言，广泛应用于Web应用程序、数据交换和配置文件等领域。`mxml`是其中一款高效且易用的XML解析库，尤其适用于嵌入式系统和资源有限的环境。`mxml...

    mxml-3.2_cXX9668_xml_

    XML（eXtensible Markup Language）是一种用于存储和传输数据的标记语言，广泛应用于软件开发、Web服务和数据交换等领域。在"mxml-3.2_cXX9668_xml_"这个压缩包中，包含的是一个C++库，用于处理XML文件的读写操作。...

    Flex(MXML+AS)实现的计算器

    MXML是一种标记语言，与XML类似，用于定义Flex应用的用户界面布局和组件。AS，即ActionScript，是Flex应用程序的核心编程语言，主要用于处理逻辑和交互。在这个“Flex(MXML+AS)实现的计算器”项目中，开发者使用了...

    mxml-master_解析xml_minixml代码_

    XML（eXtensible Markup Language）是一种用于标记数据的语言，广泛应用在互联网上，用于存储和传输结构化数据。本文将详细介绍基于C语言的XML解析库——Minixml，以及如何利用它来解析XML文档。 Minixml是一个轻量...

    MXML和AS3.0编程的黄金组合

    在提供的资源中，"MXML语法.docx"文档很可能是对MXML语言的详细解释，包括基本元素、属性、事件处理和数据绑定等内容。而"ActionScript 3.0 programming.zip"可能是一个压缩包，包含了关于AS3.0编程的教程、示例代码...

Magicbox
Global site tag (gtag.js) - Google Analytics