public interface FlexService { 
    Employee createEmployee(String name,String title,boolean gender,Date birth); 
    void deleteEmployee(String id); 
    Employee[] queryByName(String name); 
    Employee[] queryAll(); 
}

public class FlexServiceImpl implements FlexService { 
    private static final Employee[] EMPTY_EMPLOYEE_ARRAY = new Employee[0]; 
    private Facade facade; 

    public void setFacade(Facade facade) { 
        this.facade = facade; 
    } 

    public Employee createEmployee(String name,Date birth) { 
        return facade.createEmployee(name,title,gender,birth); 
    } 

    public void deleteEmployee(String id) { 
        facade.deleteEmployee(id); 
    } 

    public Employee[] queryAll() { 
        return facade.queryAll().toArray(EMPTY_EMPLOYEE_ARRAY); 
    } 

    public Employee[] queryByName(String name) { 
        return facade.queryByName(name).toArray(EMPTY_EMPLOYEE_ARRAY); 
    } 
}

backport-util-concurrent.jar 
commons-httpclient.jar 
commons-logging.jar 
flex-messaging-common.jar 
flex-messaging-core.jar 
flex-messaging-proxy.jar 
flex-messaging-remoting.jar

<listener> 
    <listener-class>flex.messaging.HttpFlexSession</listener-class> 
</listener>

<servlet> 
    <servlet-name>messageBroker</servlet-name> 
    <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class> 
    <init-param> 
        <param-name>services.configuration.file</param-name> 
        <param-value>/WEB-INF/flex/services-config.xml</param-value> 
    </init-param> 
    <load-on-startup>0</load-on-startup> 
</servlet> 

<servlet-mapping> 
    <servlet-name>messageBroker</servlet-name> 
    <url-pattern>/messagebroker/*</url-pattern> 
</servlet-mapping>

<destination id="flexService"> 
    <properties> 
        <source>org.expressme.employee.mgmt.flex.FlexServiceImpl</source> 
        <scope>application</scope> 
    </properties> 
</destination>

<destination id="flexService"> 
    <properties> 
        <factory>flexFactory</factory> 
        <source>flexService</source> 
        <scope>application</scope> 
    </properties> 
</destination>

<factories> 
    <factory id="flexFactory" class="org.expressme.employee.mgmt.flex.FlexFactoryImpl"/> 
</factories>

class SpringFactoryInstance extends FactoryInstance { 
    private Log log = LogFactory.getLog(getClass()); 

    SpringFactoryInstance(FlexFactory factory,String id,ConfigMap properties) { 
        super(factory,id,properties); 
    } 

    public Object lookup() { 
        ApplicationContext appContext = WebApplicationContextUtils. 
                getrequiredWebApplicationContext( 
                    FlexContext.getServletConfig().getServletContext() 
        ); 
        String beanName = getSource(); 
        try { 
            log.info("Lookup bean from Spring ApplicationContext: " + beanName); 
            return appContext.getBean(beanName); 
        } 
        catch (NoSuchBeanDefinitionException nex) { 
            ... 
        } 
        catch (BeansException bex) { 
            ... 
        } 
        catch (Exception ex) { 
            ... 
        } 
    } 
}

public class FlexFactoryImpl implements FlexFactory { 
    private Log log = LogFactory.getLog(getClass()); 

    public FactoryInstance createFactoryInstance(String id,ConfigMap properties) { 
        log.info("Create FactoryInstance."); 
        SpringFactoryInstance instance = new SpringFactoryInstance(this,properties); 
        instance.setSource(properties.getPropertyAsString(SOURCE,instance.getId())); 
        return instance; 
    } 

    public Object lookup(FactoryInstance instanceInfo) { 
        log.info("Lookup service object."); 
        return instanceInfo.lookup(); 
    } 

    public void initialize(String id,ConfigMap configMap) { 
    } 
}

properties.getPropertyAsString(SOURCE,instance.getId())

 开发 Flex 客户端 
      
 首先安装 Flex Builder 3，可以在 Adobe 的官方网站获得 30 天免费试用版。然后，打开 Flex Builder 3，创建一个新的 Flex Project，命名为 EmployeeMgmt-Flex：@H_301_14@ 
      
 图 3. 新建 Flex 工程 - 第一步
 
      
@H_301_14@
 Flex Project 需要指定 Server 端的配置文件地址：@H_301_14@ 
      
 图 4. 新建 Flex 工程 - 第二步
 
      
@H_301_14@
 因此，需要填入 EmployeeMgmt-Server 项目的 web 根目录，该目录下必须要存在 /WEB-INF/flex/。点击“Validate Configuration”验证配置文件是否正确，只有通过验证后，才能继续。默认地，Flex Builder 将会把生成的 Flash 文件放到 EmployeeMgmt-Server 项目的web/EmployeeMgmt-Flex-debug 目录下。@H_301_14@ 
      
 一个 Flex Project 的目录结构如下：@H_301_14@ 
      
 图 5. Flex 工程的目录结构
 
      
@H_301_14@
 用 Flex Builder 做出漂亮的用户界面非常容易。Flex Builder 提供了一个可视化的编辑器，通过简单的拖拽，一个毫无经验的开发人员也能够设计出漂亮的布局。如果熟悉一点 XML 的知识，编辑 MXML 也并非难事。我们设计的 Employee Management 系统界面的最终效果如下：@H_301_14@ 
      
 图 6. 用 Flex Builder 的可视化编辑器设计界面
 
      
@H_301_14@
 本文不打算讨论如何编写 Flex 界面，而是把重点放在如何实现远程调用。@H_301_14@ 
      
 为了能在 Flex 中实现远程调用，我们需要定义一个 RemoteObject 对象。可以通过 ActionScript 编码创建该对象，也可以直接在 MXML 中定义一个 RemoteObject 对象，并列出其所有的方法：@H_301_14@ 
      
 清单 13. 定义 flexServiceRO
 
      
 
       
<mx:RemoteObject id="flexServiceRO" destination="flexService"> 
    <mx:method name="queryAll" result="handleQueryAll(result : ResultEvent)"/> 
</mx:RemoteObject>
 
      
 
      
 现在，就可以调用这个名为 flexServiceRO 的 RemoteObject 对象的方法了：@H_301_14@ 
      
 清单 14. 调用 FlexServiceRO.queryAll()
 
      
 
       
 flexServiceRO.queryAll(function(result : ResultEvent) { 
    var employees = result.result as Array; 
 });
 
      
 
      
 运行该 Flex Application，雇员信息已经被正确获取了：@H_301_14@ 
      
 图 7. 在浏览器中运行 Flex application
 
      
@H_301_14@
回页首@H_301_14@ 
      
 增强 RemoteObject 对象
 
      
 通过 RemoteObject 进行调用虽然简单，但存在不少问题：首先，RemoteObject 是一个 Dynamic Class，Flex Builder 的编译器无法替我们检查参数类型和参数个数，这样，在编写 ActionScript 代码时极易出错。此外，接口变动时（这种情况常常发生），需要重新修改 RemoteObject 的定义。此外，Flex 团队需要一份随时修订的完整的 FlexService 接口文档才能工作。@H_301_14@ 
      
 因此，最好能使用强类型的 RemoteObject 接口，让 Flex Builder 的编译器及早发现错误。这个强类型的 RemoteObject 最好能通过 Java EE 应用的 FlexService 接口自动生成，这样，就无需再维护 RemoteObject 的定义。@H_301_14@ 
      
 为了能完成自动生成 RemoteObject 对象，我编写了一个 Java2ActionScript 的 Ant 任务来自动转换 FlexService 接口以及相关的所有 JavaBean。JavaInterface2RemoteObjectTask 完成一个 Java 接口对象到 RemoteObject 对象的转换。使用如下的 Ant 脚本：@H_301_14@ 
      
 清单 15. 生成 ActionScript class 的 Ant 脚本
 
      
 
       
<taskdef name="genactionscript" classname="org.expressme.ant.JavaBean2ActionScriptTask"> 
    <classpath refid="build-classpath" /> 
</taskdef> 
<taskdef name="genremoteobject" 
    classname="org.expressme.ant.JavaInterface2RemoteObjectTask"> 
    <classpath refid="build-classpath" /> 
</taskdef> 
<genactionscript 
    packageName="org.expressme.employee.mgmt"
    includes="Employee"
    orderByName="true"
    encoding="UTF-8"
    outputDir="${gen.dir}"
/> 
<genremoteobject 
    interfaceClass="org.expressme.employee.mgmt.flex.FlexService"
    encoding="UTF-8"
    outputDir="${gen.dir}"
    destination="flexService"
/>
 
      
 
      
 转换后的 FlexServiceRO 类拥有 Java 接口对应的所有方法，每个方法均为强类型签名，并添加额外的两个可选的函数处理 result 和 fault 事件。例如，queryByName 方法：@H_301_14@ 
      
 清单 16. 自动生成的 queryByName() 方法
 
      
 
       
public function queryByName(arg1 : String,result : Function = null,fault : Function = null) : void { 
    var op : AbstractOperation = ro.getOperation("queryByName"); 
    if (result!=null) { 
        op.addEventListener(ResultEvent.RESULT,result); 
    } 
    if (fault!=null) { 
        op.addEventListener(FaultEvent.FAULT,fault); 
    } 
    var f : Function = function() : void { 
        op.removeEventListener(ResultEvent.RESULT,f); 
        op.removeEventListener(FaultEvent.FAULT,f); 
        if (result!=null) { 
            op.removeEventListener(ResultEvent.RESULT,result); 
        } 
        if (fault!=null) { 
            op.addEventListener(FaultEvent.FAULT,fault); 
        } 
    } 
    op.addEventListener(ResultEvent.RESULT,f); 
    op.addEventListener(FaultEvent.FAULT,f); 
    op.send(arg1); 
}
 
      
 
      
 转换 Java 接口是通过 Interface.as 和 InterfaceMethod.as 两个模板文件完成的，此外，所有在 Java EE 后端和 Flex 之间传递的 JavaBean 对象也通过 JavaBean2ActionScriptTask 自动转换成对应的 ActionScript 类，这是通过 Bean.as 模板完成的。@H_301_14@ 
      
 有了 Java 类到 ActionScript 的自动转换，我们在编写 ActionScript 时，就能享受到编译器检查和 ActionScript 类方法的自动提示了：@H_301_14@ 
      
 图 8. Flex Builder 的代码自动补全
 
      
@H_301_14@
 唯一的缺憾是通过反射读取 FlexService 接口时，我们失去了方法的参数名称，因此，FlexServiceRO 的方法参数名只能变成 arg1，arg2 …… 等，要读取 FlexService 接口的方法参数名，只能通过解析 Java 源代码实现。@H_301_14@ 
      
 现在，Java EE 后端开发团队和 Flex 前端开发团队只需协商定义好 FlexService 接口，然后，利用 Java2ActionScript，Flex 团队就得到了强类型的 FlexServiceRO 类，而 Java EE 团队则只需集中精力实现 FlexService 接口。@H_301_14@ 
      
 在开发的前期，甚至可以用硬编码的 FlexService 的实现类。每当 FlexService 变动时，只需再次运行 Ant 脚本，就可以获得最新的 FlexServiceRO 类。这样，两个团队都可以立刻开始工作，仅需要通过 FlexService 接口就可以完美地协同开发。@H_301_14@ 
      
回页首@H_301_14@ 
      
 下载
 
      


 描述
 
         
 名字
 
         
 大小
 
        


 Java EE 工程源码
 
         
 EmployeeMgmt-Server.zip
 
         
 8.6 MB
 
        

 Flex 工程源码
 
         
 EmployeeMgmt-Flex.zip
 
         
 17.9 KB
 
        

 Java2ActionScript 工程源码
 
         
 @L_404_11@
 
         
 1.3 MB
 
        


 
    
 
    
 
     
 
      
 参考资料
 
      
 学习
 
      

 “Adobe Flex 参考资料”：查看 Adobe Flex 的文档集。
 
       
 “Flex 开发入门”（developerWorks，2009 年 1 月）：本文介绍 Flex 开发的基础知识：包括如何搭建开发环境，如何调试，以及如何建立和部署简单的 Flex 项目。
 
       
 “集成 Flex 与 Ajax 应用程序”（developerWorks，2008 年 7 月）：本文将介绍 Adobe Flex Ajax Bridge (FABridge)，这是让您可以采用轻松而一致的方法集成 Ajax 与 Flex 内容的代码库。
 
       
 “用 Flex 开发 Google Map 应用程序”（developerWorks，2009 年 3 月）：介绍如何用 Google Maps API for Flash 来开发基于 Flash 的地图应用程序。
 
       
 developerWorks Java 技术专区：这里有数百篇关于 Java 编程的文章。
 
      
 获得产品和技术
 
      

 Adobe Flex：访问 Flex 产品页面。
 
       
 Adobe BlazeDS：访问 Adobe BlazeDS 项目站点。
 
       
 下载：Eclipss 3.4。
 
       
 下载：Flex Builder。
 
      
 讨论
 
      

 访问 developerWorks blog 并加入 @L_502_22@。
 
      
 条评论
 
      
 
       
 
        @H_9_403@ 
         @H_629_404@ 
          
 
           
 请 登录 或 注册 后发表评论。@H_301_14@ 
           
 添加评论:@H_301_14@ 
           
 注意：评论中不支持 HTML 语法@H_301_14@ 
           
 
           
 
           
 
            
 
@H_301_14@ 
            有新评论时提醒我 
            剩余 1000 字符 
            
 @H_301_14@ 
           
 
          
 
         
 
         
 
         
 
         
 
          
 
           
 
            
  共有评论 (1)@H_301_14@ 
           
 
          
 
         
 
         
 
          
 
           
 
            
 
             
 
              
 不错的实践! 不过 要运行例子,需要改一下FlexServiceRO 的端点参数,否则不能通过blazeDS,传递数据！

 远程对象构造函数:
 public function FlexServiceRO() }
 ro = new RemoteObject();
 ro.destination = "flexService";

 ro.endpoint = "http://localhost:8080/\u201CcontextPath\u201D/messagebroker/amf";

 ro.concurrency = "last";
 ro.makeObjectsBindable = true;
 ro.showBusyCursor = false;
 {@H_301_14@ 
              
 由 fakeid 于 2011年06月29日发布@H_301_14@