1.3 MXML

 

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

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

示例1.1  Hello World

 

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

通过示例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格式。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值