õFlex Builderݼ

ߣBing   :ת   Դ: Ris

当一个组件的实例分派一个事件时，你为那个事件注册的监听器对象就会被通知。 你可以在 ActionScript 中定义事件监听器（或者叫做事件处理器）来处理事件。你 既可以在 MXML 声明中为一个组件注册事件监听器，也可以在 ActionScript 中实现 相同的功能。

接收事件通知有三种方式：
 在 MXML 中注册一个事件处理器
 在 MXML 中创建一个内联（inline）的事件处理器
 通过 ActionScript 注册一个事件处理器

在 MXML 中注册一个事件处理器
第一个，而且是最广泛地被用来接收事件通知的方法就是在 MXML 中定义一个事件处 理器，当事件发生时就调用它。
在这个例子中，你为一个 Button 控件的 click（点击）事件定义了一个事件处理器。 当用户点击这个 Button 控件时，事件处理器会把 Label 控件的 text 属性设成  "Hello，World!"。

示例

＜?xml  version="1.0"  encoding="utf-8"?>
＜mx:Application
xmlns:mx=" http://www.adobe.com/2006/mxml "
width="300"  height="200"
horizontalAlign="center"  verticalAlign="middle"
viewSourceURL="src/HandlingEventsEventHandler/index.html">
＜mx:Script>
＜![CDATA[
import  flash.events.MouseEvent;
private  function  clickHandler  (  event:MouseEvent  ):void
{
myLabel.text  =  "Hello，World!";
} 
]]> 
＜/mx:Script>
＜mx:Panel
title="My  Application"  horizontalAlign="center"
paddingTop="10"  paddingBottom="10"  paddingLeft="10"
paddingRight="10"  >
＜mx:Label  id="myLabel"  width="180"  fontWeight="bold"
fontSize="24"/> 
＜mx:Button  id="myButton"  label="Click  Me!" 
click="clickHandler(event);"  /> 
＜/mx:Panel>
＜/mx:Application>

通过 ActionScript 注册一个事件监听器
你也可以通过使用 ActionScript 注册一个事件处理器来响应事件。 在这个例子中，使用ActionScript中的addEventHandler()  方法注册了一个事件监
听器。这个addEventHandler()方法被放在了用来处理Application容器的
creationComplete事件的事件处理器中。
提示：程序开始运行的时候，在Application的外观和它的子组件初始化完毕之后， Application的creationComplete事件就会发生。creationComplete事件的处理器提 供了一个很方便的地方来放置注册事件监听器的ActionScript代码。

示例
＜?xml  version="1.0"  encoding="utf-8"?>
＜mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/HandlingEventsActionScript/index.html"
horizontalAlign="center"  verticalAlign="middle"
width="300"  height="200"
creationComplete="creationCompleteHandler(event);">
＜mx:Script> 
＜![CDATA[ 
import  flash.events.MouseEvent;
import  mx.events.FlexEvent; 
private  function
creationCompleteHandler(event:FlexEvent):void
 
{

clickHandler);
}
 //  Listen  for  the  click  event  on  the  Button  control
myButton.addEventListener  (MouseEvent.CLICK,
 private  function  clickHandler  (  event:Event  ):void
{
myLabel.text  =  "Hello,  World!";

} 
]]> 
＜/mx:Script>
＜mx:Panel
title="My  Application"  horizontalAlign="center"
paddingTop="10"  paddingBottom="10"  paddingLeft="10"
paddingRight="10">
＜mx:Label  id="myLabel"  width="180"  fontWeight="bold"
fontSize="24"/> 
＜mx:Button  id="myButton"  label="Click  Me!"  /> 
＜/mx:Panel>
＜/mx:Application>
运行结果图示：

小编物语：本文援引 Dreamer's Blog ，特此感谢作者的努力。大家如果觉得这篇教程正是你所需要的话，请别忘了去作者的博客打打气啊。

<mx:Panel>标签定义了一个Panel容器，它包含有一个标题栏，一个标题，一个状态 信息，一个边框，以及用来放置子容器或空间的内容区域。它的title（标题）属性 的值被设定为  "My  Application"。
<mx:Label>标签定义了一个Label控件，它是一个可以显示文本的很简单的用户界面 组件。它的text属性被设定为  "Hello,  World!"。
<mx:Label>  标签的fontWeight  和  fontSize  属性改变了使用字体的样式。你也可 以使用CSS给你的组件加上样式。
更多信息，请看Flex开发者指南中的“使用层叠样式表（CSS）”。 注意：你可以使用命令行编译器  mxmlc 或者 Flex Builder 2  来编译你的 Flex 程序。
关于使用 mxmlc 编译程序的步骤，请看“ 使用 MXML 和 ActionScript 编程 ”（译注： 此篇我已经译成中文）。

示例

<?xml  version="1.0"  encoding="utf-8"?＞
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/HelloWorld/index.html"
horizontalAlign="center"  verticalAlign="middle"
width="300"  height="160"＞
<mx:Panel
paddingTop="10"  paddingBottom="10"  paddingLeft="10"
paddingRight="10"
title="My  Application"＞

<mx:Label  text="Hello  World!"  fontWeight="bold"  fontSize="24"/＞
</mx:Panel＞ 
</mx:Application＞ 

运行结果图示：>

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

Adobe  Flex  2.0 是一项新兴的技术，它基于强大的已经很成熟的 J2EE 平台，具有一些很强大并 且迷人的特性，比如 Flash 的表现能力，丰富的媒体和离线能力等等。Flex 2.0 虽然在前台表现
为 Flash，却是更多地面向开发者（developer），而不是设计者（designer）。你只需要编写代码就 可以使用各种控件做出很漂亮的东西，这是许多缺少艺术细胞的开发人员向往的事情。而且 Flex 除去了 Flash 中一些令很多人费解的东西，比如帧，元件等（我本人就怎么努力也无法学会 Flash， 郁闷），完全可以将界面设计和逻辑实现分离开来，使美工和程序员专注于自己的东西，相信这 也是大家所希望看到的。

其实  Flex  2.0  也不算是 太新的东西 ，在  Flex  2.0  之前已经 有了  MacroMedia  Flex  1.0  和 MacroMedia  Flex  1.5，不过国内很少有人关注。Flex  1.0 和 1.5 的性能都不是很好，编译出来的 SWF 文件很大，而且  Flex Builder 1.5 是一个类似于 Dreamweaver 的编辑器，狂占内存，我的机 器配置又不是太先进，用起来苦不堪言，调试的时候每每都要等上一段时间页面才能编译并显 示出来。由于这些原因，大多数人对 Flex 都只是观望态度。但是 Adobe 收购了 MacroMedia 之 后推出的 Flex 2.0 相对于 Flex 1.5 可以说是一个全新的版本，是 Flex 的真正的起点。它使用了强 面向对象的功能强大的 ActionScript 3.0 取代了以前的 ActionScript 版本，使得运行效率大大提高， 编译出来的 SWF 文件体积也缩小很多。而且 Adobe 摒弃了以前的 Flex  Builder，做了全新的基
于 Eclipse 的 Flex Builder 2.0，使得开发环境改进良多，提高了开发者的体验（用起来确实舒服 多了，代码提示等方面做的很不错，我可以证明  ^_^）。

