Flex学习笔记_03 MXML语言简介
2011-12-07 11:49
609 查看
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文件采用的语法版本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目录中找到。并找到如下代码。
上面的配置发现,http://www.adobe.com/2006/mxml 这个URI和mxml-manifest.xml文件对应,找到该文件,里面列出了所有标签和与标签相关联的类文件路径。
<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属性设置图片的路径。
然后在程序中就可以使用该自定义的组件,将其从用户面板拖入到编辑区,图片显示正常。
<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来处理事件
比如
上面代码中的click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"会被编译为
这个函数被注册为按钮的点击事件侦听器,一旦点击事件触发,函数就会被调用。
在MXML中插入AS块
此标签可以放在根节点内的任何位置,同时必须用CDATA将代码包起来。CDATA不能嵌套使用。
AS中的注释是 //单行注释 /*多行注释*/
MXML中的注释和XML一样<!-- 注释-->
4.2 创建外部AS文件
New->ActionScript file 可以创建一个外部AS文件
在程序中可以使用上面的代码导入。
4.3 创建AS类文件
New->ActionScript Class 可以创建一个AS类文件
上面代码创建了一个Test类,在构造函数Test()中在控制台打印Test。
在主程序中可调用:
applicationComplete是Application对象的一个事件,程序初始化后触发此事件。
var myTest:Test = new Test()这个代码的作用是创建一个Test对象,创建对象用new关键字。
5 编辑非可视化对象
创建数据
定义1个包含4个字符串元素的数组,相当于下面的代码
定义好数组之后,可以作为List或者其他组件的数据源dataProvider
<mx:List x="20" y="20" dataProvider="{array_data}" width="180"></mx:List>
创建一段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语言是专门用于Flex程序中,描述界面表现的一中XML标记语言。我们可以用它来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化的对象,比如XML数据、与服务器端通信的WebService、组件的数据源等。
1.1 命名规范
MXML区分大小写,且文件名和变量标示名都区分大小写。
MXML文件以mxml作为扩展名,文件名要遵循AS中变量的命名规则。
所有的MXML都被视为用户自定义的组件,相当于对象,可以使用代码动态创建。
变量名必须以字母或下划线开始,且只能包含字母、数字和下划线。
不能命名为application,application是主程序文件的默认标记,不可再使用。
程序不能使用“mx”做为目录名,mx 是官方组件库的命名空间。
2.2 MXML 文件结构
MXML为标准的XML文件。
我们以一个MXML文件来说明:
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 和编码格式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目录中找到。并找到如下代码。
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>
上面的配置发现,http://www.adobe.com/2006/mxml 这个URI和mxml-manifest.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>
<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属性设置图片的路径。
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>
然后在程序中就可以使用该自定义的组件,将其从用户面板拖入到编辑区,图片显示正常。
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>
<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来处理事件
比如
1.<mx:Button x="41" y="90" label="Hello Flex" click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"/>
上面代码中的click="tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'"会被编译为
1.private function _btn_click(event:MouseEvent):void{ 2. tip_txt.text='欢迎来到RIA的世界--开始Flex之旅'; 3.}
这个函数被注册为按钮的点击事件侦听器,一旦点击事件触发,函数就会被调用。
在MXML中插入AS块
1.<mx:Script> 2. <![CDATA[ 3. //这里是AS代码 4. ]]> 5.</mx:Script>
此标签可以放在根节点内的任何位置,同时必须用CDATA将代码包起来。CDATA不能嵌套使用。
AS中的注释是 //单行注释 /*多行注释*/
MXML中的注释和XML一样<!-- 注释-->
4.2 创建外部AS文件
New->ActionScript file 可以创建一个外部AS文件
<mx:Script source="my.as"/>
在程序中可以使用上面的代码导入。
4.3 创建AS类文件
New->ActionScript Class 可以创建一个AS类文件
1.package 2.{ 3. public class Test 4. { 5. function Test(){ 6. trace("Test"); 7. } 8. } 9.}
上面代码创建了一个Test类,在构造函数Test()中在控制台打印Test。
在主程序中可调用:
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>
applicationComplete是Application对象的一个事件,程序初始化后触发此事件。
var myTest:Test = new Test()这个代码的作用是创建一个Test对象,创建对象用new关键字。
5 编辑非可视化对象
创建数据
<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>
定义1个包含4个字符串元素的数组,相当于下面的代码
<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>
定义好数组之后,可以作为List或者其他组件的数据源dataProvider
<mx:List x="20" y="20" dataProvider="{array_data}" width="180"></mx:List>
<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>
创建一段XML做为Tree树型组件的数据源。
<mx:Tree x="20" y="200" labelField="@label" dataProvider="{myData}" width="180"></mx:Tree>
用MXML语句创建类实例
<view:Test></view:Test>
这样就创建了之前定义的Test类的实例。相当于用AS new一个出来
相关文章推荐
- 黑马程序员--C 语言学习笔记之简介
- 自定义View学习笔记03—View的工作原理简介
- Flex学习笔记-使用MXML和一个AS事件监听器监听事件
- (原创)c#学习笔记08--面向对象编程简介03--Windows应用程序中的OOP
- Flex与As3学习笔记之:Part 1 Flex语言基础
- (原创)c#学习笔记08--面向对象编程简介01--面向对象编程的含义03--对象的生命周期--构造函数和析构函数
- ARM汇编语言学习笔记之一(ARM简介)
- Python语言程序设计-学习笔记1:简介及目录
- (原创)c#学习笔记08--面向对象编程简介01--面向对象编程的含义03--静态和实例类成员
- Java学习笔记03——Java面向对象和语言进阶
- 【学习笔记】C#语言入门详解1.课程简介
- IOS学习笔记02---语言发展概述,计算机语言简介.
- Flex 学习笔记之一:Flex 简介
- C语言学习笔记【指针03】指向函数的指针与返回指针值的函数
- (原创)c#学习笔记08--面向对象编程简介02--OOP技术03--多态性
- html5学习笔记---03. Canvas简介,Canvas的使用方法
- IOS学习笔记02---语言发展概述,计算机语言简介.
- Flex学习笔记_01 Flex简介与安装
- C语言学习笔记之 第二讲:C语言环境简介
- Velocity学习笔记3——Velocity 模板语言(VTL: Velocity Template Language)简介