使用 OpenLaszlo、Eclipse Laszlo IDE 和 Web Tools

?

級別: 中級 Christopher Judd , 自由作家和顧問, Judd Solutions, LLC B.J. Allmon , 軟件咨詢人員, Pillar Technology Group 2006 年 2 月 22 日 很多用戶都對當今基于 HTML 的 Web 應用程序的功能和性能不滿意。用戶想要這樣的桌面應用程序，即易于安裝并能夠訪問 Web 應用程序提供的功能。本教程演示如何使用開放源碼的 OpenLaszlo 框架、基于 Eclipse 的 Laszlo IDE 和 Web Tools 來開發、打包和部署一個富 Internet 應用程序，以構建令用戶滿意的業務應用程序。 <!----><!----><!----> 開始之前 本教程演示如何使用 OpenLaszlo 平臺和 Web 服務來開發、打包和部署一個已編寫好的富 Internet 客戶機。富客戶端利用了后端的服務（這些后端服務是通過使用 SOAP Web 服務的通用 SOA 方法提供）。還將了解如何有效地使用 Eclipse Laszlo IDE 和 Eclipse Web Tools 來使得開發更加容易且富有生產效率。 關于本教程 由于大多數 Web 應用程序都構建于 HTML 和 HTTP 之上，所以 Web 對于用戶經常使用的應用程序（比如拍賣和書店站點）來說是一個很好的平臺。但是，該例不適合需要豐富用戶界面的業務應用程序，因為缺少狀態、組件數量有限且瀏覽器不一致。 如果不是 HTML 和 HTTP，那會是什么呢？富 Internet 客戶機（Rich Internet Clients，RIC）也稱為富 Internet 應用程序（Rich Internet Applications，RIA），是下一代 Web 應用程序。RIC 提供客戶機/服務器應用程序的可用性、響應性和重用，以及傳統 Web 應用程序的部署、可管理性和可用性。 本教程探索創建富 Internet 應用程序、FluidMotion 和使用 OpenLaszlo 平臺。 前提條件 您應該具備一些基本的 Java?、Web 開發和 XML 技能。對 Web 服務、XPath 和持久存儲的基本了解是有幫助的，但不是必需的。 系統需求 需要安裝了以下軟件： Java Development Kit (JDK)? V1.4 或更高版本 Apache Tomcat V5.0.28 還需要下載以下軟件（本教程解釋了如何安裝和配置它）： OpenLaszlo V3.0.2 Eclipse Web Tools all-in-one 0.7.1 IDE for Laszlo V2.1

?

OpenLaszlo

本節詳細介紹 OpenLaszlo，包括它如何適合 Java 2 Platform, Enterprise Edition (J2EE?) 空間，以及可用的開發工具。

概述

OpenLaszlo 是一個開放源碼的富客戶機平臺，用于開發動態數據驅動的應用程序。為了運行在 Macromedia Flash 中的、面向對象的、事件驅動的用戶界面（UI），它結合了 XML、JavaScript? 和 XPath。它包括一組豐富的組件和服務（稱為運行時框架）和一個用于集成的可選 Java servlet。

OpenLaszlo 在公開的 Common Public License 下可用。這是一種流行的許可，因為除了常見的授予使用和修改源代碼的權限以外，它還提供商業發行版。這意味著商業產品可以派生自 OpenLaszlo 平臺。

其他富客戶機 Asynchronous Java and XML (Ajax) 對于結合諸如異步 JavaScript、XML、XHTML 和 CSS 之類的標準 Web 技術的舊技術來講是一個新術語。有了這一新技術，隨之出現了許多有競爭力的框架/工具箱。至于哪種框架/工具箱將成為標準仍然未可知。但是這一技術無疑正在不斷流行，Google 的威力在一定程度起到了推波助瀾的作用。 Macromedia Flex 是一款商業產品，用于開發運行在 Flash 播放器中的業務應用程序。許多 Web 游戲和電影也利用了 Flash 播放器。Flex 應用程序是用 Maximum Experience Markup Language (MXML) 編寫的，并且也使用 ActionScript 進行事件和流控制。MXML 是一種基于 XML 的語言，用于定義 UI。 OpenLaszlo 是本教程的焦點，它是 Flex 開放源碼的替代物。與 Flex 一樣，它運行在 Flash 播放器中，使用 XML 來定義 UI，并使用腳本語言進行事件和流控制，以及用服務器端代碼進行數據集成。

OpenLaszlo 用于布局用戶界面的 XML 格式叫做 Laszlo XML (LZX)。OpenLaszlo 包含一個編譯器，用于將 LZX 和 JavaScript 編譯成二進制 Shockwave Flash (SWF) 文件，Flash 播放器將呈現該文件。

