FLEX程序实质

本文来源于Sunnyeye Studio http://blog.sunnyeye.biz , 原文地址： http://blog.sunnyeye.biz/?p=253

 Sunnyeye Studio翻译的The Essential Guide to Flex 3第六篇  只翻译了10来篇：

　　现在我们回到代码模式，可以看到Flex已经自动为我们生成了一些代码，如图2-17：

　　让我们来观察一下这些代码。
MXML
　　你可以使用两种语言来编写flex程序：MXML 和 ActionScript 3.0。
　　你在图2-17看到的是MXML的例子。MXML是一种基于XML的，遵循XML语法规则但有其一些特有的标签的语言。然而有一个有趣的现象：MXML认为是一种convenience language（简单语言）。假如你不明白怎么回事，我们从ColdFusion开始说起。
　　ColdFusion使用一种基于HTML语言，叫做ColdFusion Meta-Language (CFML)。在前台它使用一种相对简单，基于标签的语言来书写代码，但是在后台它会自动转换为一种更加复杂的语言，这样做的目的其实很简单，就是方便程序员更有效地书写代码。如果是基于CFML，后台会转换为Java语言，那如果是基于MXML，后台则会转换为ActionScript。所以，不管你是使用MXML还是直接使用ActionScript进行编码，所有的语句最终都会转换为。我呆会会证明给你看，现在我们先来看一下我们刚刚编写的那个程序的代码。代码的第一行是：

2. <?xml version="1.0" encoding="utf-8"?>

　　所有的MXML文件都要以一个文件类型声明开头，这意味着这个文档遵循XML语法结构。
　　第二行代码是：

2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
3. layout="absolute">

　　程序的主文件，相当于Ｃ语言中的Main。一个程序中只能有一个主文件，必须以Application开头，我们呆会会做进一步说明。
　　你会看到所有的MXML标签在后台都对应着一个ActionScript类文件，如果你还是个编程新手，还搞不清楚什么是类文件，别担心，我们在第三章会做介绍的。现在你只要知道按照编程习惯，类文件名要以大写字母开头，所以所有的对应的标签也要以大写字母开头，那标签前的“mx:”是什么意思呢？
　　在你安装Flex Builder 3的时候，同时也安装了所有的ActionScript 3.0类文件，这些类文件被称为ActionScript Software Development Kit(SDK) (ActionScript软件开发包）。
　　程序标签有一种叫做xmlns的属性，是基于XML的命名空间的，可以允许你使用一个简短名称来代替整个ActionScript SDK的目录，我们在创建组件时经常要用到它。程序标签使用默认的命名空间，被称为“mx”，代表SDK 的位置，但是你会发现一个很奇怪的现象：它定义SDK位于“http://www.adobe.com/2006/mxml”。呃？这代表SDK在Adobe网站上？不是的！
　　虽然它看上去很像一个URL，实际上它是一个内部命令，告诉编译器去哪里找SDK。假如这个命名空间不定义或书写不正确，你的Flex程序将不能运行，所以无论如何不要去更改它。
　　我们来回顾一下，mx告诉标签到哪里去找SDK，而标签名则告诉编译器去找哪个类。好，我们现在来看看MXML 和ActionScript的关系。
　　标签还有一个叫做layout（输出）的属性，在本例中设为了absolute，现在我们暂时先忽略它，呆会再来讲。
　　当你开始编写Flex的时候，必须建立一种容器的概念。例如，Application就像一个主容器，它包含着其他的程序。Label标签就是Application里的一个子容器，这对理解MXML语法来说很重要。
　　注意Application标签的两行代码：

2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
3. layout="absolute"> 
4. ... 
5. </mx:Application>

　　当一个容器有子容器时，你必须在最后一个子容器后面加上闭合标签，注意完整的标签名必须包含“mx:”。
　　现在我们来看下Label标签：

1. <mx:Label x="350" y="42" text="Welcome To Flex Programming!"/>

PS：假如你这里的x值和y值不一样是没有关系的，它只是代表你Label的位置和我的不一样。
　　Label标签没有包含任何子容器，我们可以使用“/>”来直接闭合它，在本书的后面我会多次提到这类的例子。
　　注意这个例子，Label标签，基于Label ActionScript类文件，使用了三个属性，x定义x坐标值，y定义y坐标值，text定义Label内容。
　　为了更好的理解它是怎么工作的，我们再来加一个Label，这次我们直接使用代码来添加。
1、在Label标签的“/>”后面回车新建一空白行。
2、输入“<”来开始定义一个标签。
　　在你输入“<”的时候，Flex Builder会自动列出mx命名空间里的所有类文件，如图2-18：

3、输入“L”来跳转到以L为开头的类文件处，假如Label已经被选中了，直接按回车即可。
4、现在，输入一个空格，Flex Builder会自动列出和Label类有关的属性，如图2-19：

5、输入x，回车。
6、Flex Builder会自动将其转换为“x = ” “”的形式，你只要输入值就可以了，我们这里输入350。
7、输入空格，属性列表又会自动出现，同上面的操作一样，选择y并设值65。
8、再一次输入空格使属性列表出现，输入“t”，注意你并没有直接定位到“text”属性，接着输入“e”，这时你才到达了text处，当然，你也可以使用鼠标直接定位到你想用的属性处回车即可，
9、回车并将text值设为”It is fun to work with!”。
10、以“/>”闭合标签。
11、把以前那个Label的x值设为350，y值设为42。
　　你的代码看起来应该是这样的：

1. <?xml version="1.0" encoding="utf-8"?> 
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
3. layout="absolute"> 
4. <mx:Label x="350" y="42" text="Welcome To Flex Programming!"/> 
5. <mx:Label x="350" y="65" text="It is fun to work with!"/> 
6. </mx:Application>

12、保存程序并点击Run Application按钮，你将会看到如图2-20的结果：

13、关闭浏览器，返回Flex Builder。
　　左下角的大纲视图处很直观地表示了容器与子容器之间的关系，如图2-21：

　　你可以清楚地看到Application标签在所有的标签上方，两个Label标签做为它的子容器被它包含在下面。