Adobe Flex 2.0 可以称得上是最强大的 RIA（Rich Internet Application，富因特网应用程序）开发 工具。但是由于国内比较落后，很多新技术出来好像都要等上几年才能传到国内并且流行。怎 么办？加强经济建设，加快改革开放，使中国赶紧成为发达国家，让人家做的软件研究的技术 发行出来就有中文版的……  不过这些好像纯粹是幻想，至少近期是不可能了，没有办法，只好 去啃英文文档。然而关于 Flex 的英文资料也不是很多，Flex 自带的帮助是最好的文档，而且看 英文文档的效率是很低的，远不如看母语来的畅快。我深知其中痛楚，所以就想翻译一些入门 的文章供大家参考，而最好的入门文章莫过于 Adobe Flex 开发者中心的这些 Quick Starts。以后 我会逐步把它们翻译出来，可能全部翻译，也可能只翻译其中一部分，我会把翻译的所有这些 都做成 PDF 文件放到网上，算是对初学者的帮助，也是对自己的一种历练（说了那么多乱七八 糟的，现在才说重点，发现自己废话也够多）。原文中的一些示例不能嵌入到 PDF 中，所以大家 如果想看代码运行情况，还请到原文中去找。另外，由于本人英语水平和技术水平极其有限， 审校工作也做得不好，书中出现错误或者不妥之处在所难免，恳请并热烈欢迎大家批评指正， 先谢谢大家。

虽然只是翻译几篇文章发出来，读者也可能很少，但是我还是想在这里感谢几个人（虚荣一下， 莫怪  ^_^），他们是我的兄弟们：冬瓜，小侯，雷子，张霄。虽然他们没有对翻译做任何贡献而 且有可能问 Flex 是不是很好吃，但是他们是我的精神支柱和生活中的重要部分。谢谢你们，我 以你们为荣。

使用 MXML 和 ActionScript 编程
Adobe®是把 Flex 作为一个 ActionScript 类库实现的。这个类库包含了组件（容器
和控件），manager 类，数据服务类，以及具有其他特性的类。你可以通过使用带有 类库的 MXML 和 ActionScript 语言来开发应用程序。

MXML

MXML 是一个可以让你在 Adobe® Flex™中布局用户界面组件的一种 XML 语言。你也可 以使用 MXML 声明来定义程序中的非可视化组件，比如对服务器端数据源的访问以及 用户界面组件和数据源之间的数据绑定。
比如，你可以像下面这样，使用＜mx:Button＞标签来创建 Button 控件的一个实例：
＜mx:Button  id="myButton"  label="I‘m  a  button!"/＞
这里通过设定 id 属性赋予了这个 Button 实例一个独一无二的名字，你以后可以使 用这个名字来引用这个实例。而 label  属性用来设置显示在这个 Button 实例上的标 签内容。

下面的例子展示了用来创建一个展示 Button 控件的 Flex 程序的完整代码：
＜?xml  version="1.0"  encoding="utf-8"?＞
＜mx:Application
xmlns:mx=" http://www.adobe.com/2006/mxml "
horizontalAlign="center"  verticalAlign="center"＞

＜mx:Button  id="myButton"  label="I’m  a  button!"  /＞
＜/mx:Application＞

当你编写完一个 Flex 程序之后，你必须使用 Flex 编译器编译它。Flex 编译器是一 个叫做  mxmlc 的小型执行文件，它在你的 Flex  2 安装目录下的 Flex  SDK  2.0\bin 文件夹中。
提示：请确定 Flex  2 安装目录\  Flex  SDK  2.0\bin 文件夹在你的系统变量中。把 Flex 编译器设定到你的系统变量中可以使你不管在哪个文件夹下都可以从命令行直
接调用它。

步骤：

1.  用你喜欢的文本编辑器创建一个新的文件（比如，记事本）并把它保存为
MyFirst.mxml。

2.  把前面例子中的代码写入 MyFirst.mxml 中并保存文件。

3.  通过选择  开始  ＞  所有程序  ＞  附件  ＞  命令提示符  ，打开一个命令行窗口。
4.  改变当前的目录，将它指向你在第一步中保存的 Flex 程序所在的文件夹。
5.  敲入下面的命令来调用 Flex 编译器：
mxmlc  --strict=true  --file-specs  MyFirst.mxml
命令行中以两个短划线开头的两个元素就是所谓的编译器选项，它们被用来 定义 Flex 编译器的行为。在上一个例子中，你把  –strict  选项设为 true  来 强制编译器执行 strict 模式。在 strict 模式中，编译器对你的代码有更严 格的检查。比如，它会检查你是否为变量定义了类型。--file-specs 用来定 义需要编译的 MXML 文件。
6.  你可以在 Windows 资源管理器中双击 SWF 文件来运行它，也可以在命令行中 输入它的名字在独立的 Adobe  Flash  Player  9 中运行它。

