按照手册内容，这里给出两个客户端和服务端示例代码，你可以编译、部署到BlazeDS服务器中进行体验，我使用的编辑器是Eclipse 3.4 + Flex Builder Plunin 3.0.1，BlazeDS使用的二进制包，服务器是Tomcat 6.0.18，而构建一个BlazeDS应用程序的一般流程如下：

　　1、在WEB-INF/flex目录下的配置文件（一般为remoting-config.xml)中配置一个目的（destination），用他来进行客户端和服务端数据交换；

　　2、在WEB-INF/flex目录下的配置文件（services-config.xml)中配置一个通道（channel），用它来封装数据以进行数据的网络传送；

　　3、用MXML或者ActionScript编写Flex客户端；

　　4、将客户端程序编译为SWF文件，并将它部署在BlazeDS服务器中。

　　一、RPC服务例子

　　Remoting Service是BlazeDS服务器中RPC服务的一种，它能够让客户端访问服务端POJOs的方法。在这个例子中，首先在服务端部署一个Java类：EchoService，用来返回客户端发送过来的字符串，具体代码如下：

package remoting;

public class EchoService
{
　　public String echo(String text) {
　　　　return "Server says: I received '" + text + "' from you";
　　}
}

 　　echo()方法带有一个字符串的参数，并将它与另外一些字符串组合后返回。将该文件编译，把生成的EchoService.class文件拷贝到WEB-INF/classes/remoting目录下。

　　接下来，在WEB-INF/flex/remoting-config.xml文件中定义目的，代码如下：

<destination id="echoSericeDest" channels="my-amf">
　　<properties>
　　　　<source>remoting.EchoService</source>
　　</properties>
</destination>

　　source定义了目的相对应的具体Java类，而channels定义了该目的使用的通道，而通道的定义则在WEB/flex/services-config.xml文件中定义，具体如下：

<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
 　　<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint" />
　　<properties>
　　　　<polling-enabled>false</polling-enabled>
　　<properties>
</channel-definition>

　　服务端的工作完成了，如果使用的是BlazeDS的二进制版本（blazeds.war），在Flex Builder环境下，其中通道的定义默认就完成了，而在目的的定义中，存在一个默认的通道配置（default-channels），所以，在定义目的的时候如果是使用的默认通道配置也可以省略通道。

　　客户端编码主要就是Flex的开发，用到的控件主要就是RemoteObject，在该示例中就是很简单的在文本框中显示返回的结果，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">

<mx:Script>
　　<![CDATA[
　　　　import mx.rpc.events.FaultEvent;
　　　　import mx.rpc.events.ResultEvent;

　　　　private function resultHandle(event:ResultEvent):void
　　　　{
　　　　　　ta.text += "Server responded: " + event.result + "\n";
　　　　}

　　　　private function faultHandle(event:FaultEvent):void
　　　　{
　　　　　　ta.text += "Received fault: " + event.fault + "\n";
　　　　}

　　　　private function echo():void
　　　　{
　　　　　　var text:String = ti.text;
　　　　　　ro.echo(text);
　　　　}
　　]]>
</mx:Script>

<mx:RemoteObject id="ro" destination="echoServiceDest" result="resultHandle(event);" fault="faultHandle(event);" />
<mx:Label text="Enter a text fro the server to echo" />
<mx:TextInput id="ti" text="Hello world!" />
<mx:Button label="Send" click="echo();" />
<mx:TextArea id="ta" width="100%" height="100%" />
</mx:Application>

　　将该文件编译成SWF文件，然后部署到BlazeDS服务器中，启动Tomcat服务器，在浏览器中浏览该文件，将会看到运行的结果，如下图。

 　　另一个示例看下一篇文章：消息服务示例。

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

　　一、概述

　　BlazeDS是Adobe公司发布的免费开源产品，是该公司另一个收费产品LCDS的简化开源版本，BlazeDS使用Java语言在服务端提供如下功能：

　　1、提供客户端（Flex、AIR）通过AMF协议访问服务端（Java）数据的功能；

　　2、提供服务端广播数据给多个客户端的功能；

　　3、提供客户端与客户端实时通信的功能；

　　一个BlazeDS应用程序包括两个部分：客户端应用程序和服务端J2EE应用程序，如下图：

　　客户端程序：一个BlazeDS应用的客户端程序一般为Flex或AIR，而Flex或AIR程序通过Flex SDK中的控件RemoteObject、HTTPService、Producer、Consumer与BlazeDS服务端通信，另外，你也可以结合Flex、HTML和JavaScript技术来构建客户端程序，更可以在HTML和JavaScript中使用Ajax客户端库来与BlazeDS通信。

　　服务端程序：BlazeDS服务端运行在基于J2EE的Web服务器中，通过如下配置可以使得一个J2EE Web服务器支持BlazeDS：

　　1、拷贝BlazeDS的jar文件和相关依赖jar文件到WEB-INF/lib目录下；

　　2、编辑WEB-INF/flex目录下BlazeDS的配置文件；

　　3、在WEB-INF/web.xml文件中定义MessageBrokerServlet和Session监听器；

　　二、特点

　　下图详细展示了BlazeDS的主要特点：

 　　1、RPC Services（RPC服务）：RPC服务被设计成为调用和响应的模式，这对应用程序访问外部数据是一种很好的选择，它能够使客户端异步请求远程服务并直接把结果返回，在具体程序中，可以使用客户端的RPC控件如HTTP GET或HTTP POST（HTTP Services）、SOAP（Web Services）、Java Objects（RemoteObject Services）访问RPC Services。

　　如果你想通过使用RPC Services提供一些企业级功能，如不同域之间数据交换的代理功能、客户端认证、服务器端日志、本地化支持、RPC Services服务集中化管理等功能时，BlazeDS通过使用RemoteObject控件可以轻松实现，而不需要配置他们像SOAP-compliant网络服务。

　　当客户端RPC控件调用远程服务时，该控件就会把服务端返回的数据保存在一个ActionScript对象中，这样，在程序中就能够很轻松的获取该要的数据，而这些客户端控件包括HTTPService、WebService、RemoteObject控件。

　　2、Messaging Services（消息服务）：消息服务就是通过服务器端来回的传送消息以实现客户端的异步交流，一条消息由唯一标识号、BlazeDS头、其他自定义头和消息体组成。

　　客户端程序中发送消息的部分称为消息生产者（producers)，在Flex程序中可以通过Producer控件定义，而接收消息的部分称为消息消费者（consumer），在Flex中可以通过Consumer控件定义，Consumer控件负责订阅和接收服务器端某一个目的地的消息，而Producer控件负责向该目的地发送消息。

　　消息服务同时也支持通过JMSAdapter实现的桥接模式来访问外部的JMS服务器，这使得Flex程序能够与外部的Java应用程序实现数据交流。

　　3、Service adapters：BlazeDS可以访问各种不同的数据持久化方案，比如数据库、JMS等其他持久化机制。

　　4、The message-based framework（基于消息的框架）：BlazeDS在客户端和服务器端来回的传送数据，他是一个基于消息的框架，主要运用了两种交换模式，第一种，请求/响应模式，客户端发送请求给服务端，服务端处理好之后返回一个包含结果的响应，RPC服务就是使用的这种模式；第二种，发布/订阅模式，服务端将数据发布给订阅了该消息的客户端列表，消息服务就是使用这种模式来发布数据给各客户端的，同时，消息服务也使用请求/响应模式来解决一些发布消息、数据交换等问题。

　　5、Channels and endpoints（通道和端点）：在网络上，客户端是通过通道与服务端传送数据的，通道负责封装消息格式、网络协议、解析方式、目的和应用代码，负责格式化和翻译消息为特定网络下的模式，然后分发给相应的端点。另外，通道使得客户端发送给服务端的消息变得有序性和对应性，这对数据传送的一致性和可预见性起到重要的作用。

　　在服务器端，通道是与基于Java的端点发生交换的，端点负责解析消息成特定的协议模式，然后把它传送给普通Java形式的“消息代理人”（Message Broker），最终由消息代理人决定该消息发往何处，路由给恰当的目的地，详细如下图所示：

　　6、Channel types（通道类型）：BlazeDS提供以下几种通道：（1）标准AMF通道；（2）加密AMF通道；（3）HTTP通道（AMFX）。其中AMF和HTTP通道都支持无轮询的请求/响应模式和客户端轮询模式（模拟实时通信），而AMF和HTTP流通道模式提供了真正的数据流实时模式。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

我在博客中上传了所翻译的cairongorm的教程和pureMvc的中文API。结合一段时间的实践，我认为，这些框架均不实用。

cairongorm过于死板，完成一个工作需要N多类。

pureMvc虽然比较灵活，考虑了视图的复用。但是工程大而视图复用很少的时候，使用这个框架非常不合适。

因为不论cairongorm和pureMvc都是基于事件（消息），一个事件（消息）发出后，就很难知道那些组件对这些事件和消息感兴趣，也很难知道那个组件对这个消息或者事件进行了监听和处理。造成程序的调试和维护相当困难。很多隐藏的BUg都是因此而产生的。

所以我建议不要使用这两个框架。

我建议开发者按照如下思路进行Flex开发。

1.写一个mxml文件和一个as文件，二者名称相同但是扩展名不同。

2.mxml文件作为视图（和部分控制），as文件作为module（和部分控制）。

   module上定义视图所需要的数据和数据的处理逻辑（比如，获取远程的数据等）。

  mxml上的控件绑定module上的数据。module无需知道mxml，mxml在创建时需要引用module。

3.当用户操作界面发生请求需要处理数据时，mxml上的响应控件事件的处理函数调用module上的方法，改变数据，改变后的数据通过绑定功能自动地刷新界面（mxml所生成的swf）。

这样做的最大好处就是便于调试，其次是把视图部分和数据以及数据处理部分分离，当视图上的控件发生变化不会影响数据处理的业务。

当实在需要视图复用时，可以考虑使用pureMvc框架。

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

var asTest:myAsClass=new myAsClass(this);

public class myAsClass{
	var _app:App;
     public function myAsClass(app:App)
	{
		_app=app;
	}
}

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

var publicinfo:SeamRemoteObject=new SeamRemoteObject();
var _publicServer:PublicServer;
				
public function PublicInfoCreat()
{
	publicinfo.destination="publicPageInfo";
	publicinfo.getFlexPublicInfo.addEventListener(ResultEvent.RESULT,publicCallBack);  //注册回调函数
	publicinfo.getFlexPublicInfo().lastResult;  //发送请求
}
		
private function publicCallBack(evt:ResultEvent):void{
	//回调函数
	_publicServer=evt.result as PublicServer;
	//trace(_publicServer.requestContextPath);
}

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

3.2 根据比例设定对象的位置和尺寸

3.2.1 问题

你需要依据其父控件的尺寸来确定子对象的大小。

3.2.2 解答

用百分比调整尺寸，这样如果组件的尺寸变了，Flex框架会自动调整它的子对象的大小。

3.2.3 讨论

百分比布局是强有力的工具，它可以让你很容易地根据父对象来确定子对象的大小和位置。例如，如下的RelativePositioningChild.mxml组件按照父对象的宽的40%和高的70%来布局。

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="40%" height="70%" background
Color="#0033ff">
    <mx:Image source="@Embed('../../assets/image.png')"/>
    <mx:Image source="@Embed('../../assets/image.png')"/>
</mx:VBox>

在下面的例子中，RelativePositioningChild的多个实例放到了一个父容器里，这个容器也是按比例确定尺寸的。无论它被添加到哪个容器，这个父容器将决定它的大小，进而决定它的子对象的大小。

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="75%" height="50%" background
Color="#0099ff" alpha="0.3" xmlns:cookbook="oreilly.cookbook.*">
    <cookbook:RelativePositioningChild/>
    <cookbook:RelativePositioningChild/>
</mx:HBox>

为了说明比例尺寸的效果，上面的程序片段被保存为RelativePositioningParent.mxml，并在下面使用：<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

xmlns:cookbook="oreilly.cookbook.*">
    <mx:Script>
        <![CDATA[

            private function changeWidth():void
            {
                this.width = slider.value*150;
            }

        ]]>
    </mx:Script>
    <cookbook:RelativePositioningParent/>
    <mx:HSlider id="slider" change="changeWidth()"/>
</mx:Application>

当滑块改变应用的宽度时，RelativePositioningParent和RelativePositioningChild根据它们的父对象重新确定自己的大小和位置。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

3 容器

.

容器 (containers) 这个词通常指的是在 Flex 框架的 mx.containers 包里面的所有类。容器扩展自 UIComponent 类，添加了布局管理功能，用创建法则（ creation policies) 控制子对象的创建的一系列方法，并自动卷动。各个容器的行为有很大的不同，不过都有定位子对象，用约束或样式布局子对象的能力，并控制卷动，觉得子对象对卷动事件的响应。

对 Flex 3 而言，约束是个新东西。它们让开发者从位置和尺寸两个方面创建定位的规则，并指派给容器的子对象。只有容器才有约束，比如 Canvas 容器， Canvas 也可以绝对定位，这跟 CSS 的作用几乎一样。 Box 和 Tile 容器提供了子对象的自动布局，还有控制包含在布局管理器里的子对象的方法。

3.1 用布局管理器定位子对象

3.1.1 问题

你需要水平或垂直定位多个子对象，并控制这些子对象的布局。

3.1.2 解答

用 HBox 或 VBox 容器，为 HBox 或 VBox 设置水平间距（ horizontalGap ）或垂直间距（ verticalGap ），相应地，设置组件之间的距离。

3.1.3 讨论

扩展自相同的基类 mx.containers.Box, HBox 和 VBox 组件水平地或垂直地布局它们的子对象，他们各自可以包含无数个子对象。 当子对象的尺寸大于 Box 组件的高或宽时，该 Box 组件会默认添加相应的滚动条。要确定子对象之间的距离， VBox 容器用 verticalGap 属性， HBox 容器用 horizontalGap 属性。比如：

<mx:VBox width="400" height="300" verticalGap="20">
        <mx:Button label="Button"/>
        <mx:LinkButton label="Link Button"/>
    </mx:VBox>

可是 HBox 和 VBox 容器不考虑上，下，左，右的约束属性。要在子对象和它们的 Box 容器之间添加空隙，用如下的 Spacer 控件：

<mx:VBox width="400" height="300" verticalGap="20">
        <mx:Button label="Button"/>
        <mx:ComboBox top="60"/>
        <mx:Spacer height="20"/>
        <mx:LinkButton label="Link Button"/>
    </mx:VBox>

要改变子对象的边缘之间的距离或距离填充样式，添加 paddingTop, paddingLeft, paddingRight, 或 paddingBottom 样式。这会影响到所以添加到容器内的子对象。如果要左右移动 VBox 里或上下移动 HBox 里的单个子对象，就在 Box 里添加一个容器，用他来定位子对象：

 <mx:HBox x="400" horizontalGap="10" top="15">
        <mx:Canvas>
            <mx:Button top="50" label="Button" y="20"/>
        </mx:Canvas>
        <mx:Panel height="40" width="40"/>
        <mx:Spacer width="25"/>
        <mx:LinkButton label="Label"/>
        <mx:ComboBox/>
    </mx:HBox>

下面这个例子在一个 Canvas 容器内用到了 HBox 和 VBox 来显示以上两种布局方式：

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:VBox width="400" height="300" verticalGap="20">
        <mx:Button label="Button"/>
        <mx:ComboBox/>
        <mx:Spacer height="20"/>
        <mx:LinkButton label="Link Button"/>
    </mx:VBox>
    <mx:HBox x="400" horizontalGap="10" top="15">
        <mx:Canvas>
            <mx:Button top="50" label="Button" y="20"/>
        </mx:Canvas>
        <mx:Panel height="40" width="40"/>
        <mx:Spacer width="25"/>
        <mx:LinkButton label="Label"/>
        <mx:ComboBox/>
    </mx:HBox>
