Flex的背景和技术特点

http://www.webjx.com/  2008-12-17 15:06:44  来源:蓝色理想 

Webjx核心提示:本章内容介绍Flex的背景和技术特点,并通过示例程序来展示Flex的界面效果和技术内涵.

 

1.3  MXML

MXML是一种基于XML的标记语言,在Flex技术中,MXML用于设计用户界面,实现丰富的Flex表现层。从作用上说,MXML和HTML的功能是基本一致的,都是设计用户界面,但是MXML提供了较HTML更为丰富的界面组件,并且在开发上更为结构化,条理更加清晰。

MXML的编写同样类似于HTML,它通过标签来定义和描述组件。按照学习编程的惯例,下面请看一个用MXML编写的Hello World示例。

示例1.1  Hello World

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="Flex MXML Test" x="10" y="10" fontSize="12">
<mx:Label text="Hello World. 世界,你好!" fontWeight="normal" fontSize="24" fontFamily="Times New Roman" fontStyle="italic" alpha="1.0"/>
</mx:Panel>
</mx:Application>

通过示例1.1的代码可以看到,虽然MXML是类似于HTML的格式,但是Panel、Label等开发组件表达了一个GUI开发平台才具备的特征。MXML是基于XML语言的,可读性很强,由标签(Tag)、标签中的属性(Attribute)及属性值(Attribute Value)等元素组成。

那么,如何才能运行起这个Hello World呢?

第一,用一个普通的文本编辑器,如记事本、EditPlus等,编写并保存上述代码,需要注意的是文件扩展名要保存为小写的mxml,如 test.mxml,我们暂且把它保存在C盘的user文件夹下。

第二,使用Flex 3 SDK的命令行进行编译,Flex的编译工具在SDK的bin文件夹下,如Flex 3 SDK解压缩到C盘根目录,那么在命令行执行(本书所有代码示例部分都默认使用C:\user作为代码文件夹):

cd c:\flex_sdk_3\bin
mxmlc c:\user\test.mxml

可以看到在user文件夹下生成了test.swf文件。

第三,用浏览器或Flash Player打开这个swf文件,就看到了这个Hello World的运行效果,如图1.2所示。

图1.2  Hello World运行效果

结合图1.2我们来分析一下这个程序的代码。

<mx:Application>是MXML的根元素,是MXML所有组件的容器。在这个标签中,我们要声明mxml的命名空间。

<mx:Panel>是个面板组件,是GUI程序开发的常见组件,其功能是个组件容器。我们把它的标题设置成了“Flex MXML Test”,并对位置尺寸进行了设定。

<mx:Label>同样是GUI程序开发必不可少的组件之一,常用于文字容器,在图1.2中,这个Label的内容就是“Hello World. 世界,你好!”这个字符串,并将其嵌套在一个<mx:Panel>中。在这个程序里,<mx:Panel>是<mx:Label>的容器。

这就是一个标准的MXML的大致写法。需要特别注意的一点是,在第一行的<?xml version=“1.0”?>中有时候需要进行指定的编码,我们用文本编辑工具处理的时候要保存成对应的编码,如为了方便处理中文和国际化,我们可以把第一行改写成<?xml version=“1.0” encoding=“utf-8”?>,并将代码保存为UTF-8格式。

更多