第一章 Flex是如何工作的 （4--7小节）

第四节 为 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" />

第五节事件和行为的使 用

HTML 应用程序的原理是由客户端发出请求，并从服务器端得到反应。与之不相同的是， Flex 应用程序是基于事件 的 /event-based 。举个例子，当用户单击一个按钮时，便会触发一个事件。应用程序本身，不是指服务器，包含了识别事件的逻辑并采取相应的行动。

当事件被触发时修改组件的属性

对某个组件以编程方式进行操作时，为了对某个事件作出反应，必须首先要引用它，这时你就需要赋予它一 个 ID 值，如下所示 ：

<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" x="122" y="24">

随后你就可以将行 为 / behavior 添加到应用程序上，当某个事件被触发时改变组件的属性值，就象这样 ：

<mx:Button label="Close" right="30" bottom="40" click="myPanel.visible=false" />

当按钮被单击时，面板的可见属性值被设置 为 false 。

使用 ActionScript 功能函数你也可以通过编 写 ActionScript 功能函数，并在事件中调用它来达到相同的目的，在这 种情况下，按钮组件的单击事件如下所示：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style source="styles.css" />

<mx:Script>

<![CDATA [ public function close() : void { myPanel.visible = false ; }

]] > </mx:Script >

<mx:Panel id="myPanel" 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" click="close();" />

</mx:Panel> </mx:Application>

ActionScript 功能函数是 在 MXML 文件里 的 <mx:Script> 块中进行定义的，然后引用到按钮的单击事件上。

单独 的 ActionScript 代码

为了 从 MXML 文件中更好地分离 出 ActionScript 代码，你可以将它们放到单独 的 ActionScript 文件中而不是作为函数，然后再将它们导入 到 MXML 文件里，如下所示 ： <mx:Script source="myFunctions.as" />

运用行为和变换增强丰富的视觉互动 性 Flex 应用程序是事件驱动的，这就意味着你可以在程序运行时使用事件去添加丰富的视觉互动性。为了实现它，你使用了一个事件触发器，用其来描述一个行为。

在前面的例子中，面板组件 的 visible 属性值被设置 为 false 因而不可见。你还可以通过使用行为来制造出更强的视觉效果。

下面的例子创建了一个行为，该行为首先创建好一种效果，然后把它绑定到组件 的 hideEffect 属性上（触发器） ：

<mx:Fade id="myFade"/>

<mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" hideEffect="{myFade}" >

当关闭按钮被单击时，面板组件淡出而不是消失。

触发器和效果还可以组合到更为复杂的行为中，其被称之为变 换 /transitions 。

第六节在应用程序中添加多态页面

有几种方法在一 个 Flex 应用程序中创建多态页面。你可以使 用 ViewStack 组件、创建单独 的 MXML 文件、或者使用视图状态。视图状态可以被看作是一个组件或组件群构成的预定义的用户界面布局。你可以使用视图状态为程序表现出不同的视觉效果。每一种视图状态都是基于一种基础的状态，并进行继承和扩展。

在随后的例子中，当用户在组件上滚动鼠标时，基础状态发生变化。

当一个视图状态被调用时（通过用户的鼠标在组件上滚动时产生的事件），一种效果（或一种变换）改变了用户界面的外观。

使用视图状态方式 、 ViewStack 方式还 是 MXML 文件方式，取决于你想从一个页面到另一个页面进行变化的范围、用户界面的复杂性、以及实 现 Flex 程序的构架。

第七节开始使 用 Flex

现在，想必你 对 Flex 的概念有了一个基础的认识，让我们开始创 建 Flex 应用程序吧。

使 用 Flex Builder

通过使用新项目向 导 /New Flex Project Wizard 创建一 个 Flex 项目 （ File > New > Flex Project ）。设计，编译，以及调 试 Flex 应用程序所需的所有工具，都被包括 在 Flex Builder 中了。

使 用 Flex SDK

创建一个文件名后缀 为 MXML 的文本文件，在其中添 加 MXML 文件的基本元素（上述例子中的头两行代码），然后使用文档资料（特别 是 Adobe Flex2 Language Reference ）去研究各种组件的用法。编译和调试工具是以命令行的方法提供的。