</mx:Canvas>

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

2.14 处理 focusIn 和 focusOut 事件

2.14.1 问题

当用户的焦点在一个标签控件上时，你想显示一个弹出窗口，而当用户焦点离开该标签控件时，弹出窗口关闭。

2.14.2 解答

用 focusIn 和 focusOut 事件（所有继承自 InteractiveObject 的类的实例均有该事件）去执行 PopUpManager 的恰当的方法。

2.14.3 讨论

基于用户焦点来触发窗口，你可以修改先前的两个方法。以前是当用户单击 LinkButton 时弹出窗口，现在改成由 focusIn 事件触发。当组件接收到焦点时，就触发一个 focusIn 事件。比如当用户用 tab 键跳到该控件，或者用鼠标点击该控件。 focusIn 事件的处理代码添加了如下内容：

    systemManager.removeFocusManager(IFocusManagerContainer(popup))
译者注：移除这句代码，如果用鼠标交互，不影响程序运行效果。如果用 tab 键切换焦点，就会出现错误。

这儿是代码：

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

    <mx:Canvas horizontalCenter="0" verticalCenter="0">
        <mx:LinkButton id="lbl" label="Top" x="100" y="10" focusIn="showDetail(event)"
 focusOut="closePopUp()"/>
        <mx:LinkButton label="Left" x="10" y="100" focusIn="showDetail(event)"
focusOut="closePopUp()"/>
        <mx:LinkButton label="Bottom" x="100" y="200" focusIn="showDetail(event)"
focusOut="closePopUp()"/>
        <mx:LinkButton label="Right" x="200" y="100" focusIn="showDetail(event)"
focusOut="closePopUp()"/>
        <mx:Canvas width="100" height="100" x="125" y="40"
            backgroundColor="#ff0000" rotation="45">
        </mx:Canvas>
    </mx:Canvas>

    <mx:Script>
        <![CDATA[
            import mx.managers.IFocusManagerContainer;
            import mx.managers.PopUpManager;

            private const POPUP_OFFSET:int = 10;

            private var popup:CustomPopUp;

            private function showDetail(evt:FocusEvent):void {
                // create the popup
                popup = CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false));
                popup.message = "This is the detail for " + evt.target.label;

                // position the popup
                var pt:Point = new Point(0, 0);
                pt = evt.target.localToGlobal(pt);
                popup.x = pt.x  + POPUP_OFFSET;
                popup.y = pt.y  + evt.target.height + POPUP_OFFSET;

                systemManager.removeFocusManager(IFocusManagerContainer(popup))
            }

            private function closePopUp():void {
                PopUpManager.removePopUp(popup);
            }

        ]]>
    </mx:Script>
</mx:Application>

当一个弹出窗口被创建时，默认地， SystemManager 触发 FocusManager ，让它与该弹出窗口关联起来。并让焦点循环（控制 tab 键顺序）基于刚被创建的弹出窗口。在本例中，我们期望一种不同的行为：当用户焦点移出一个弹出窗口（例如，用 tab 键使焦点移出该控件），该窗口应当被关闭。从 SystemManager 里移除弹出窗口的 FocusManager 能实现这一点，并能让整个应用的 FocusManager 重新起作用。 focusOut 事件的处理器 closePopUp 包含了关闭弹出窗的逻辑。当应用运行起来后，反复按 tab 键，焦点会在这些 LinkButton 之间循环，而且相应的弹出窗会被创建或移除。

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

2.13 为弹出窗口创建自定义边框

2.13.1 问题

你想为弹出窗口定义边框，让它显示一个标记，来指出是哪个控件触发了这个窗口。

2.13.2 解答

创建 PanelSkin 的子类并覆盖 updateDisplayList 方法，画出标记箭头。并把这个新的 skin 作为弹出窗口的 borderSkin.

2.13.3 讨论

以下是基于 2.12 节的。要修改 CustomPopUp 组件。要自定义窗口边框，就要设置 CustomPopUpd 的 borderSkin 样式为一个名为 CustomPanelSkin 的自定义类。

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    width="300" height="50"
    styleName="customPopUp"
    showCloseButton="true"
    close="handleClose(event)"
    borderSkin="CustomPanelSkin"
    initialize="initPopUp()">

    <mx:Style>
        .customPopUp {
            header-height:2;
            padding-left:5;
            padding-right:5;
            padding-top:5;
            padding-bottom:5;
            border-color:#000000;
            border-alpha:.5;
            border-thickness-left:5;
            border-thickness-right:5;
            border-thickness-bottom:5;
            border-thickness-top:5;
            background-color:#666666;
            color:#ffffff;
        }
    </mx:Style>

    <mx:Text width="100%" height="100%" text="{message}"/>

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.events.CloseEvent;
            [Bindable]
            public var message:String;

            private function handleClose(evt:CloseEvent):void {
                PopUpManager.removePopUp(this);
            }

            private function initPopUp():void {
                this.isPopUp = false;
            }
        ]]>
    </mx:Script>
</mx:TitleWindow>

CustomPanelSkin 类的代码如下。注意设置 TitleWindow 的 isPopUp 属性为 false ，以避免用户能拖动弹出框。

