開始之前
本教程示範如何使用 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® 中安 裝開發工具箱，請執行以下步驟：
下載下傳 openlaszlo-3.0.2-windows-dev-install.exe，如果還沒有下載下傳的話。
輕按兩下 openlaszlo-3.0.2-windows-dev-install.exe。
閱讀許可，并通過單擊 I Agree 接受許可。
選擇一個目錄用于安裝 OpenLaszlo 伺服器，并單擊 Install 。
單擊 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 軟體 包，請執行以下步驟：
下載下傳 wtp-all-in-one-0.7-win32.zip，如果還沒有下載下傳的 話。
将 wtp-all-in-one-0.7-win32.zip 解壓到所希望的目錄。
通過在安 裝 WTP all-in-one 軟體包的目錄中輕按兩下 eclipse.exe 而啟動 Eclipse。
當提示 工作空間時，保持預設選項，然後單擊 OK。
提示：對于 Laszlo IDE，隻需要 0.7 版本的 WTP。但是 0.7.1 版本在 Web 服務工具方面有了一些改進，并且在本教程的 以後各節中将用到這些增強。
IDE for Laszlo
安裝 WTP 之後，就來安裝 Laszlo IDE 插件。它們被打包成一個 .zip 軟體包，可以使用 Eclipse Update Manager 來安裝。
警告：要完成這些步驟，必須連接配接到 Internet。
要安裝 Laszlo IDE，請執行以下步驟：
下載下傳 laszloIDE.zip，如果還沒有下載下傳的話。
如 果 Eclipse 目前還沒在運作，則通過在安裝 WTP all-in-one 軟體包的目錄中輕按兩下 eclipse.exe 而啟動它。
選擇 Help > Software Updates > Find and Install。
在 Feature Updates 頁面上，選擇 Search for new features to install，然後單擊 Next。
在如圖 3 所示的 Update sites to visit 頁面上， 單擊 New Archived Site。
圖 3. Update Manager 向導中的 Update sites to visit 頁面
浏覽 并找到 laszloIDE.zip 檔案，然後單擊 OK。
在 Edit Local Site 對話框中，通 過單擊 OK 确認 .zip 位置。
傳回 Update sites to visit 頁面，選中 laszloIDE.zip，單擊 Finish。
在 Search Results 頁面上，選中 laszloIDE.zip，然後單擊 Next。
在 Feature License 頁面上，閱讀許可，并通 過選中 I accept the terms in the license agreement 接受許可，然後單擊 Next。
在 Installation 頁面上，單擊 Finished。
在 Feature Verification 頁面上，單擊 Install All。
當提示重新啟動時，單擊 Yes。
在 Eclipse 重新啟動後，WTP 和 Laszlo IDE 就已安裝好了，您就可以開始開發 Web 服務和 OpenLaszlo 客戶機了。
開發 Web 服務
在本節中，使用 Eclipse Web Tools 來為 OpenLaszlo 客戶機将會調用的 FluidMotion 應用程式建構一個基本的 Web 服務。該 Web 服務将使用 Hibernate 來将資料持久存儲到 Apache Derby 資料庫。首先 建立一個動态 Web 項目。然後将服務建立為一個 Plain Old Java Object (POJO)，再運 行 Web 服務向導将它公開為一個 SOAP 服務。最後将它打包為一個 Web 應用程式。
注意：在開始開發 Web 服務之前，請確定任何 LPS 伺服器都沒在運作。否則， Tomcat 伺服器會出現 WTP 錯誤，因為它試圖綁定到端口 8080，而這是 LPS 伺服器所使 用的端口。要關閉 LPS 伺服器，請激活指令視窗，并按 Ctrl+C。
建立動态 Web 項目
Web 服務最終将被打包為 Web 應用程式，并部署到 Web 容器。是以首先創 建一個動态 Web 項目，該項目具有可部署的 Web 應用程式所必需的結構。換句話說，它 将包含一個 WEB-INF 目錄、WEB-INF/lib 目錄和一個 web.xml 檔案。針對 FluidMotion 伺服器将這個項目命名為 fms。
要建立動态 Web 項目，請執行以下步驟：
從 Eclipse 主菜單選擇 File > New > Project。
在 Select a wizard 頁面上，選擇 Web > Dynamic Web Project，然後單擊 Next。
在 Dynamic Web Project 頁面上，輸入項目名稱，然後單擊 Show Advanced。
單擊 New 以添加新的 Tomcat 伺服器。
在 New Server Runtime 頁面上，選擇 Apache > Apache Tomcat v5.0，如圖 4 所示，并單擊 Next。
圖 4. 選擇 Apache Tomcat v5.0 運作時
使用 Browse 找到 Tomcat 安裝目錄。
接下來，從 JRE 清單選擇一個 JDK， 如圖 5 所示，并單擊 Finish。注意，Eclipse 預設情況下一般使用 Java Runtime Environment (JRE)，但是 Tomcat 必須配置為使用 JDK，因為它需要編譯工具，以将 JavaServer Pages™ (JSPs) 轉換為 servlet。是以這裡確定配置并選擇了 JDK 運 行時。
圖 5. Tomcat 伺服器配置
回到 Dynamic Web Project 頁面，單擊 Finish。
如果提示一個許可協定，就 閱讀它，并通過單擊 I Agree 接受它。
如果提示打開 J2EE 透視圖，則單擊 Yes 。
一旦完成 Dynamic Web Project 向導，您就在 Dynamic Web Projects 節點下 具有了一個新的動态 Web 項目，類似于圖 6 所示的項目。
圖 6. 新的動态 Web 項目的内容
建立 服務和資料轉移對象
建立 POJO 服務和資料轉移對象 (DTO) 與建立任何其他 Java 類是一樣的，隻是有兩個細微差别。首先，Web 服務包含被很好地公開為數組的集 合。這使得描述服務的 Web Services Description Language (WSDL) 可以适當地處理複 雜類型。另外，并不是所有支援 Web 服務的語言都具有動态未類型化集合的概念。其次 ，DTO 必須具有無參構造函數，以便 XML 封送可以建立新的執行個體用于聯合。
清單 1 是下一節中公開為 Web 服務的 WorkOrderService 類。
清單 1. WorkOrderService 類
注意該類是如何具有五個方法的：findWorkOrderById()、 findAllWorkOrders()、createWorkOrder()、updateWorkOrder() 和 getBuildings()。 這五個方法将被公開為 SOAP 操作。還要注意，getBuildings() 和 findAllWorkOrders () 方法傳回類型化數組而不是 java.util.List。該服務中引用的 WorkOrder、Floor 和 Building 類是帶有無參構造函數的簡單 JavaBeans。
注意，如果您的服務或 DTO 類使用任何類型的第三方庫，比如 WorkOrderService 類使用 Hibernate，那麼這些庫的 JAR 需要包含在 WebContent/WEB-INF/lib 目錄中。
将 POJO 服務公開為 Web 服 務
既然有了一個 POJO 服務，就将它公開為 Web 服務。這叫做自底向上的方法， 意味着從一個 Java 類開始，并使用它來生成描述該方法的 WSDL。替代方案是自頂向下 的方法，即從 WSDL 開始，并從它生成 Java 代碼。
要将 WorkOrderService 公 開為 SOAP Web 服務，請執行以下步驟：
從 Eclipse 主菜單選擇 File > New > Other。
在 Select a wizard 頁面上，選擇 Web Services > Web Service，然後單擊 Next。
在如圖 7 所示的 Web Services 頁面上，選中 Generate a proxy、Test the Web service 和 Monitor the Web service，然後單擊 Next。
圖 7. 生成 Web 服務的選項
在 Object Selection 頁面上，選擇您想要公開為 Web 服務的 bean，比如 WorkOrderService，然後單擊 Next。
在 Service Deployment Configuration 頁 面上，直接單擊 Next。這些配置就是針對将 Apache Axis JARs 添加到哪個項目的。此 外，它還會建立一個新項目，以允許您測試自己的 Web 服務，而不必具有 Laszlo 客戶 機。
如圖 8 所示，Web Service JavaBean Identity 頁面上的所有預設選項都應 該保持，是以單擊 Finish。該頁面允許您顯式地選擇哪些方法将由 WSDL 公開，以及使 用的 SOAP 風格。
圖 8. 針對公開方法和定義風格的配置
完成 Web 服務向導之後，就發生了幾件事情。首先，用相同名稱建立了一個新 的動态 Web 項目，并且客戶機被附加到它的末尾。該項目包含您的 Web 服務的一個消費 者以及一個基于 JSP 的測試工具，如圖 9 所示。這個測試客戶機是很友善的，因為測試 您的 Web 服務正确工作不需要完成 OpenLaszlo 客戶機。
圖 9. Web 服務測試客 戶機
其次，如果 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 服務，請執行以下 步驟：
從 Eclipse 主菜單選擇 File > Export。
選擇 WAR file，并 單擊 Next。
在 WAR Export 頁面上，選擇包含 Web 服務和生成的目的 .war 文 件的 Web 子產品，并單擊 Next。
警告：在啟動 OpenLaszlo 伺服器之前停止由 Eclipse 啟動的 Tomcat 伺服器。
要将 Web 服務部署到 OpenLaszlo 伺服器，請 執行以下步驟：
将 .war 檔案 fms.war 複制到 <OpenLaszlo Server>/Server/tomcat-5.0.24/webapps 目錄。
啟動 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 項目，請執行以下步驟：
從 Eclipse 主菜單選擇 File > New > Project。就會出現建立項目向導，如 圖 13 所示。
圖 13. New Laszlo Project 向導
選擇向導類型 Laszlo Project，然後單擊 Next。
輸入項目名稱，并單擊 Next，如圖 14 所示。
圖 14. 命名新的 Laszlo Project 向導
定義定制的 LPS 選項，如圖 15 所示，并單擊 Finish。
圖 15. Laszlo Project LPS 設定
一旦完成 Laszlo Project 向導，您就會被提示切換到 Laszlo 透視圖。然後就會創 建一個類似于圖 16 所示的新項目。
圖 16. 新的 Laszlo 項目
注意，在圖 16 中，新的 Laszlo 項目包含兩個元件庫。
建立了 Laszlo 項目之後，您就可以開始添加 Laszlo 或 LZX 檔案了。要建立新的 Laszlo 檔案，請執行以下步驟：
如果已經在 Laszlo 透視圖中，則從 Eclipse 主菜單選擇 File > New > Laszlo File。
如圖 17 所示，輸入一個與您的項目相對的容器目錄、一個檔案名和一個檔案類型（ 對于可視化頁面就是 Canvas，對于 Laszlo 類的集合就是 Library）、元件和/或工具。
圖 17. 建立 Laszlo 檔案向導
一旦完成建立 Laszlo 檔案向導，您的項目就将包含一個類似于下面的新檔案：
<code><?xml version="1.0" encoding="UTF-8" ?> < canvas> < /canvas></code>
注意，這是一個 .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 檔案的内容
圖 18 所示的索引頁面是一個簡單的頁面，隻包含菜單和一個 logo。
圖 18. 索引頁面
索引的代碼執行一個菜單包含，也包含一個空的 <splash/> 标記，以便在加載 應用程式時向使用者展示一個進度條。<splash> 元件有兩種形式，用于控制加載應 用程式時的表示。一般的方式是，空标記或 <splash/> 預設觸發一個進度條。另 外，<splash/> 标記也可以包含視圖元素，用于用任何定制的圖像、元素或者您希 望的加載動畫覆寫預設的進度條。
清單 3 展示了 index.lzx 檔案的内容。
清單 3. index.lzx 檔案的内容
<code><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></code>
布局 Work Order 表單
即使您不了解 Laszlo 元件，這項工作也并不太難，并且也不妨礙您建立複雜的使用者 界面。圖 19 所示的 Work Order 包含一個簡單的表單。
圖 19. FluidMotion work order 表單（Laszlo 表單元素）
Work Order 表單示範了使用一些不同的内置 Laszlo 元件。一個 XML 資料集驅動的 組合框用于樓宇和樓層選擇。包含樓宇和樓層資料的 XML 表示的位置資料集如清單 4 所 示。
清單 4. 位置資料集
清單 5 包含用于樓宇和樓層組合框的代碼。
清單 5. 樓宇和樓層組合框
注意 textlistitem 上的 datapath 屬性。它将下拉清單中的值綁定到前面描述的位 置資料集。冒号前面的文本表示資料集名稱。冒号後面的值是元件綁定到的 XPath。文本 和值分别使用 XPath 來選擇将用作下拉清單中項目的文本和值的資料集屬性。
在選擇了樓宇之後，事件通過調用 getFloors() 方法并将它傳遞給目前樓宇 ID，來 填充樓層組合框。清單 6 展示了樓宇組合框的 onselect 事件所調用的 getFloors() 方 法。
清單 6. getFloors() 方法
聯系人、e-mail、電話和描述（多行屬性設定為 true）是 <edittext> 元件。 例如：
<edittext id="contact" x="348" width="130" height="17"/>
下面的嚴重性 <slider> 元件允許請求者給工作單配置設定一個嚴重性：
下面的 Submit 按鈕是一個标準的 <button> 元件，并允許送出表單。目前， 這個表單不會被送出。後面，該表單将被送出給 Web 服務。
<button isdefault="true" text="Submit" x="350" onclick=""/>
布局工作視圖
圖 20 所示的工作視圖使用 <grid> 元件以及其他嵌入式元件，來檢視目前的 工作請求。
圖 20. FluidMotion view work 頁面（Laszlo 網格元件）
該網格是用清單 7 中的靜态資料集建構的，以模組化它後面連接配接到的伺服器端調用。
清單 7. 靜态資料集
這個 Laszlo <grid> 元件可以包含 <gridcolumn> 元件，如清單 8 所 示。
清單 8. Laszlo <grid> 元件可以包含 <gridcolumn> 元件
運作應用程式并調試
Laszlo IDE 允許開發人員從 IDE 啟動正在開發的目前檔案。您可以利用如圖 21 所 示的 Run As 指令，方法是簡單地右擊文檔并選擇 Run As > Laszlo Application。 然後，IDE 就啟動了。
圖 21. Laszlo IDE 的 Run As 特性
可以通過利用 debug.write() 方法而構造調試語句。調試語句如下所示：
<code>debug.write("getting floors for " + bl); debug.write("setting floor datapath to " + fl);</code>
要檢視調試視窗和結果，請将 canvas 标記上的 debug 屬性設定為 true，如圖 22 所示。
<canvas width="100%" height="100%" debug="true">
圖 22. Laszlo Debugger 視窗
将 Laszlo 儲存為 .war 檔案（捆綁和部署）
Laszlo IDE 允許開發人員通過執行以下步驟而捆綁标準的 J2EE Web archive (WAR) 檔案：
選擇 Laszlo WAR File，如圖 23 所示，并單擊 Next。
圖 23. Laszlo .war 檔案 導出工具
如圖 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() 操作
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 格式
注意幾件事情。首先，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 定義中的定義
在本例中，您也在 Web 服務類中用等于 WSDL 和方法中的操作名的 name 和 funcname 聲明了一個遠端調用。因為該操作接受參數，是以您應該包含 param 元素。參 數的順序與 Web 服務類 createWorkOrder() 方法簽名相同。這裡，值引用 edittext 組 件和其他元件中的文本。這個 remotecall 也有一個 ondata 事件，用于将新工作單 ID 的傳回值綁定到調試視窗。
警告：OpenLaszlo 要求 Web 服務至少傳回一個值。它不能隻是傳回一個 void，或者 所調用的 onerror 事件。
要發起對 createWorkOrder 的調用，請添加一個 onclick 事件到按鈕，并在 createWorkOrder 遠端調用上調用 invoke 方法：
<code><button isdefault="true" text="Submit" x="350" onclick="WorkOrderService.createWorkOrder.invoke()"/></code>
部署到 Apache Tomcat
在完成 Web 服務和 OpenLaszlo 客戶機之後，就應該部署應用程式了。
因為 Web 服務 (fms) 和 OpenLaszlo 客戶機 (fm) 的輸出都是 .war 檔案，是以您 應該能夠将它們部署在任何相容的 Web 容器或 J2EE 應用伺服器上。因為部署是特定于 容器的，是以請參考您的容器文檔，了解部署應用程式的指令。Apache Tomcat 是一種流 行的 Web 容器，是以本節介紹如何将應用程式部署到這一類型的容器。
要在 Windows 中部署到 Apache Tomcat 伺服器，請執行以下步驟：
将導出的 fm.war 和 fms.war 檔案複制到 <jakarta-tomcat>/webapps 目錄。
通過執行 <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 來簡化開發過程。
![HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)