運行在 Flash 播放器中是理想的，因為它是一個到處存在的平臺。Macromedia 宣稱它存在于 96％ 連接到 Internet 的計算機上。沒有哪個單個的瀏覽器可以這樣宣稱。不斷地，它也成為在許多其他設備（比如手提計算機）上可用。Flash 播放器也使得安裝比較容易，因為它自動地取得應用程序的最新版本，并自動地更新它自己。甚至，Flash 可以用于產生吸引眼球的應用程序，因為它還是用于開發基于 Web 的游戲和電影的平臺。那么為什么不直接使用 Flash 工具呢？Flash 使用一種具有時間線和幀的電影手法（metaphor），這使得它難以構建業務應用程序。但是，OpenLaszlo 使用一種具有表、樹和組件的常見應用程序框架手法，這是業務應用程序開發人員所熟悉的方法。

OpenLaszlo 如何進入 J2EE

OpenLaszlo 作為客戶機層的另一個表示方案，完美地進入 J2EE 堆棧，如圖 1 所示。

圖 1. OpenLaszlo 作為 J2EE 堆棧的一部分

使用以下三種協議之一，OpenLaszlo 可以通過 HTTP 與后端服務通信。這三種協議是：JavaRPC、eXtensible Markup Language -- Remote Procedure Call (XML-RPC) 和 SOAP。JavaRPC 允許調用服務器端 Java 方法。XML-RPC 和 SOAP 是基于標準的 Web 服務協議，支持以獨立于語言的方式通過 HTTP 調用遠程過程。

如果您不需要 J2EE 應用服務器的所有強大功能，OpenLaszlo 應用程序可以運行在包含的 Laszlo Presentation Server (LPS) 上，這是 Apache Tomcat 的定制版本，或者運行在諸如 Apache or Microsoft Internet Information Server (IIS) 的基本 Web 服務器上，這稱為 Standalone OpenLaszlo Output (SOLO)。

開發工具

要開始構建 Laszlo 應用程序，需要用到 OpenLaszlo Development Kit (OLDK)（參見 參考資料 ）。OLDK 包含構建 OpenLaszlo 應用程序所需用到的任何東西，包括 LPS、運行時組件和編譯器，以及很多很好的文檔、演示和示例代碼。

除了 OLDK 之外，我們還推薦使用 IDE for Laszlo。它是一個 Eclipse 插件，其中包括很多好的特性，比如 Laszlo 項目和文件向導、一個 Laszlo Perspective 以及一個可視化設計器和調試器。當前，IDE for Laszlo 是一個 IBM alphaWorks 項目。但是，IBM 和 Eclipse Foundation 最近宣布，IBM 將捐出 Eclipse Technology Projects 的代碼基。

IDE for Laszlo 構建在 Eclipse Web Tools Platform (WTP) 之上。這是理想的情況，因為 WTP 旨在構建標準（HTML、XML、CSS）和基于 J2EE 的 Web 應用程序。建立在 WTP 基礎之上，IDE for Laszlo 具有開發多層應用程序所需的所有工具。后面就會看到，WTP 也支持開發 Web 服務。

FluidMotion 架構

本教程中給出的 FluidMotion 應用程序是一個簡單的 Work Order Management (WOM) 應用程序，允許雇員向數據庫提交新的工作單。WOM 應用程序允許組織收集及管理工具和設備維護請求，通過確保請求不被忘記并及時完成，而為組織帶來價值。本教程中的 FluidMotion WOM 允許維護人員查看列表中的工作單，并在完成后更新和關閉它們。

圖 2 中所示的 FluidMotion 應用程序架構包括客戶機和服務器組件。客戶機是用 OpenLaszlo 富 Internet 客戶機框架編寫的，該框架由 Macromedia Flash Player 呈現，而后者宿主在 Web 瀏覽器中。客戶機通過 SOAP 與通過 Apache Axis 公開的 Web 服務進行通信，Apache Axis 是一個開放源碼的 Web 服務框架。Web 服務然后使用 Hibernate（一個開放源碼的對象關系映射框架）將工作單持久存儲到 Derby，Derby 是一個輕量級的 Java 數據庫。服務器組件宿主在 OpenLaszlo 服務器上，該服務器是 Apache Tomcat 的一個擴展，而 Apache Tomcat 是一個開放源碼的 Web 容器（關于這些技術的詳細信息，請參見 參考資料 ）。

圖 2. FluidMotion 應用程序架構

設置開發工具

從前一節已經看到，設置成功的 OpenLaszlo 開發環境需要用到幾個軟件。本節解釋如何安裝和配置這些軟件。

OpenLaszlo Development Kit

OpenLaszlo Development Kit 帶有特定于平臺的安裝程序，如果您的操作系統不是顯式受支持的，則可以使用 Dev Kit。要在 Microsoft? Windows? 中安裝開發工具箱，請執行以下步驟：

1. 下載 openlaszlo-3.0.2-windows-dev-install.exe，如果還沒有下載的話。
2. 雙擊 openlaszlo-3.0.2-windows-dev-install.exe。
3. 閱讀許可，并通過單擊 I Agree 接受許可。
4. 選擇一個目錄用于安裝 OpenLaszlo 服務器，并單擊 Install 。
5. 單擊 Finish 。

一完成安裝，LPS 就會立即啟動，您的默認瀏覽器也會啟動（如果還沒有打開的話）。瀏覽器被定向到 OpenLaszlo 文檔、演示和示例代碼的本地版本。閱讀完本教程之后，請花點時間仔細閱讀該文檔，它很值得一讀。

Eclipse Web Tools

Eclipse Web Tools 依賴于 Eclipse V3.1 以及幾個其他 Eclipse 項目：EMF、GEF 和 Java EMF Model。由于所有這些依賴項，所以有三種安裝 WTP 的方案。如果已經安裝了 Eclipse V3.1，第一個選項就是獨立地下載所有其他 Eclipse 項目并分別安裝它們。另一種方案是使用 Update Manager 中預配置的 Eclipse.org 更新站點。

第三種方案是 all-in-one 軟件包，其中包括 Eclipse V3.1、WTP V0.7.1 和所有其他依賴項。如果還沒有安裝 Eclipse V3.1 的話，這是一個首選方案。

提示：如果需要將 Eclipse 的多個版本安裝在同一臺計算機上，那么將 Eclipse 解壓在 eclipse-3.1 目錄中是有幫助的。

要安裝 all-in-one 軟件包，請執行以下步驟：

1. 下載 wtp-all-in-one-0.7-win32.zip，如果還沒有下載的話。
2. 將 wtp-all-in-one-0.7-win32.zip 解壓到所希望的目錄。
3. 通過在安裝 WTP all-in-one 軟件包的目錄中雙擊 eclipse.exe 而啟動 Eclipse。
4. 當提示工作空間時，保持默認選項，然后單擊 OK 。

提示：對于 Laszlo IDE，只需要 0.7 版本的 WTP。但是 0.7.1 版本在 Web 服務工具方面有了一些改進，并且在本教程的以后各節中將用到這些增強。

IDE for Laszlo

安裝 WTP 之后，就來安裝 Laszlo IDE 插件。它們被打包成一個 .zip 軟件包，可以使用 Eclipse Update Manager 來安裝。

警告：要完成這些步驟，必須連接到 Internet。

要安裝 Laszlo IDE，請執行以下步驟：

1. 下載 laszloIDE.zip，如果還沒有下載的話。
2. 如果 Eclipse 當前還沒在運行，則通過在安裝 WTP all-in-one 軟件包的目錄中雙擊 eclipse.exe 而啟動它。
3. 選擇 Help > Software Updates > Find and Install 。
4. 在 Feature Updates 頁面上，選擇 Search for new features to install ，然后單擊 Next 。
5. 在如圖 3 所示的 Update sites to visit 頁面上，單擊 New Archived Site 。
   
   圖 3. Update Manager 向導中的 Update sites to visit 頁面
   
   
6. 瀏覽并找到 laszloIDE.zip 文件，然后單擊 OK 。
7. 在 Edit Local Site 對話框中，通過單擊 OK 確認 .zip 位置。
8. 返回 Update sites to visit 頁面，選中 laszloIDE.zip，單擊 Finish 。
9. 在 Search Results 頁面上，選中 laszloIDE.zip ，然后單擊 Next 。
10. 在 Feature License 頁面上，閱讀許可，并通過選中 I accept the terms in the license agreement 接受許可，然后單擊 Next 。
11. 在 Installation 頁面上，單擊 Finished 。
12. 在 Feature Verification 頁面上，單擊 Install All 。
13. 當提示重新啟動時，單擊 Yes 。

在 Eclipse 重新啟動后，WTP 和 Laszlo IDE 就已安裝好了，您就可以開始開發 Web 服務和 OpenLaszlo 客戶機了。

其次，如果 Tomcat 服務器還沒有啟動，那么服務器啟動并被添加到服務器視圖（參見圖 10），用于管理應用程序的啟動、停止和重新部署。

圖 10. Tomcat 服務器在運行

第三，兩個動態 Web 項目都被部署到 Tomcat 服務器，并且您可以開始通過基于 Web 的客戶機來測試服務。一個內部 Eclipse 瀏覽器自動打開到測試頁面。

最后，配置了一個 TCP/IP 監視器，如圖 11 所示，以便您可以監視測試客戶機與您的 Web 服務之間的 SOAP 流量。

圖 11. TCP/IP 監視器監視客戶機與 Web 服務之間的流量

