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">

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.

3.

4. <namespace>

5. <uri>http://www.adobe.com/2006/mxml</uri>

6. <manifest>mxml-manifest.xml</manifest>

7. </namespace>

8. </namespaces>

<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>

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>

中的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="*">

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()">

4. <mx:Script>

5. <![CDATA[

6. internal function initApp():void{

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>

</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类的实例。相当

Flex学习之MXML

继续阅读

arcgis api js调用百度地图

互联网地图坐标偏移的解决方法

解决Nginx代理iServer的HTTP协议成HTTPS后页面出现跳转回HTTP协议的情况

openlayers 6【二】Map地图详解，初始化一个map地图官方文档：https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

openlayer4入门系列一(地图描绘经纬度点)

WebGIS第六课：地图点击事件的引入和点标记

Cesium：绘图工具v1.0

PostGIS开发手册

Cesium-Entity：Polyline线条绘制与编辑效果图示例代码

openlayers萤火图实现

OpenLayers 3 之添加地图网格前言示例使用实现总结

OpenLayers 3 之绘制图形（ol.interaction.Draw）原理解析

OpenLayers 3 之使用 AJAX 通信0. 摘要1. 什么是AJAX ，什么作用2. 添加查询组件3. 整合 AJAX 和查询组件4. 总结5. 附录代码下载

OpenLayers 3 之事件体系详解

Cesium面积测量之思路解析加源码

OpenLayers访问WMS服务并获取要素的属性OpenLayers 跨域访问WMS服务并获取要素的属性