package
{
    import flash.display.Graphics;

    import mx.skins.halo.PanelSkin;

    public class CustomPanelSkin extends PanelSkin
    {
        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w,h);

            var gfx:Graphics = this.graphics;
            gfx.beginFill(this.getStyle("borderColor"),
                            this.getStyle("borderAlpha"));
            gfx.moveTo(this.getStyle("cornerRadius"),0);
            gfx.lineTo(15,-10);
            gfx.lineTo(25,0);
        }
    }
}

这个简单的类扩展了 PanelSkin 类， PanelSkin 类是 TitleWindow 边框的默认皮肤。在被覆盖的 updateDisplayList 方法里，添加了在 CustomPopUp 控件左上角画一个标记箭头的代码。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

2.12 显示并定位多个弹出框

2.12.1 问题

你希望用弹出窗口显示额外的消息给用户。

Recipe 2.12.2. Solution

2.12.2 解答

基于用户交互，用 PopUpManager 创建一个 TitleWindow 组件的实例。

Recipe 2.12.3. Discussion

2.12.3 讨论

Flex 框架包含了一个 PopUpManager 类，它包含有在 Flex 应用中创建，布置，移除最上层窗口的静态方法。请看如下的代码：

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

    <mx:Canvas horizontalCenter="0" verticalCenter="0">

        <mx:LinkButton label="Top" x="100" y="10" click="showDetail(event)"/>
        <mx:LinkButton label="Left" x="10" y="100" click="showDetail(event)"/>
        <mx:LinkButton label="Bottom" x="100" y="200" click="showDetail(event)"/>
        <mx:LinkButton label="Right" x="200" y="100" click="showDetail(event)"/>
        <mx:Canvas width="100" height="100" x="125" y="40"
            backgroundColor="#ff0000" rotation="45">
        </mx:Canvas>
    </mx:Canvas>

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private const POPUP_OFFSET:int = 10;

            private function showDetail(evt:MouseEvent):void {
                // create the popup
                var popup:CustomPopUp = CustomPopUp(PopUpManager.createPopUp(this,
CustomPopUp,false));
                popup.message = "This is the detail for " + evt.target.label;

                // position the popup
                var pt:Point = new Point(0, 0);
                pt = evt.target.localToGlobal(pt);
                popup.x = pt.x  + POPUP_OFFSET;
                popup.y = pt.y  + evt.target.height + POPUP_OFFSET;
            }
        ]]>
    </mx:Script>
</mx:Application>

在这个例子里，创建了四个 LinkButton 控件并按绝对定位放在一个 Canvas 里面。当用户单击一个 LinkButton ，在按钮下方会显示一个弹出框，为用户呈现了详细的消息。

为了做到这一点， LinkButton 的 click 事件与一个 showDetail 方法关联起来。 showDetail 方法里， PopUpManager 的 createPopUp 方法创建了自定义组件 CustomPopUp 的一个实例。接下来弹出框的 message 属性被赋值为需要向用户显示的内容。

译者注： PopUpManager 的 createPopUp 方法创建一个弹出框，并返回对该弹出框的引用。 CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false) ) 是将返回强制改变类型为 CustomPopUp 。所以   var popup:CustomPopUp = CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false)) 也可以改成   var popup:CustomPopUp =PopUpManager.createPopUp(this,CustomPopUp,false) as   CustomPopUp 。

最后，弹出框根据接收请求的 LinkButton 来定位。为了做到这一点，该 LinkButton 的左上角的本地坐标（在该 LinkButton 里，左上角的坐标是（ 0 ， 0 ））被转换成全局坐标（用的是 localToGlobal 方法）。这是一种对所有可视对象和他们的子对象都可用的很方便的方法。

CustomPopUp 类定义如下：

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    width="300" height="50"
    styleName="customPopUp"
    showCloseButton="true"
    close="handleClose(event)">

    <mx:Style>
        .customPopUp {
            header-height:2;
            padding-left:5;
            padding-right:5;
            padding-top:5;
            padding-bottom:5;
            border-color:#000000;
            border-alpha:.5;
            border-thickness-left:5;
            border-thickness-right:5;
            border-thickness-bottom:5;
            border-thickness-top:5;
            background-color:#666666;
            color:#ffffff;
        }
    </mx:Style>

    <mx:Text width="100%" height="100%" text="{message}"/>

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.events.CloseEvent;
            [Bindable]
            public var message:String;

            private function handleClose(evt:CloseEvent):void {
                PopUpManager.removePopUp(this);

            }
        ]]>
    </mx:Script>
</mx:TitleWindow>

CustomPopUp 类继承自 TitleWindow 类，并增加了一个文本控件来显示消息。 TitleWindow 的 close 事件被指派给 handleClose 方法，这个方法用 PopUpManager 的 removePopUp 方法关闭弹出框，它还包含了定义 CustomPopUp 外观的 CSS 样式。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

2.11 使用来自 Calendar 控件的日期

2.11.1 问题

你想让用户从一个日历样式的控件中选择日期。

2.11.2 解答

使用 DataField 控件或者 DateChooser 控件为用户提供便捷的日历样式的控件去选取日期。

2.11.3 讨论