打包 Web 服務

在使用測試客戶機測試了 Web 服務之后，就可以將服務打包為標準的 Web 應用程序或 .war 文件了，以將它部署到 Web 容器上。對于開發 OpenLaszlo 客戶機來說，尤其如此。前一節中由 Eclipse 自動啟動的 Tomcat 服務器和您需要用于開發客戶機的 OpenLaszlo 服務器都運行在端口 8080 上。您需要打包 Web 服務，以便它可以被部署到 OpenLaszlo 服務器。

要打包 Web 服務，請執行以下步驟：

1. 從 Eclipse 主菜單選擇 File > Export 。
2. 選擇 WAR file ，并單擊 Next 。
3. 在 WAR Export 頁面上，選擇包含 Web 服務和生成的目的 .war 文件的 Web 模塊，并單擊 Next 。

警告：在啟動 OpenLaszlo 服務器之前停止由 Eclipse 啟動的 Tomcat 服務器。

要將 Web 服務部署到 OpenLaszlo 服務器，請執行以下步驟：

1. 將 .war 文件 fms.war 復制到 <OpenLaszlo Server>/Server/tomcat-5.0.24/webapps 目錄。
2. 啟動 OpenLaszlo 服務器。

注意：將 Web 服務部署到 OpenLaszlo 服務器之后，到 WSDL 的 URL 是 http://localhost:8080/fms/wsdl/WorkOrderService.wsdl 。

開發富客戶機

本節演示如何配置 Laszlo IDE 工作空間、創建新的 Laszlo 項目以及啟動 Laszlo 服務器。關于開發方面，它介紹了利用 Laszlo 組件、事件腳本編程、數據綁定、調試、在 IDE 中運行應用程序，以及打包。

配置 Laszlo IDE —— 特定于工作空間

配置 Laszlo IDE 是特定于工作空間的。參見圖 12 所示的 Eclipse Preferences 窗口。可以通過從 Eclipse 主菜單選擇 Window > Preferences 而到達配置面板。Laszlo IDE 必須被配置為從 IDE 運行 Laszlo 應用程序。主要的要求是指定 LPS Web Root、Context Root 和應用服務器端口（Apache Tomcat）。LPS Web Root 是 Laszlo 服務器的安裝實例所駐留的地方，并需要指向 Context Root。圖 12 中定義的端口是 Apache Tomcat servlet 容器所監聽的默認端口。默認的設計視圖和首選設置是 Local Design View。它使得編輯組件屬性更加容易。可選地，Live Design View 可以被啟動為用于編輯的默認視圖。一個瀏覽器選項可以用于從 IDE 啟動應用程序。

圖 12. Laszlo IDE 配置面板

創建 Laszlo 項目

在可以開始開發 Laszlo 工件之前，需要創建一個項目用于容納它們。要創建 Laszlo 項目，請執行以下步驟：

1. 從 Eclipse 主菜單選擇 File > New > Project 。就會出現新建項目向導，如圖 13 所示。
   
   圖 13. New Laszlo Project 向導
   
   
2. 選擇向導類型 Laszlo Project ，然后單擊 Next 。
3. 輸入項目名稱，并單擊 Next ，如圖 14 所示。
   
   圖 14. 命名新的 Laszlo Project 向導
   
   
4. 定義定制的 LPS 選項，如圖 15 所示，并單擊 Finish 。
   
   圖 15. Laszlo Project LPS 設置
   
   

一旦完成 Laszlo Project 向導，您就會被提示切換到 Laszlo 透視圖。然后就會創建一個類似于圖 16 所示的新項目。

圖 16. 新的 Laszlo 項目

注意，在圖 16 中，新的 Laszlo 項目包含兩個組件庫。

創建了 Laszlo 項目之后，您就可以開始添加 Laszlo 或 LZX 文件了。要創建新的 Laszlo 文件，請執行以下步驟：

1. 如果已經在 Laszlo 透視圖中，則從 Eclipse 主菜單選擇 File > New > Laszlo File 。
2. 如圖 17 所示，輸入一個與您的項目相對的容器目錄、一個文件名和一個文件類型（對于可視化頁面就是 Canvas ，對于 Laszlo 類的集合就是 Library ）、組件和/或工具。

圖 17. 新建 Laszlo 文件向導

一旦完成新建 Laszlo 文件向導，您的項目就將包含一個類似于下面的新文件：

<?xml version="1.0" encoding="UTF-8" ?>
<canvas>

</canvas>



注意，這是一個 .xml 文件，其中包含兩個 canvas 標記，它們是可視化組件的容器。在本教程的后面，您將使用這個新文件來創建主頁。

啟動 Laszlo 服務器

