第一章 第四节为 Flex 应用程序设计界面布局

让我们来详细分析一下前面那个“Say Hello to Flex“的简单例子，你可以通过设置组件
的属性值来控制Flex 应用程序的界面布局，就象如下所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel layout="absolute" width="80%" height="80%">
<mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10"
right="30"/>
<mx:Button label="Close" right="30" bottom="40"/>
</mx:Panel>
</mx:Application>
许多容器组件都允许以绝对坐标的方式创建布局，这就意义着你可以使用精确的x 和y
的坐标来放置组件。你还可以对应其父容器的相对位置来放置组件并约束它们，使它们在应
用程序的界面放大或缩小时仍然保持其彼此的位置。

在这个例子中，面板/Panel 组件的布局属性被设置为绝对值方式，同时所有容器的大小
都被设置为应用程序的百分之八十。两个组件（TextArea 和Button）被放置到距离面板容器
边界的特定象素位置上。
使用风格和主题增强视觉方面的设计
如果样式/style 的属性值没有被指定，它们将由整个程序中运行的主题/theme 来进行控
制。在默认情况下，Flex 应用程序使用Halo 主题（就象上面那个例子那样）。当然，你可以
修改默认的主题或者干脆自己创建一个。你还可以简单地指定新的样式定义来改变默认的主
题样式，就象这样：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
TextArea {
font-size: 36px;
font-weight: bold;
}
</mx:Style>
<mx:Panel layout="absolute" width="80%" height="80%" x="122" y="24">
<mx:TextArea text="Say hello to Flex!" top="10" bottom="70" left="10" right="30"/>
<mx:Button label="Close" right="30" bottom="40"/>
</mx:Panel>
</mx:Application>
通过明确地为TextArea 组件定义一个样式，应用程序现在看起来就会象这样了：

在这个例子中，一种新样式在MXML 文件中的<mx:Style>标签里进行了定义。如同我
们前面所提到过的，你还可以通过修改主题或应用新主题、使用一个外部CSS 文件、或者
设置单独的样式属性来达到设置新样式的目的。
将一个样式单导入到MXML 文件中，你需要添加如下的代码：
<mx:Style source="styles.css" />

加支付宝好友偷能量挖...