Flex 框架为日历功能提供了两个控件： DateField 和 DateChooser 。 DateField 提供了一个文本输入框和一个日历图标，单击图标会打开一个日历。另一方面， DateChooser 为用户一直显示一个日历。下面的例子是一个简单的旅程计时器，用到了这两种类型的控件。用户用 DateField 选择一个起始日期，而结束日期用 DateChooser. 程序通过控件的 change 事件，在 update 这个事件处理器中计算出旅行持续的时间。两个控件的 selectedDate 属性都会根据用户的选择返回一个日期对象。

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

    <mx:Form>
        <mx:FormHeading label="Trip Calculator"/>
        <mx:FormItem label="Start Date">
            <mx:DateField id="startDate" change="update(event)"/>
        </mx:FormItem>
        <mx:FormItem label="End Date">
            <mx:DateChooser id="endDate" change="update(event)"/>
        </mx:FormItem>
        <mx:FormItem label="Trip Duration (days)">
            <mx:Label id="display"/>
        </mx:FormItem>
    </mx:Form>

    <mx:Script>
        <![CDATA[
            import mx.events.CalendarLayoutChangeEvent;

            private static const MILLISECONDS:int = 1000;
            private static const SECONDS:int = 60;
            private static const MINUTES:int = 60;
            private static const HOURS:int = 24;


            private function update(evt:CalendarLayoutChangeEvent):void {
                try {
                    var diff:Number = endDate.selectedDate.getTime() -
startDate.selectedDate.getTime();
                    // convert the millisecond into days
                    var days:int = int(diff/(MILLISECONDS*SECONDS*MINUTES*HOURS));
                    display.text = days.toString();
                }
                catch(ex:Error) {

                }
            }

        ]]>
    </mx:Script>
</mx:Application>

当执行日期计算时，用 Date 对象的 getTime 方法是很重要的，以便让跨年能正确地被分解。 getTimer 方法返回从 1970.1.1 以来的毫秒数。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

2.10 在应用中显示一个 Alert 窗口

2.10.1 问题

你希望显示一条对话信息，并根据用户选择呈现不同的内容。

2.10.2 解答

用 Alert 控件显示一条消息给用户。

2.10.3 讨论

Alert 控件提供了一个对话框，里面有按钮让用户对对话框里面显示的信息作出反馈。 Alert 控件不能用 MXML 创建，你必须用 ActionScript 。例如：

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

    <mx:Button id="btn" click="showAlert(event)" label="Alert"/>

    <mx:Label id="lbl"/>

    <mx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.controls.Alert;
            import mx.events.MenuEvent;

            private function showAlert(evt:MouseEvent):void {
                var alert:Alert = Alert.show("Button was clicked","Alert Window
Title",Alert.OK|Alert.CANCEL|Alert.NO|Alert.YES,this,onAlertClose);
            }

            private function onAlertClose(evt:CloseEvent):void {
                switch(evt.detail) {
                    case Alert.OK:
                        lbl.text = "OK Clicked";
                        break;
                    case Alert.CANCEL:
                        lbl.text = "CANCEL Clicked";
                        break;
                    case Alert.NO:
                        lbl.text = "NO Clicked";
                        break;
                    case Alert.YES:
                        lbl.text = "YES Clicked";
                        break;
                }
            }
        ]]>
    </mx:Script>
</mx:Application>

当用户单击 btn 按钮，示例代码用 Alert 类里的静态方法 show 创建一个 Alert 控件。 show 方法接收下列的参数来设置 Alert 控件：

text

显示给用户的消息。

title

Alert 对话框的标题。

flags

显示在对话框里的按钮。有效值是 Alert.OK, Alert.CANCEL, Alert.NO, 和 Alert.YES 。用按位 OR 操作符，可以显示多个按钮，例如 Alert.OK | Alert.CANCEL 。

parent

确定 Alert 对话框居中显示在哪个显示对象里面。

closeHandler

当在 Alert 控件上的任何按钮被单击时调用的事件处理函数。

iconClass

在 Alert 里，位于显示信息左边的图标资源类。

defaultButtonFlag

确定在 Alert 里的默认按钮。按下 Enter 键会触发默认按钮。可用的值有 Alert.OK, Alert.CANCEL, Alert.NO, Alert.YES.

onAlertClose 方法被设置为 Alert 的 closeHandle 事件处理器。这个方法接收一个 CloseEvent 对象作为参数，并使用 CloseEvent 的 detail 属性来确定哪一个按钮被单击了。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

2.9 为菜单控件创建事件处理器

2.9.1 问题

你需要让用户与菜单的交互起作用。

2.9.2 解答

为 MenuBar 控件的 itemClick 事件添加侦听器。

2.9.3 讨论

为了响应菜单栏交互，为 MenuBar 控件的 itemClick 事件指派一个侦听器函数 handleMenuClick 。无论何时，只要用户选择了一个菜单项， itemClick 事件会被触发。一个 MenuEvent 对象会被侦听器函数接收到，作为它的参数。 MenuEvent 对象包含了此事件被触发处的菜单项的信息。 MenuEvent 的 item 属性包含了对 dataProvider 里的某项的引用 ，该项是与触发该事件的菜单项相关联的。这就是你会用到的代码：

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

    <mx:MenuBar
        labelField="@label"
        itemClick="handleMenuClick(event)">
        <mx:XMLList>
            <menuitem label="File">
                <menuitem label="New"/>
                <menuitem label="Open"/>
                <menuitem label="Close" enabled="false"/>
            </menuitem>
            <menuitem label="Edit"/>
            <menuitem label="Source"/>
            <menuitem label="View">
                <menuitem label="50%"
                    type="radio" groupName="one"/>
                <menuitem label="100%"
                    type="radio" groupName="one"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="one"/>
            </menuitem>
        </mx:XMLList>
    </mx:MenuBar>

    <mx:Label id="disp0_lbl"/>

    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;

            private function handleMenuClick(evt:MenuEvent):void {
                this.disp0_lbl.text = evt.item.@label + " was selected";
            }
        ]]>
    </mx:Script>
