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日星期六 写于广州同德。