在可以使用 Run as Laszlo application 功能部署和測試 Laszlo 應用程序之前，您的 OpenLaszlo 服務器必須在運行。

要在 Windows 中啟動 OpenLaszlo 服務器，請從 Windows 任務欄選擇 Start > Programs > OpenLaszlo Server > Start OpenLaszlo Server 。

執行 Laszlo 資源管理器的 Apache Tomcat 的一個捆綁的實例試圖啟動。也可以通過在運行 LPS 服務器時導航到 http://localhost:8080/lps-3.0.2/laszlo-explorer/index.jsp 而啟動資源管理器。

要關閉服務器，可從 Windows 任務欄選擇 Start > Programs > OpenLaszlo Server > Stop OpenLaszlo Server ，或者在服務器控制臺窗口為激活的情況下按 Ctrl + C 。

布局應用程序主頁和導航

通過開發主頁（索引）和導航，開始 Laszlo 應用程序。導航是到視圖和創建工作的兩個鏈接。導航使用了由 XML 數據集填充的 <tree> 組件。通過將代碼包含在 <library> 標記中，菜單代碼可作為包含文件可用。

清單 2 展示了 menu.lzx 文件的內容。

清單 2. menu.lzx 文件的內容

            
              <library>
<!-- Menu data -->
<dataset name="fm">
  <nav nav="View Work" 
       url="viewWork.lzx?lzt=html"/>
  <nav nav="Create Work Order" 
       url="createWork.lzx?lzt=html"/>
</dataset>

<!-- START NAVIGATION -->
<view width="200" height="200" x="20" y="120">
  <tree datapath="fm:/" autoscroll="true" showroot="false">
    <tree datapath="*" 
          text="$path{'@nav'}" 
          open="true"             
          isleaf="true" 
          selectiontype="single">

      <method event="onactivate">
        var url = this.datapath.xpathQuery('@url');
        if (url != null) {
          LzBrowser.loadURL(url,'_self');
        }
      </method>
    </tree>
  </tree>  
</view>
<!-- END NAVIGATION -->
</library>

            
          

圖 18 所示的索引頁面是一個簡單的頁面，只包含菜單和一個 logo。

圖 18. 索引頁面

索引的代碼執行一個菜單包含，也包含一個空的 <splash/> 標記，以便在加載應用程序時向用戶展示一個進度條。 <splash> 組件有兩種形式，用于控制加載應用程序時的表示。一般的方式是，空標記或 <splash/> 默認觸發一個進度條。另外， <splash/> 標記也可以包含視圖元素，用于用任何定制的圖像、元素或者您希望的加載動畫覆蓋默認的進度條。

清單 3 展示了 index.lzx 文件的內容。

清單 3. index.lzx 文件的內容

            
              <canvas>
  <view resource="/images/fm.gif"/>
  <menuseparator width="600" x="-1" y="97" height="6"/>
  <include href="lz/tree.lzx"/>
  <splash/>
  <include href="menu.lzx"/> 
</canvas>

            
          

布局 Work Order 表單

即使您不了解 Laszlo 組件，這項工作也并不太難，并且也不妨礙您創建復雜的用戶界面。圖 19 所示的 Work Order 包含一個簡單的表單。

圖 19. FluidMotion work order 表單（Laszlo 表單元素）

Work Order 表單演示了使用一些不同的內置 Laszlo 組件。一個 XML 數據集驅動的組合框用于樓宇和樓層選擇。包含樓宇和樓層數據的 XML 表示的位置數據集如清單 4 所示。

清單 4. 位置數據集

            
              <dataset name="location">
  <locations>
    <building id="1" name="HQ">
      <floor id="1">Floor 1</floor>
      <floor id="2">Floor 2</floor>
      <floor id="3">Mezzanine</floor>
    </building>
    <building id="2" name="Trump Tower">
      <floor id="1">Trump 1</floor>
      <floor id="2">Trump 2</floor>
      <floor id="3">Trump 150</floor>
    </building>
  </locations>
</dataset>

            
          

清單 5 包含用于樓宇和樓層組合框的代碼。

清單 5. 樓宇和樓層組合框

            
              <text text="Building:" 
      fontstyle="bold" width="59" height="17"/>
<combobox defaulttext="choose one..." width="130"
          editable="false" height="22" id="bl">
  <textlistitem datapath="location:/locations[1]/building"
                text="$path{'@name'}" id="bl_id"
                value="$path{'@id'}"
                onselect="getFloors(this.getValue());"/>
</combobox>
<text text="Floor:" fontstyle="bold" width="59"
      height="17"/>
<combobox defaulttext="choose one..." width="130"
          editable="false" height="22" id="fl">
   <textlistitem id="fl_id" datapath=""
          text="$path{'text()'}" value="$path{'@id'}"/>
</combobox>

            
          