</mx:Application>

  注意：由于 dataProvider 是 E4X 格式的，这个例子使用了 E4X 记号“ @label ”来搜寻 label 属性。 MenuBar 控件也支持别的事件类型，例如 change, itemRollOut, itemRollOver, menuHide, 和 menuShow 。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

2.8 动态填充菜单

2.8.1 问题

你想填充并动态改变菜单

2.8.2 解答

用 ActionScript 分配一个 ArrayCollection 或 XMLListCollection 这样的 Collection 对象给 MenuBar 控件的 dataProvider 属性。

2.8.3 讨论

在 Flex 3 里的 MenuBar 控件支持在运行时动态生成菜单项。下面的代码生成一个有 MenuBar 控件的应用，当应用被初始化时，这个 MenuBar 被一个 ArrayCollecton 对象填充。

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    creationComplete="initApp(event)">

    <mx:MenuBar id="menu" dataProvider="{menu_dp}"/>

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            private var menu_dp:ArrayCollection;

            private function initApp(evt:FlexEvent):void {
                var temp:Array = new Array();

                var subNodes:ArrayCollection = new ArrayCollection([{label:"New"},
                                                                      {label:"Open"},
                                                                      {label:"Close",enabled:false}]);
                temp.push({label:"File",children:subNodes});
                temp.push({label:"Edit"});
                temp.push({label:"Source"});

                subNodes = new ArrayCollection([{label:"50%", type:"radio",roupName:"one"},
                                           {label:"100%", type:"radio", groupName:"one",selected:true},
                                           {label:"150%", type:"radio", groupName:"one"}]);
                temp.push({label:"View",children:subNodes});
                menu_dp = new ArrayCollection(temp);
            }
        ]]>
    </mx:Script>
</mx:Application>

上述代码用 binding 绑定一个名为 menu_dp 的 ArrayCollecton 对象到 MenuBar 组件的 dataProvider 属性。在该应用的 creationComplete 事件发生时， menu_dp 被初始化，并填充菜单项。就像 Flex 里的其它数据驱动组件一样，使用类似 ArrayCollection 或 XMLListCollection 的 Collection 组件，可以确保基础数据的任何变化都会导致控件的显示作相应的刷新。

译者注 : 请将 subNodes 的第二项的 selected 属性改成 toggled 。如 2.7 节所述， toggled 属性才是控制 radio 类型的菜单项是否被选中的。

Collection 组件提供了便利的方法编辑，添加，删除菜单项。为了说明这一点，这个例子在 MenuBar 下添加了一个简单的 Form 组件，让你可以根据他们在 ArrayCollecton 里的索引编辑菜单。

<mx:Form>
        <mx:FormHeading label="Menu Editor"/>
        <mx:FormItem label="Menu Index">
            <mx:TextInput id="menuIdx" restrict="0-9" text="0" width="20"/>
        </mx:FormItem>
        <mx:FormItem label="Sub-Menu Index">
            <mx:TextInput id="subMenuIdx" restrict="0-9" width="20"/>
        </mx:FormItem>
        <mx:FormItem label="Menu Label">
            <mx:TextInput id="label_ti"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Edit" click="editMenu()"/>
        </mx:FormItem>
    </mx:Form>

这是一个很基础的 Form ，它的 input 控件可以让你指定数组索引，依此来获取一个特定的菜单项。在 menuIdx 文本框里输入 0 ，并保持 subMenuIdx 为空，则指定 File 菜单的顶级。在 menuIdx 文本框里输入 0 ，在 subMenuIdx 里输入 0 ，则指定 New 子菜单项。

当用户单击 Edit 按钮， editMenu 方法就被调用，这个方法用指定的索引来获取某个菜单项的引用并改变它的标签。请看如下代码：

private function editMenu():void {
    var itemToEdit:Object;
    try {
        itemToEdit = menu_dp.getItemAt(int(menuIdx.text));
        if(subMenuIdx.text) {
            itemToEdit = itemToEdit.children.getItemAt(int(subMenuIdx.text));
        }
        itemToEdit.label = label_ti.text;
        menu_dp.itemUpdated(itemToEdit);
    }
    catch(ex:Error){
        trace("could not retrieve menu item");
    }
}

editMenu 里的代码查找输入 menuIdx 和 subMenuIdx 里的值，依此去寻找一个特定的菜单项，然后用 label_ti 里的值去刷新那个菜单项显示的内容。注意：为了改变菜单的显示，与 MenuBar 关联的 dataProvider 被改变了，然后用 ArrayCollecton 的 itemUpdated 方法来请求刷新菜单显示。在类似这个例子的嵌套数据结构中，调用 itemUpdated 来请求显示刷新很重要。否则，基础数据改变了，但是显示仍然是旧的内容。示例代码中用了一个 try…catch 块来为数组界限做一些基础的错误处理。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

2.7 为菜单提供数据

2.7.1 问题

用 data provider 生成菜单栏

2.7.2 解答

