MXML标记语言简介 标准通用标记语言

MXML标记语言简介

1. MXML语法

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

1.1 命名规范

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

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

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

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

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

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

1.2 MXML文件结构

MXML为标准的XML文件。

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

Xml代码

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
  3. <mx:Script>
  4. <![CDATA[
  5. internalfunctiondoClick():void{
  6. tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
  7. }
  8. ]]>
  9. </mx:Script>
  10. <mx:Buttonx="41"y="90"label="HelloFlex"click="doClick()"/>
  11. <mx:Labelid="tip_txt"x="41"y="41"text="你好,Flex"fontSize="12"/>
  12. </mx:Application>

<?xml version="1.0"encoding="utf-8"?>

<mx:Applicationxmlns: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 SDK2frameworks目录中找到。并找到如下代码。

Xml代码

  1. <namespaces>
  2. <!--SpecifyaURItoassociatewithamanifestofcomponentsforuseasMXML-->
  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 ofcomponents 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. <?xmlversion="1.0"?>
  2. <componentPackage>
  3. <componentid="Accordion"/>
  4. ....................
  5. ....................
  6. <componentid="WebServiceOperation"/>
  7. <componentid="RemoteObject"/>
  8. <componentid="RemoteObjectOperation"/>
  9. <componentid="HTTPService"/>
  10. <componentid="Consumer"/>
  11. <componentid="Producer"/>
  12. </componentPackage>

<?xmlversion="1.0"?>

<componentPackage>

<component id="Accordion"/>

....................

....................

<component id="WebServiceOperation"/>

<component id="RemoteObject"/>

<component id="RemoteObjectOperation"/>

<component id="HTTPService"/>

<component id="Consumer"/>

<component id="Producer"/>

</componentPackage>

<componentid="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. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Imagexmlns:mx="http://www.adobe.com/2006/mxml"source="pic/9.jpg">
  3. </mx:Image>

<?xml version="1.0"encoding="utf-8"?>

<mx:Imagexmlns:mx="http://www.adobe.com/2006/mxml"source="pic/9.jpg">

</mx:Image>

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

Xml代码

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:ns1="*">
  3. <mx:Script>
  4. <![CDATA[
  5. internalfunctiondoClick():void{
  6. privatefunction_btn_click(event:MouseEvent):void{
  7. tip_txt.text='欢迎来到RIA的世界--开始Flex之旅';
  8. }}
  9. ]]>
  10. </mx:Script>
  11. <mx:Buttonx="41"y="90"label="HelloFlex"click="doClick()"/>
  12. <mx:Labelid="tip_txt"x="41"y="41"text="你好,Flex"fontSize="12"/>
  13. <ns1:imageEnbogax="205"y="90"/>
  14. </mx:Application>

<?xml version="1.0"encoding="utf-8"?>

<mx:Applicationxmlns: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:imageEnbogax="205" y="90"/>
MXML标记语言简介 标准通用标记语言
就是我们拖入的自定义组件,程序自动添加了ns1命名空间。我们改变自定义组件的位置放到view文件夹,代码变成:

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

4. 编写ActionScript

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

4.1 在MXML中使用AS

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

比如

Xml代码

  1. <mx:Buttonx="41"y="90"label="HelloFlex"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. privatefunction_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:Scriptsource="my.as"/>

<mx:Scriptsource="my.as"/>

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

4.3 创建AS类文件

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

Xml代码

  1. package
  2. {
  3. publicclassTest
  4. {
  5. functionTest(){
  6. trace("Test");
  7. }
  8. }
  9. }

package

{

public class Test

{

function Test(){

trace("Test");

}

}

}

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

在主程序中可调用:

Xml代码

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"applicationComplete="initApp()">
  3. <mx:Script>
  4. <![CDATA[
  5. internalfunctioninitApp():void{
  6. varmyTest:Test=newTest();
  7. }
  8. ]]>
  9. </mx:Script>
  10. </mx:Application>

<?xml version="1.0"encoding="utf-8"?>

<mx:Applicationxmlns: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:Arrayid="array_data">

<mx:String>Flexdeveloper</mx:String>

<mx:String>Flashdeveloper</mx:String>

<mx:String>Webdeveloper</mx:String>

<mx:String>Mobiledeveloper</mx:String>

</mx:Array>

<mx:Array id="array_data">

<mx:String>Flexdeveloper</mx:String>

<mx:String>Flashdeveloper</mx:String>

<mx:String>Webdeveloper</mx:String>

<mx:String>Mobiledeveloper</mx:String>

</mx:Array>

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

Xml代码

  1. <mx:Script>
  2. <![CDATA[
  3. publicvararray_data:Array=newArray();
  4. array_data.push("Flexdeveloper");
  5. array_data.push("Flashdeveloper");
  6. array_data.push("Webdeveloper");
  7. array_data.push("Mobiledeveloper");
  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:XMLid="myData">
  2. <nodelabel="资料">
  3. <nodelabel="Music">
  4. <nodelabel="古典"/>
  5. <nodelabel="摇滚"/>
  6. <nodelabel="民歌"/>
  7. </node>
  8. <nodelabel="Movie">
  9. <nodelabel="法国"/>
  10. <nodelabel="美国"/>
  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类的实例。相当于用ASnew一个出来

  

爱华网本文地址 » http://www.413yy.cn/a/25101013/185666.html

更多阅读

盘口语言 记住66个盘面语言

有句俗语叫做会看看门道,不会看热闹。投资者经常说的一句话盯盘,盯盘指的就是仔细观看盘口语言。在盘口语言的几篇博文中,我会站在一个操盘手的角度为大家讲解究竟如何读懂盘口语言,看清主力在盘口的一举一动。 《新广盯盘》 买卖五档看

粤语在世界语言排行 世界十大语言排名

  10、印地语印地语   印度的官方语言是英语和印地语,但是印度南方人并不讲印地语,北印度5亿多人讲印地语。可以说讲印地语的人口不少,但国际影响甚微,勉强可以挤入前10,若整个印度10几亿人口全都讲印地语,这种语言还能往前排一

非语言传播 奇葩说等语言类节目引领品牌传播新视角

我个人特别喜欢看脱口秀、访谈、电视评论等语言类节目,一直追了好多年的节目有《杨澜访谈录》、《新闻1+1》,最近看的比较多的有《今晚80后脱口秀》和《奇葩说》。奇葩说第二季已经开播两周时间了,无论是话题还是现场辩论,都让我越来越

电视画面语言是啥 电视画面语言

     电视画面语言就是运用镜头、声音、以及文学等三种语言,根据人们(观众)观看事物的习惯总结出来的一种语言。笔者根据多年的工作实践和对电视画面语言语法的理解,就电视画面、摄像技巧的运用、场面调度、轴线规律、电视摄像师的

英美语言文化 英美影视剧语言的翻译方法论

     随着对外文化交流的深入,近几年来大量外国影片被引介到中国,其中不少受到我国观众的喜爱。随之而来的是影视翻译的快速升温,原来一度被翻译界所忽视的“灰姑娘”,,现今一直受到强烈关注,特别是在翻译实践方面,观众们更是经常对某

声明:《MXML标记语言简介 标准通用标记语言》为网友碍你眼吗分享!如侵犯到您的合法权益请联系我们删除