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代码
<?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="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代码
<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>
<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代码
<?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>
<?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代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" source="pic/9.jpg">
</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代码
<?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>
<?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代码
<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代码
private function _btn_click(event:MouseEvent):void{
tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
}
private function _btn_click(event:MouseEvent):void{
tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
}这个函数被注册为按钮的点击事件侦听器，一旦点击事件触发，函数就会被调用。
在MXML中插入AS块
Xml代码
<mx:Script>
<![CDATA[
//这里是AS代码
]]>
</mx:Script>
<mx:Script>
<![CDATA[
//这里是AS代码
]]>
</mx:Script>此标签可以放在根节点内的任何位置，同时必须用CDATA将代码包起来。CDATA不能嵌套使用。
AS中的注释是 //单行注释 /*多行注释*/
MXML中的注释和XML一样<!-- 注释-->
4.2 创建外部AS文件
New->ActionScript file 可以创建一个外部AS文件
Xml代码
<mx:Script source="my.as"/>
<mx:Script source="my.as"/>在程序中可以使用上面的代码导入。
4.3 创建AS类文件
New->ActionScript Class 可以创建一个AS类文件
Xml代码
package
{
public class Test
{
function Test(){
trace("Test");
}
}
}
package
{
public class Test
{
function Test(){
trace("Test");
}
}
}上面代码创建了一个Test类，在构造函数Test()中在控制台打印Test。
在主程序中可调用：
Xml代码
<?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>
<?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代码
<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>
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代码
<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>
<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代码
<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>
<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一个出来
分享到：
相关推荐
编译MXML详解及代码详解[定义].pdf
mxml 源码
MXML语法.MXML flexview actionscript
mxml 适合用于嵌入式 xml 解析的轻量级的工具,在下载包的 mipsel 有编译好的.a 文件
flex使用容器和MXML样式.pdf格式的 英文的哦
mxml-2.12.tar.gz
xml、mxml总结。xml是可扩展标记语言，标准通用标记语言的子集。此处总结基于w3cSchool上关于xml所属api进行总结。
pdf格式的flex的mxml语法，适合想学习flex的新手
mxml 解析器, vc6.0平台, 在一些需求不大的场合可以使用!
使用mxml 库指定一个标准的接口，使用putInt、getInt、putString、getString、putStringArray、getStringArray等。mxml的详解可以参考https://blog.csdn.net/shift_wwx/article/details/99677421
mxml开源项目
一个上课用的ppt文档，更容易让你对mxml更为的了解。。
minixml2.5最新的版本。 嵌入式xml 解析、查找、生成、遍历 功能,全部实现是标准c,移植很容易。 最新的2.5，修改了很多bug。 这个压缩包，里下载完了，直接就可以在liunx下编译安装。 如果是在windows下的话，只需要...
如果你的flex插件出现mxml无法打开的问题，请下载此文件，同时参考：http://www.tekool.net/blog/2008/06/28/flex-builder-3-plugin-dont-work-with-eclipse-34/或者：...
Demo
Mini-XML是一个小型的开源的XML解析器，采用 C 语言开发。该解析器最大的特点就是小型、无须依赖其他类库，只需要 GCC 编译器 和 make 程序即可编译，支持 UTF-8/UTF-16 编码。
ActionScript 3.0 语言和组件参考概述、MXML入门、FLEX入门帮助。
flex入门教程，主要介绍了mxml和ActionScript的简单应用，适合初学者，高手就没必要下载啦
About MXML programming files and Flex usage.
Classes Class Description OLAPAttribute The OLAPAttribute class represents a single attribute of an OLAPDimension. OLAPAxisPosition The OLAPAxisPosition class represents a position along the axis ...