Flex 记录点滴（二）关于MXML

最新推荐文章于 2026-06-29 22:54:29 发布

原创最新推荐文章于 2026-06-29 22:54:29 发布 · 3.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flex #application #actionscript #xml #button

RIAs 专栏收录该内容

2 篇文章

订阅专栏

Flex 记录点滴（二）关于MXML

参考文档《Developing Flex Applications》

上一篇纪录中记载了一些Flex的背景内容，今天要记录MXML。

Flex使用两种语言来写应用程序：MXML和ActionScript（关于ActionScript将在下一篇纪录中纪录），Flex离不开MXML，就像我们离不开空气一样。MXML是这样一种xml标记语言，Flex用它来布置UI组件，同时也可以声明一些非可视化的东西，譬如：在UI组件和服务器端之间的数据库连接以及数据梆定等等。

就像HTML一样，MXML提供一套标签（tags）来定义UI。如果你对HTML非常熟悉的话，那么MXML对你来说将很容易就会上手。MXML相比HTML来说有更强的结构性，而且它提供了更多的标签库，譬如：MXML提供了诸如data grids、trees、navigators、accordings、 menus等等HTML不曾提供的可视化组件以及连接web服务、数据绑定以及animation effects等等非可视化组件，而且你可以扩展MXML来自定义MXML标签。

当然HTML和MXML最大的不同是基于MXML的应用系统可以编译为SWF格式的文件并运行在Flash Player中，提供更加丰富和动态的UI。

1． 1．进入“Hello,World!”

因为MXML就是一个普通的xml文件，所以你可以用简单的文本编辑器来开发，或者比较好的xml编辑器开发，当然首选的还是整合了开发环境的IDE,譬如：刚刚公布的Flex Builder（只有60天的试用版，呵呵，有心的可以找到相应的注册码）。

我选择用Flex Builder开发，当然对于初学者来说还是选用一些简单的编辑器最好，那样可以以更加自然的方式接触MXML。

下面给出一个简单的例子：

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

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Panel title="你好，世界！" marginTop="10" marginBottom="10" marginLeft="10" marginRight="10" fontSize="12">

<mx:Label text="你好，世界！" color="red" fontSize="24"/>

</mx:Panel>

</mx:Application>

上边的例子在IE中运行的时候可以看到如下画面：

说明：在Flex中，根标签是<mx:Application>，它是一个容器（container）,容器是这样一种标签：在它之中可以任何除了<ma:Application>以外的任何组件。关于容器的记录将在以后给出。

2． 2．布置UI

MXML提供了广泛的可视化组件来制作UI，这些组件从大的分类来说有两类

l l containers：如Panel / Box(Vbox/Hbox) / Canvas / Grid / Form 等等

l l control：如：Button / CheckBox / DateField / TextArea 等等

上边所有的组件在以后的记录中都会有记录。

下面也给一个简单的例子。

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

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Panel title="MXML布置UI组件" marginTop="10" marginBottom="10"

marginLeft="10" marginRight="10" fontSize="12" >

<mx:HBox>

<mx:List>

<mx:dataProvider>

<mx:Array>

<mx:String>操作菜单一</mx:String>

<mx:String>操作菜单二</mx:String>

<mx:String>操作菜单三</mx:String>

</mx:Array>

</mx:dataProvider>

</mx:List>

<mx:TabNavigator borderStyle="solid">

<mx:VBox label="Pane1" width="300" height="150" >

<mx:TextArea text="为奥运健儿喝彩！" width="199" />

<mx:Button label="提交" />

</mx:VBox>

<mx:VBox label="Pane2" width="300" height="150" >

</mx:VBox>

</mx:TabNavigator>

</mx:HBox>

</mx:Panel>

</mx:Application>

上边的例子在IE中运行的时候可以看到如下画面：

说明：上面的例子用到组件有：Panel / Hbox / List / TabNavigator 等等

3． 3．用MXML触发事件

Flex应用程序是基于事件驱动的，每一个组件都有不同的许多事件和其对应，譬如<mx:Button>有click事件等等。

给出一个例子：

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Panel title="你好，世界！" marginTop="10" marginBottom="10"

marginLeft="10" marginRight="10" fontSize="12" >

<mx:TextArea id="textarea1"/>

<mx:Button label="提交" click="textarea1.text='为奥运健儿喝彩！';"/>

</mx:Panel>

</mx:Application>s

上边的例子在IE中运行的时候可以看到如下画面：

说明：左图为初始画面，右图为点击提交按纽以后的结果。

下面将上边的例子增加一点复杂度，在MXML中添加actionscript方法：

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Script>

<![CDATA[

function hello(){

textarea1.text="为奥运健儿喝彩！";

}

]]>

</mx:Script>

<mx:Panel title="你好，世界！" marginTop="10" marginBottom="10"

marginLeft="10" marginRight="10" fontSize="12" >

<mx:TextArea id="textarea1"/>

<mx:Button label="提交" click="hello();"/>

</mx:Panel>

</mx:Application>

运行的结果相同。

4． 4．在不同组件之间绑定数据

Flex提供简单的语法来绑定不同组件之间的属性，例如在下面的例子中“{}”的应用：

上边的例子在IE中运行的时候可以看到如下画面：

运行前点击提交按纽后

“{}”有一个替代方案，就是使用<mx:Binding>标签，这在以后记录。

5． 5．使用数据服务

MXML提供如下几种数据服务组件：

l l WebService provides access to SOAP-based web services

l l HTTPService provides access to HTTP URLs that return data

l l RemoteObject provides access to Java objects

6． 6．存储和验证数据

7． 7．格式化数据

8． 8．使用css

9． 9．使用效果

10． 10．使用xml命名空间（Using XML namespaces）

在MXML标签属性“xmlns”指定xml的命名空间。Xml命名空间可以让你在同一个xml文档里使用不同套的xml标签。在xml中标签和命名空间息息相关。

Xml的命名空间给了你使用自定义标签的能力，在下面的例子中包含一个自定义标签：“CustomBox”。

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:my="containers.boxes.*">

         <mx:Panel title="My Application" marginTop="10" marginBottom="10"

                 marginLeft="10" marginRight="10" >

                 <my:CustomBox/>

         </mx:Panel>

</mx:Application>

Jplateau 2004年9月11日星期六写于广州同德。