Flex学习之MXML
|
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 2frameworks目录中找到。并找到如下代码。 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类的实例。相当（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |