將 Flex 集成到 Java EE 應(yīng)用程序的最佳實(shí)踐

文檔選項(xiàng) <script type="text/javascript"></script> <noscript></noscript> <script type="text/javascript"></script> <noscript></noscript> 打印本頁 將此頁作為電子郵件發(fā)送 樣例代碼 <!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- this content will be automatically generated across all content areas --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->

級(jí)別： 中級(jí)

廖 雪峰 ( askxuefeng@gmail.com ), 軟件工程師, HP

2009 年 8 月 05 日

傳統(tǒng)的 Java EE 應(yīng)用程序通常使用某種 MVC 框架（例如，Struts）作為前端用戶界面，隨著 Flex 的興起，基于 RIA 的客戶端能夠給用戶帶來更酷的界面，更短的響應(yīng)時(shí)間，以及更接近于桌面應(yīng)用程序的體驗(yàn)。本文將講述如何將 Flex 集成至一個(gè)現(xiàn)有的 Java EE 應(yīng)用程序中，以及如何應(yīng)用最佳實(shí)踐高效率地并行開發(fā) Java EE 和 Flex。

開發(fā)環(huán)境

本文的開發(fā)環(huán)境為 Windows 7 Ultimate，Eclipse 3.4，F(xiàn)lex Builder 3（從 參考資源 獲得下載鏈接）。Java EE 服務(wù)器使用 Resin 3.2，當(dāng)然，您也可以使用 Tomcat 等其他 Java EE 服務(wù)器。

回頁首

現(xiàn)有的 Java EE 應(yīng)用

假定我們已經(jīng)擁有了一個(gè)管理雇員信息的 Java EE 應(yīng)用，名為 EmployeeMgmt-Server，結(jié)構(gòu)如 圖 1 所示：

這是一個(gè)典型的 Java EE 應(yīng)用，使用了流行的 Spring 框架。為了簡化數(shù)據(jù)庫操作，我們使用了內(nèi)存數(shù)據(jù)庫 HSQLDB。對(duì)這個(gè)簡單的應(yīng)用，省略了 DAO，直接在 Fa?ade 中通過 Spring 的 JdbcTemplate 操作數(shù)據(jù)庫。最后，EmployeeMgmt 應(yīng)用通過 Servlet 和 JSP 頁面為用戶提供前端界面：

該界面為傳統(tǒng)的 HTML 頁面，用戶每次點(diǎn)擊某個(gè)鏈接都需要刷新頁面。由于 Employee Management 系統(tǒng)更接近于傳統(tǒng)的桌面應(yīng)用程序，因此，用 Flex 重新編寫界面會(huì)帶來更好的用戶體驗(yàn)。

回頁首

集成 BlazeDS

如何將 Flex 集成至該 Java EE 應(yīng)用呢？現(xiàn)在，我們希望用 Flex 替換掉原有的 Servlet 和 JSP 頁面，就需要讓 Flex 和 Java EE 后端通信。Flex 支持多種遠(yuǎn)程調(diào)用方式，包括 HTTP，Web Services 和 AMF。不過，針對(duì) Java EE 開發(fā)的服務(wù)器端應(yīng)用，可以通過集成 BlazeDS，充分利用 AMF 協(xié)議并能輕易與 Flex 前端交換數(shù)據(jù)，這種方式是 Java EE 應(yīng)用程序集成 Flex 的首選。

BlazeDS 是 Adobe LifeCycle Data Services 的開源版本，遵循 LGPL v3 授權(quán)，可以免費(fèi)使用。BlazeDS 為 Flex 提供了基于 AMF 二進(jìn)制協(xié)議的遠(yuǎn)程調(diào)用支持，其作用相當(dāng)于 Java 的 RMI。有了 BlazeDS，通過簡單的配置，一個(gè) Java 接口就可以作為服務(wù)暴露給 Flex，供其遠(yuǎn)程調(diào)用。

盡管現(xiàn)有的 EmployeeMgmt 應(yīng)用程序已經(jīng)有了 Fa?ade 接口，但這個(gè)接口是暴露給 Servlet 使用的，最好能再為 Flex 定義另一個(gè)接口 FlexService，并隱藏 Java 語言的特定對(duì)象（如 清單 1 所示）：

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

                  

現(xiàn)在，Java EE 后端與 Flex 前端的接口已經(jīng)定義好了，要完成 Java EE 后端的接口實(shí)現(xiàn)類非常容易，利用 Spring 強(qiáng)大的依賴注入功能，可以通過幾行簡單的代碼完成：

                    				 
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, String title, boolean gender, 
        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); 
    } 
} 

                  

然后，我們將 BlazeDS 所需的 jar 包放至 /WEB-INF/lib/ 。BlazeDS 需要如下的 jar：

                    				 
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 

                  

在 web.xml 中添加 HttpFlexSession 和 Servlet 映射。HttpFlexSession 是 BlazeDS 提供的一個(gè) Listener，負(fù)責(zé)監(jiān)聽 Flex 遠(yuǎn)程調(diào)用請(qǐng)求，并進(jìn)行一些初始化設(shè)置：

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

                  

MessageBrokerServlet 是真正處理 Flex 遠(yuǎn)程調(diào)用請(qǐng)求的 Servlet，我們需要將其映射到指定的 URL：

                    				 
<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> 

                  

BlazeDS 所需的所有配置文件均放在 /WEB-INF/flex/ 目錄下。BlazeDS 將讀取 services-config.xml 配置文件，該配置文件又引用了 remoting-config.xml、proxy-config.xml 和 messaging-config.xml 這 3 個(gè)配置文件，所以，一共需要 4 個(gè)配置文件。

由于 BlazeDS 需要將 Java 接口 FlexService 暴露給 Flex 前端，因此，我們?cè)谂渲梦募?remoting-config.xml 中將 FlexService 接口聲明為一個(gè)服務(wù)：

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

                  

服務(wù)名稱通過 destination 的 id 屬性指定，F(xiàn)lex 前端通過該服務(wù)名稱來進(jìn)行遠(yuǎn)程調(diào)用。scope 指定為 application，表示該對(duì)象是一個(gè)全局對(duì)象。

然而，按照默認(rèn)的聲明，BlazeDS 會(huì)去實(shí)例化 FlexService 對(duì)象。對(duì)于一個(gè) Java EE 應(yīng)用來說，通常這些服務(wù)對(duì)象都是被容器管理的（例如，Spring 容器或 EJB 容器），更合適的方法是查找該服務(wù)對(duì)象而非直接實(shí)例化。因此，需要告訴 BlazeDS 通過 Factory 來查找指定的 FlexService 對(duì)象，修改配置如下：

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

                  

現(xiàn)在，F(xiàn)lex 如何才能通過 BlazeDS 調(diào)用 FlexService 接口呢？由于 FlexService 對(duì)象已經(jīng)被 Spring 管理，因此，我們需要編寫一個(gè) FlexFactory 告訴 BlazeDS 如何找到 Spring 管理的 FlexService 的實(shí)例。flexFactory 在 services-config.xml 中指定：

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

                  

FlexFactoryImpl 實(shí)現(xiàn)了 FlexFactory 接口，該接口完成兩件事情：

1. 創(chuàng)建 FactoryInstance 對(duì)象；
2. 通過 FactoryInstance 對(duì)象查找我們需要的 FlexService。

因此，需要一個(gè) FactoryInstance 的實(shí)現(xiàn)類，我們編寫一個(gè) SpringFactoryInstance，以便從 Spring 的容器中查找 FlexService：

                    				 
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) { 
            ... 
        } 
    } 
} 

                  

FlexFactoryImpl 負(fù)責(zé)實(shí)例化 SpringFactoryInstance 并通過 SpringFactoryInstance 的 lookup() 方法查找 FlexService 接口對(duì)象：

                    				 
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, id, 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) { 
    } 
} 

                  

以下是 BlazeDS 查找 FlexService 接口的過程：

1. BlazeDS 將首先創(chuàng)建 FlexFactory 的實(shí)例—— FlexFactoryImpl；
2. 當(dāng)接收到 Flex 前端的遠(yuǎn)程調(diào)用請(qǐng)求時(shí)，BlazeDS 通過 FlexFactory 創(chuàng)建 FactoryInstance 對(duì)象，并傳入請(qǐng)求的 Service ID。在這個(gè)應(yīng)用程序中，被創(chuàng)建的 FactoryInstance 實(shí)際對(duì)象是 SpringFactoryInstance；
3. FactoryInstance 的 lookup() 方法被調(diào)用，在 SpringFactoryInstance 中，首先查找 Spring 容器，然后，通過 Bean 的 ID 查找 Bean，最終，F(xiàn)lexService 接口的實(shí)例被返回。

注意到 destination 的 id 并沒有寫死在代碼中，而是通過以下語句獲得的：

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

                  

Property 的 SOURCE 屬性由 BlazeDS 讀取 XML 配置文件獲得：

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

                  

如果您沒有使用 Spring 框架，也不要緊，只需修改 FactoryInstance 的 lookup() 方法。例如，對(duì)于一個(gè) EJB 來說，lookup() 方法應(yīng)該通過 JNDI 查找返回遠(yuǎn)程接口。無論應(yīng)用程序結(jié)構(gòu)如何，我們的最終目標(biāo)是向 BlazeDS 返回一個(gè) FlexService 的實(shí)例對(duì)象。

回頁首

開發(fā) Flex 客戶端

首先安裝 Flex Builder 3，可以在 Adobe 的官方網(wǎng)站獲得 30 天免費(fèi)試用版。然后，打開 Flex Builder 3，創(chuàng)建一個(gè)新的 Flex Project，命名為 EmployeeMgmt-Flex：

Flex Project 需要指定 Server 端的配置文件地址：

因此，需要填入 EmployeeMgmt-Server 項(xiàng)目的 web 根目錄，該目錄下必須要存在 /WEB-INF/flex/ 。點(diǎn)擊“Validate Configuration”驗(yàn)證配置文件是否正確，只有通過驗(yàn)證后，才能繼續(xù)。默認(rèn)地，F(xiàn)lex Builder 將會(huì)把生成的 Flash 文件放到 EmployeeMgmt-Server 項(xiàng)目的 web/EmployeeMgmt-Flex-debug 目錄下。

一個(gè) Flex Project 的目錄結(jié)構(gòu)如下：

用 Flex Builder 做出漂亮的用戶界面非常容易。Flex Builder 提供了一個(gè)可視化的編輯器，通過簡單的拖拽，一個(gè)毫無經(jīng)驗(yàn)的開發(fā)人員也能夠設(shè)計(jì)出漂亮的布局。如果熟悉一點(diǎn) XML 的知識(shí)，編輯 MXML 也并非難事。我們?cè)O(shè)計(jì)的 Employee Management 系統(tǒng)界面的最終效果如下：

本文不打算討論如何編寫 Flex 界面，而是把重點(diǎn)放在如何實(shí)現(xiàn)遠(yuǎn)程調(diào)用。

為了能在 Flex 中實(shí)現(xiàn)遠(yuǎn)程調(diào)用，我們需要定義一個(gè) RemoteObject 對(duì)象?？梢酝ㄟ^ ActionScript 編碼創(chuàng)建該對(duì)象，也可以直接在 MXML 中定義一個(gè) RemoteObject 對(duì)象，并列出其所有的方法：

                    				 
<mx:RemoteObject id="flexServiceRO" destination="flexService"> 
    <mx:method name="queryAll" result="handleQueryAll(result : ResultEvent)"/> 
</mx:RemoteObject> 

                  

現(xiàn)在，就可以調(diào)用這個(gè)名為 flexServiceRO 的 RemoteObject 對(duì)象的方法了：

                    				 
 flexServiceRO.queryAll(function(result : ResultEvent) { 
    var employees = result.result as Array; 
 }); 

                  

運(yùn)行該 Flex Application，雇員信息已經(jīng)被正確獲取了：

回頁首

增強(qiáng) RemoteObject 對(duì)象

通過 RemoteObject 進(jìn)行調(diào)用雖然簡單，但存在不少問題：首先，RemoteObject 是一個(gè) Dynamic Class，F(xiàn)lex Builder 的編譯器無法替我們檢查參數(shù)類型和參數(shù)個(gè)數(shù)，這樣，在編寫 ActionScript 代碼時(shí)極易出錯(cuò)。此外，接口變動(dòng)時(shí)（這種情況常常發(fā)生），需要重新修改 RemoteObject 的定義。此外，F(xiàn)lex 團(tuán)隊(duì)需要一份隨時(shí)修訂的完整的 FlexService 接口文檔才能工作。

因此，最好能使用強(qiáng)類型的 RemoteObject 接口，讓 Flex Builder 的編譯器及早發(fā)現(xiàn)錯(cuò)誤。這個(gè)強(qiáng)類型的 RemoteObject 最好能通過 Java EE 應(yīng)用的 FlexService 接口自動(dòng)生成，這樣，就無需再維護(hù) RemoteObject 的定義。

為了能完成自動(dòng)生成 RemoteObject 對(duì)象，我編寫了一個(gè) Java2ActionScript 的 Ant 任務(wù)來自動(dòng)轉(zhuǎn)換 FlexService 接口以及相關(guān)的所有 JavaBean。JavaInterface2RemoteObjectTask 完成一個(gè) Java 接口對(duì)象到 RemoteObject 對(duì)象的轉(zhuǎn)換。使用如下的 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"
/> 

                  

轉(zhuǎn)換后的 FlexServiceRO 類擁有 Java 接口對(duì)應(yīng)的所有方法，每個(gè)方法均為強(qiáng)類型簽名，并添加額外的兩個(gè)可選的函數(shù)處理 result 和 fault 事件。例如，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); 
} 

                  

轉(zhuǎn)換 Java 接口是通過 Interface.as 和 InterfaceMethod.as 兩個(gè)模板文件完成的，此外，所有在 Java EE 后端和 Flex 之間傳遞的 JavaBean 對(duì)象也通過 JavaBean2ActionScriptTask 自動(dòng)轉(zhuǎn)換成對(duì)應(yīng)的 ActionScript 類，這是通過 Bean.as 模板完成的。

有了 Java 類到 ActionScript 的自動(dòng)轉(zhuǎn)換，我們?cè)诰帉?ActionScript 時(shí)，就能享受到編譯器檢查和 ActionScript 類方法的自動(dòng)提示了：

唯一的缺憾是通過反射讀取 FlexService 接口時(shí)，我們失去了方法的參數(shù)名稱，因此，F(xiàn)lexServiceRO 的方法參數(shù)名只能變成 arg1，arg2 …… 等，要讀取 FlexService 接口的方法參數(shù)名，只能通過解析 Java 源代碼實(shí)現(xiàn)。

現(xiàn)在，Java EE 后端開發(fā)團(tuán)隊(duì)和 Flex 前端開發(fā)團(tuán)隊(duì)只需協(xié)商定義好 FlexService 接口，然后，利用 Java2ActionScript，F(xiàn)lex 團(tuán)隊(duì)就得到了強(qiáng)類型的 FlexServiceRO 類，而 Java EE 團(tuán)隊(duì)則只需集中精力實(shí)現(xiàn) FlexService 接口。

在開發(fā)的前期，甚至可以用硬編碼的 FlexService 的實(shí)現(xiàn)類。每當(dāng) FlexService 變動(dòng)時(shí)，只需再次運(yùn)行 Ant 腳本，就可以獲得最新的 FlexServiceRO 類。這樣，兩個(gè)團(tuán)隊(duì)都可以立刻開始工作，僅需要通過 FlexService 接口就可以完美地協(xié)同開發(fā)。

回頁首

下載

	關(guān)于下載方法的信息

參考資料

• “ Adobe Flex 參考資料 ”：查看 Adobe Flex 的文檔集。
  
• “ Flex 開發(fā)入門 ”（developerWorks，2009 年 1 月）：本文介紹 Flex 開發(fā)的基礎(chǔ)知識(shí)：包括如何搭建開發(fā)環(huán)境，如何調(diào)試，以及如何建立和部署簡單的 Flex 項(xiàng)目。
  
• “ 集成 Flex 與 Ajax 應(yīng)用程序 ”（developerWorks，2008 年 7 月）：本文將介紹 Adobe Flex Ajax Bridge (FABridge)，這是讓您可以采用輕松而一致的方法集成 Ajax 與 Flex 內(nèi)容的代碼庫。
  
• “ 用 Flex 開發(fā) Google Map 應(yīng)用程序 ”（developerWorks，2009 年 3 月）：介紹如何用 Google Maps API for Flash 來開發(fā)基于 Flash 的地圖應(yīng)用程序。
  
• developerWorks Java 技術(shù)專區(qū) ：這里有數(shù)百篇關(guān)于 Java 編程的文章。
  

• Adobe Flex ：訪問 Flex 產(chǎn)品頁面。
  
• Adobe BlazeDS ：訪問 Adobe BlazeDS 項(xiàng)目站點(diǎn)。
  
• 下載 ：Eclipss 3.4。
  
• 下載 ：Flex Builder。

• 訪問 developerWorks blog 并加入 developerWorks 社區(qū) 。