注意 textlistitem 上的 datapath 屬性。它將下拉列表中的值綁定到前面描述的位置數據集。冒號前面的文本表示數據集名稱。冒號后面的值是組件綁定到的 XPath。文本和值分別使用 XPath 來選擇將用作下拉列表中項目的文本和值的數據集屬性。

在選擇了樓宇之后，事件通過調用 getFloors() 方法并將它傳遞給當前樓宇 ID，來填充樓層組合框。清單 6 展示了樓宇組合框的 onselect 事件所調用的 getFloors() 方法。

清單 6. getFloors() 方法

            
              <script>
  <![CDATA[
  // Highlight urgent requests
  function getFloors(bl) {
 fl='location:/locations[1]/building[@id=\''+bl+'\']/floor';
      this.fl_id.setAttribute('datapath', fl);
      this.fl_id.setAttribute('value','');
    }
  ]>    
</script>

            
          

聯系人、e-mail、電話和描述（多行屬性設置為 true ）是 <edittext> 組件。例如：

<edittext id="contact" x="348" width="130" height="17"/>

下面的嚴重性 <slider> 組件允許請求者給工作單分配一個嚴重性：

<slider maxvalue="4" minvalue="1" text="Severity" id="severity"
keystep="1" bordersize="1" yoffset="17"/>

下面的 Submit 按鈕是一個標準的 <button> 組件，并允許提交表單。目前，這個表單不會被提交。后面，該表單將被提交給 Web 服務。

<button isdefault="true" text="Submit" x="350" onclick=""/>

布局工作視圖

圖 20 所示的工作視圖使用 <grid> 組件以及其他嵌入式組件，來查看當前的工作請求。

圖 20. FluidMotion view work 頁面（Laszlo 網格組件）

該網格是用清單 7 中的靜態數據集構建的，以建模它后面連接到的服務器端調用。

清單 7. 靜態數據集

            
              <dataset name="work">
  <work>
    <wo id="100301">
      <date_req>11/15/2005</date_req>
      <date_last_mod>11/18/2005</date_last_mod>
      <bl_name>HQ</bl_name>
      <fl_name>Floor 3</fl_name>
      <contact>Tim Dennison</contact>
      <email>tden@rockstar.rock</email>
      <phone>679.111.1123</phone>
      <description>
        Need emergency service on my equipment!
      </description>
      <comments>I'm on it!</comments>
      <severity>Low</severity>
      <status>Complete</status>
    </wo>
    <wo id="100302">
      <date_req>11/18/2005</date_req>
      <date_last_mod>11/19/2005</date_last_mod>
      <bl_name>Trump Tower</bl_name>
      <fl_name>Trump 2</fl_name>
      <contact>Donald Trump</contact>
      <email>dtrump@trump.usa</email>
      <phone>603.239.4326</phone>
      <description>
        Need recruiter machine repaired.
      </description>
      <comments>This is on hold for now.</comments>
      <severity>Urgent</severity>
      <status>On Hold</status>
   </wo>
  </work>
</dataset>

            
          

這個 Laszlo <grid> 組件可以包含 <gridcolumn> 組件，如清單 8 所示。

清單 8. Laszlo <grid> 組件可以包含 <gridcolumn> 組件

            
              <grid datapath="work:/work[1]" contentdatapath="wo"
shownitems="7" height="135" width="625" id="wo_grid"
x="180" y="115" multiselect="false">
<gridcolumn resizable="false">Requested
  <text datapath="date_req/text()" text="$path{'text()'}"/>
</gridcolumn>
<gridcolumn resizable="true" width="90">Contact
  <text datapath="contact/text()"/>
</gridcolumn>
<gridcolumn resizable="false">Severity
 <text datapath="severity/text()"/>
</gridcolumn>
<gridcolumn resizable="false" width="90">Status
  <combobox defaulttext="Requested" editable="false"
            id="status" datapath="status/text()">
   <textlistitem text="Assigned" id="assigned"
         value="assigned"/>
   <textlistitem text="Active" id="active" value="active"/>	
   <textlistitem text="Complete" id="complete"
         value="complete"/>
   <textlistitem text="On Hold" id="hold" value="hold"/>
   <textlistitem text="Cancelled" id="cancel"
         value="cancel"/>
 </combobox>
</gridcolumn>
<gridcolumn resizable="false" width="240">Comments
  <inputtext datapath="comments/text()" id="comments"
     text="comments/text()" multiline="true" height="35"
     selectiontype="multi"/>
 </gridcolumn>
</grid>

            
          

運行應用程序并調試

Laszlo IDE 允許開發人員從 IDE 啟動正在開發的當前文件。您可以利用如圖 21 所示的 Run As 命令，方法是簡單地右擊文檔并選擇 Run As > Laszlo Application 。然后，IDE 就啟動了。

圖 21. Laszlo IDE 的 Run As 特性

可以通過利用 debug.write() 方法而構造調試語句。調試語句如下所示：

debug.write("getting floors for " + bl);
debug.write("setting floor datapath to " + fl);

要查看調試窗口和結果，請將 canvas 標記上的 debug 屬性設置為 true ，如圖 22 所示。

<canvas width="100%" height="100%" debug="true">


圖 22. Laszlo Debugger 窗口

將 Laszlo 保存為 .war 文件（捆綁和部署）

Laszlo IDE 允許開發人員通過執行以下步驟而捆綁標準的 J2EE Web archive (WAR) 文件：

1. 從 Eclipse 主菜單選擇 File > Export 。
2. 選擇 Laszlo WAR File ，如圖 23 所示，并單擊 Next 。
   
   圖 23. Laszlo .war 文件導出工具
   
   
3. 如圖 24 所示，從 Project 組合框選擇一個 Laszlo 項目，并從 LPS 根目錄中的 OpenLaszlo 服務器的適當目錄，選擇一個具有 .war 擴展名的適當目的文件。
   
   圖 24. Laszlo WAR Export 工具
   ?
   

Laszlo WAR Export 工具捆綁運行與 LPS 服務器無關的應用程序所需的所有必要的依賴項。換句話說，它使得應用程序可以虛擬地部署和運行在任何 Java Web 容器上。依賴項包括但不局限于所有的 .jar 文件、內置的 Laszlo 組件和 Laszlo DTD。它還包括所有基本 Laszlo 組件、CSS 文件、Java 類文件、Flash 和 HTML。這一特性使得將富客戶機應用程序打包、部署和集成到 J2EE 架構中非常容易。

將 Web 服務和客戶機綁定在一起

既然已經完成了 Web 服務，并布局了富客戶機，就必須將它們綁定在一起。本節中有兩個例子，展示如何從 OpenLaszlo 客戶機調用 Web 服務。

簡單的 Web 服務調用

在前一個例子中，樓宇和樓層組合框的內容是從靜態位置數據集構建的。盡管這對于布局應用程序來說沒有問題，但是它對于長期的維護來說不是一個好主意。您不想在每次添加一個新的樓宇時都必須更新代碼。這可以形象化為一個從 Web 容器加載的 .xml 文件，但是這也似乎有太多的工作需要維護。相反，該列表和其他選擇列表有可能來自 Web 服務和數據庫。因此，Web 服務具有一個 getBuildings() 操作。

清單 9 是一個調用 getBuildings() 操作的例子。

清單 9. getBuildings() 操作

            
              <dataset name="location" />

<soap name="WorkOrderService"
   wsdl="http://localhost:8080/fms/wsdl/WorkOrderService.wsdl" 
   autoload="true">

  <remotecall name="getBuildings" 
              funcname="getBuildings" dataobject="location">
    <method event="ondata" args="value">
      debug.write(location.serialize());
    </method>
  </remotecall>
  
  <method event="onload">
    WorkOrderService.getBuildings.invoke();
  </method>

  <method event="onerror" args="error">
    debug.write('error:', error);
  </method>      

</soap>

            
          

XML 已經從位置數據集刪除掉了。這現在動態地由來自 getBuildings() 操作調用的 XML 所填充。

接下來，使用 soap 元素定義 SOAP 服務器。這里，您需要給它一個名稱和一個到利用 Web 服務生成的 WSDL 的 URL。對于本例來說，自動加載 Web 服務，因為您想要用戶一查看頁面就填充組合框。

在 SOAP 定義中，也需要在您將要使用 remotecall 元素調用的 Web 服務上聲明遠程操作。這里，您定義了 getBuildings 操作。 name 屬性是在執行操作時 JavaScript 引用的本地名稱，而 funcname 屬性必須匹配 WSDL 中的名稱，這與 Web 服務 Java 類一樣。 dataobject 屬性指出將用結果填充哪個數據集。指定前面使用過的位置數據集。

在 remotecall 中，您可以指定一個 ondata 事件。該事件在 Web 服務返回結果后將被調用。在本例中，您只是將結果寫到調試器窗口。這也已經用于填充字段或其他東西。即使寫到調試器的這一實現很簡單，它仍然很有價值，因為它是一個強大的工具。有時，Web 服務產生不像 XML 的 XML，最初用于設計用戶界面。也很難確定 OpenLaszlo 平臺如何解釋 XML。這個例子展示了，您如何可以在數據集上調用 serialize 方法，以將 XML 分成良好的 XML 格式。清單 10 是來自 Web 服務調用的例子，這不同于最初用于設計的 XML。

清單 10. 在數據集上調用 serialize 方法以將 XML 分成良好的 XML 格式

            
              <location>
  <getBuildingsReturn>
    <floors>
      <floors>
        <name>Floor 1</name>
        <id>1</id>
      </floors>
      <floors>
        <name>Floor 2</name>
        <id>2</id>
      </floors>
    </floors>
    <name>HQ</name>
    <id>1</id>
  </getBuildingsReturn>
  <getBuildingsReturn>
    <floors>
      <floors>
        <name>Trump 1</name>
        <id>1</id>
      </floors>
      <floors>
        <name>Trump 2</name>
        <id>2</id>
      </floors>
    </floors>
    <name>Trump Tower</name>
    <id>2</id>
  </getBuildingsReturn>
</location>

            
          

注意幾件事情。首先，Web 服務不使用任何屬性。每個數據項都是一個元素。其次， location ，即數據集的名稱，是最外邊的 XML 元素。第三， buildings 被 getBuildingsReturn 所取代，后者是用附加到它的單詞 Return 所調用的方法的名稱。

還有兩個其余事件應用于 SOAP 定義而非遠程調用。它們是 onload 和 onerror 。 onload 只是一個調用方法的方便方式，以便在最初查看頁面時填充復選框。當然，要讓這件事在查看時立即發生，您還需要在 soap 元素上將 autoload 設置為 true 。在 onload 中，在 WorkOrderService 上顯式地調用了 getBuildings() 操作。在 onerror 事件中，只將錯誤消息寫到調試器窗口，以便可以看到錯誤。

參數化 Web 服務調用

第二個 Web 服務提交一個新的工作單。這里，調用 createWorkOrder 操作。清單 11 是包含在前一節的 WorkOrderService soap 定義中的定義。

清單 11. 包含在 WorkOrderService soap 定義中的定義

            
              <remotecall name="createWorkOrder" funcname="createWorkOrder">

  <param value="${contact.text}" />
  <param value="${phone.text}" />
  <param value="${email.text}" />
  <param value="${description.text}" />
  <param value="${bl.text}" />
  <param value="${fl.text}" />
  <param value="${severity.value}" />

  <method event="ondata" args="value">
    debug.write('New Work Order ID = ' + value);
  </method>

</remotecall>

            
          

在本例中，您也在 Web 服務類中用等于 WSDL 和方法中的操作名的 name 和 funcname 聲明了一個遠程調用。因為該操作接受參數，所以您應該包含 param 元素。參數的順序與 Web 服務類 createWorkOrder() 方法簽名相同。這里，值引用 edittext 組件和其他組件中的文本。這個 remotecall 也有一個 ondata 事件，用于將新工作單 ID 的返回值綁定到調試窗口。

警告：OpenLaszlo 要求 Web 服務至少返回一個值。它不能只是返回一個 void，或者所調用的 onerror 事件。

要發起對 createWorkOrder 的調用，請添加一個 onclick 事件到按鈕，并在 createWorkOrder 遠程調用上調用 invoke 方法：

<button isdefault="true" text="Submit" x="350"
onclick="WorkOrderService.createWorkOrder.invoke()"/>

部署到 Apache Tomcat

在完成 Web 服務和 OpenLaszlo 客戶機之后，就應該部署應用程序了。

因為 Web 服務 (fms) 和 OpenLaszlo 客戶機 (fm) 的輸出都是 .war 文件，所以您應該能夠將它們部署在任何兼容的 Web 容器或 J2EE 應用服務器上。因為部署是特定于容器的，所以請參考您的容器文檔，了解部署應用程序的指令。Apache Tomcat 是一種流行的 Web 容器，所以本節介紹如何將應用程序部署到這一類型的容器。

要在 Windows 中部署到 Apache Tomcat 服務器，請執行以下步驟：

1. 將導出的 fm.war 和 fms.war 文件復制到 <jakarta-tomcat>/webapps 目錄。
2. 通過執行 <jakarta-tomcat>/bin/startup.bat 腳本啟動 Apache Tomcat。

就是這些內容。要測試應用程序，請使用 Web 瀏覽器導航到 http://localhost:8080/fm/index.lzx 。

結束語

隨著富 Internet 應用程序的流行，OpenLaszlo 已經成為 Ajax 或 Macromedia Flex 強大的替代物。在本教程中，您看到了使用富組件庫和少量 XML 創建有吸引力和響應快速的 OpenLaszlo 應用程序是多么容易。還看到了通過將它與公開為 SOAP Web 服務的業務層集成，OpenLaszlo 是多么適合 J2EE 應用程序架構。最后，您學習了如何將它打包和部署到 Apache Tomcat Web 容器。整個教程中，了解到了如何使用許多 Eclipse Laszlo IDE 和 Eclipse Web Tools 來簡化開發過程。

下載

構建富 Internet 應用程序