运行结果图示：

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

提示：你也可以使用Adobe Flex Builder 2 来创建和编译你的Flex应用程序。AdobeFlex Builder2是一个含有一个可视化设计视图的开发Flex的集成开发环境（IDE）。 想要获得更多关于Flex  Builder2的信息，请看使用  Flex  Builder2。

ActionScript
MXML 标签与 ActionScript 类或者类中的属性是相对应的。当你编译你的 Flex 应用 程序的时候，Flex 解析你的 MXML 标签并且生成相应的 ActionScript 类。然后这些 ActionScript 类会被编译成 SWF 字节码存储到一个 SWF 文件中。
提示：你可以把--keep-generated-actionscript  选项添加到你的 mxmlc 命令行中， 来查看 Flex 生成的 ActionScript 中间文件。
继续看上面的例子，Flex 提供了一个定义 Flex Button 控件的 ActionScript Button类。
注意：在上面的例子中，＜mx:Button＞标签中的  mx 前缀是一个命名空间。它是通过
在 Application 标签中使用一个独一无二的 URL 来声明的。mx 前缀把在 mx 命名空间 中的每个组件映射到它的完全限定类名。这就是为什么 Flex 编译器可以在找到与 mx 命名空间中的 MXML 标签相对应的 ActionScript 类。
下面的例子展示了如何使用 ActionScript 来创建一个 Button 控件。最后结果和前 面的 MXML 版本的结果是一样的。

＜?xml  version="1.0"  encoding="utf-8"?＞
＜mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/GettingStartedActionScript/index.html"
creationComplete="creationCompleteHandler();"
width="300"  height="80"  ＞
 ＜mx:Script＞
＜![CDATA[ 
import  mx.controls.Button; 
import  mx.events.FlexEvent;
  private  var  myButton:Button;
  private  function  creationCompleteHandler():void
  {
//  创建一个 Button 实例并设置其标签
myButton  =  new  Button();
myButton.label  =  "I‘m  a  button!";
//一旦 button 组件创建完毕就要通知应用程序并对布局进行处理
myButton.addEventListener  (FlexEvent.CREATION_COMPLETE,
buttonCreationCompleteHandler);
//  将  Button 实例添加到  DisplayList
addChild  (myButton);
}
private  function  buttonCreationCompleteHandler
(  evt:FlexEvent  ):void
{
//  将按钮居中显示
myButton.x  =  parent.width/2  -  myButton.width/2;
myButton.y  =  parent.height/2  -  myButton.height/2;
}
]]＞ 
＜/mx:Script＞ 
＜/mx:Application＞

当你通过 ActionScript 来创建一个 Flex 组件时，你必须导入这个组件的类。你还
必须使用 addChild()方法将组件添加到程序的 DisplayList 中来使其可见。通过比 较这两个等价的例子的长度和复杂性，你可以发现这种简单的，基于标签的，而且 具有声明式语法的 MXML 是如何使你避免编写很多行 ActionScript 代码来布局组件 的。

运行结果图示：

译注：由于文档中无法嵌入 SWF 文件，代码运行结果请查看原文中相应的部分。

注意：这个例子展示了如何在 Script 标签中编写 ActionScript，这是在 Flex 程序 中包含 ActionScript 代码的一种可行的方法。其它的方法是将 script 代码块分离 到外部 ActionScript 文件中或者使用外部的 ActionScript 类。

From Adobe Labs

Keyboard Shortcuts

This page contains a list of useful Keyboard shortcuts available within Flex Builder.

You can get a complete list within Flex Builder by pressing CTRL-SHIFT-L.