CSDN博客

img Jplateau

Flex 记录点滴(二)关于MXML

发表于2004/9/23 19:42:00  2939人阅读

分类: RIAs

Flex 记录点滴(二)关于MXML

 

参考文档《Developing Flex Applications

 

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

 

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

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

   当然HTMLMXML最大的不同是基于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 2004911日星期六 写于广州同德。

 

阅读全文
0 0

相关文章推荐

img
取 消
img