Flex 记录点滴（二）关于MXML

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>                      <!-- List with three items -->                      <mx:List>                             <mx:dataProvider>                                    <mx:Array>                                           <mx:String>操作菜单一</mx:String>                                           <mx:String>操作菜单二</mx:String>                                           <mx:String>操作菜单三</mx:String>                                    </mx:Array>                             </mx:dataProvider>                      </mx:List>                        <!-- First pane of TabNavigator -->                      <mx:TabNavigator borderStyle="solid">                             <mx:VBox label="Pane1" width="300" height="150" >                                    <mx:TextArea text="为奥运健儿喝彩！" width="199" />                                    <mx:Button label="提交" />                             </mx:VBox>                               <!-- Second pane of TabNavigator -->                             <mx:VBox label="Pane2" width="300" height="150" >                             <!-- Stock view goes here -->                             </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日星期六 写于广州同德。