用 MXML 为 MenuBar 控件的 dataProvider 属性指定一个 ArrayCollecton ， XMLListCollection 之类的 Collection 对象。

Recipe 2.7.3. Discussion

2.7.3 讨论

用数据生成一个 MenuBar 控件最简单的方式是用 MXML 在控件内部生成一个 XMLList 类型的实例。

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="horizontal">
    <mx:MenuBar labelField="@label">
        <mx:XMLList>
            <menuitem label="File">
                <menuitem label="New"/>
                <menuitem label="Open"/>
                <menuitem label="Close" enabled="false"/>
            </menuitem>
            <menuitem label="Edit"/>
            <menuitem label="Source"/>
            <menuitem label="View">
                <menuitem label="50%"
                    type="radio" groupName="one"/>
                <menuitem label="100%"
                    type="radio" groupName="one"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="one"/>
            </menuitem>
        </mx:XMLList>
    </mx:MenuBar>
</mx:Application>

因为 dataProvider 属性是 MenuBar 控件的默认属性， XMLList 对象可以被指派作为 <mx:MenuBar> 标签的直接子对象。 XMLList 中的顶级节点相当于 MenuBar 上的按钮。这些节点可以取任何名字——比如，不用 menuitem 也能作为子节点。不过，节点的属性有特别的意思，并影响显示的效果和菜单交互。这些属性列表如下：

enabled

指定用户时候能选择这个菜单项。

groupName

当类型是 radio 时适用。具有相同 groupName 的菜单项作为一组 radio 。

icon

指定一个图片资源的类标识符。

label

指定菜单项显示的内容。注意当 dataProvider 是 E4X 格式，就像前面的例子， MenuBar 的 labelField 属性必须明确指定，即使在 XMLList 里有 label 属性。

toggled

指定 check 或 radio 类型的菜单项是否是选中状态。

type

指定菜单的类型（三种选项）： check, radio, 或 separator 。其中 separator 是默认的，也就是不需要指定。

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

2.6 设置 控件的 labelFunction

2.6.1 问题

你需要综合 data provider 中的不同部分来定制 comboBox 组件里面的标签。

2.6.2 解答

用 comboBox 的 labelFunction 属性来指派一个自定义的函数，这个函数定义了显示的标签。

2.6.3 讨论

默认情况下， Flex 里的列表组件是在 dataProvider 的项目里寻找 label 属性作为显示的内容。可是，在某些情况下， dataProvider 没有 label 属性，或者你需要显示的内容是从 dataProvider 的项目里的多个部分组合起来的。 labelFunction 属性允许为 dataProvider 的项引用一个用户定义的方法，并为每项返回一个显示标签。

在如下的例子中， comboBox 的 labelFunction 属性包含了对 getFullName 函数的引用，那个函数将 dataProvider 的每项里的 fName 和 lName 部分连接起来并返回这个全名字符串。请看：

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

    <mx:ComboBox dataProvider="{myDP}" labelFunction="getFullName"/>

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            private var myDP:ArrayCollection = new ArrayCollection([{id:1,fName:
"Lucky", lName:"Luke"}, {id:2, fName:
"Bart", lName:"Simpson"}]);

            private function getFullName(item:Object):String{
                return item.fName + " " + item.lName;
            }

        ]]>
    </mx:Script>
</mx:Application>

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

2.5 设置组件的 tab 键顺序

2.5.1 问题

你需要改变在 Flex 应用里组件的默认 tab 键顺序

2.5.2 解答

用 Flex 组件的 tabIndex 属性设定自定义的 tab 键顺序。

2.5.3 讨论

默认地，所有能接收 tab 键的 Flex 组件都有 tab 键顺序，这个顺序基于他们在屏幕上的布局。要改变默认的顺序并明确地指定一个自定义的 tab 键顺序，用这些组件的 tabIndex 属性就可以了。如下的 TextInput 组件的 tabIndex 属性被设置为从左到右的顺序：

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

    <mx:VBox>
        <mx:Label text="First Name : "/>
        <mx:TextInput tabIndex="1"/>
        <mx:Label text="Home # : "/>
        <mx:TextInput tabIndex="3"/>
    </mx:VBox>
    <mx:VBox>
        <mx:Label text="Last Name : "/>
        <mx:TextInput tabIndex="2"/>
        <mx:Label text="Work # : "/>
        <mx:TextInput tabIndex="4"
            text="978-111-2345"/>
        <mx:Button label="Submit" tabIndex="5"/>
    </mx:VBox>
</mx:Application>

如果 tab 顺序没有指定，默认的顺序是基于布局的，是从上到下。 tabIndex 属性也可以在 ActionScript 程序设定。如果在运行时有动态生成的子组件，并且需要去控制 tab 键顺序时，这一点很有用。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

以前版本的 ActionScript 有个问题，就是当用户的鼠标没有在 Flash 影片上时，你不能得到任何通知。这造成了如下的困难，用户还在与 Flash 影片交互，还是已经放弃并转移到别的东西上去了。当我们有一个自定义的光标的时候这个问题特别突出，当真正的光标已经移到别的地方的时候，自定义的光标仍然显示在 Flash 影片中。

用 stage 的 MOUSE_LEAVE 事件， ActionScript3 现在能让你检测到鼠标离开 Flash 影片。请在如下影片上移动鼠标。

详情请查看：http://www.kirupa.com/developer/flashcs3/detecting_when_mouse_leaves_movie.htm

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++