OpenLaszlo 富互聯網應用開發實戰：Eclipse Laszlo IDE 與 Web Tools 整合教學

RIA 技術選型背景

傳統 HTML/HTTP 模式缺乏狀態、組件有限、瀏覽器不一致。RIA（Rich Internet Applications）結合 C/S 易用性與 B/S 部署優勢。主流三強：

• Ajax：標準技術組合（JS+XML+CSS），生態豐富但碎片化。
• Flex (MXML+ActionScript)：商業產品，運行於 Flash Player，企業級成熟。
• OpenLaszlo (LZX+JavaScript)：開源免費，同樣編譯為 SWF 運行於 Flash Player（96%+ 滲透率），XML 定義 UI，支援 SOAP/XML-RPC/JavaRPC 後端通訊。

開發環境搭建

1. JDK 1.4+
2. Apache Tomcat 5.0.28
3. OpenLaszlo 3.0.2 Dev Kit：含 LPS (Laszlo Presentation Server)、編譯器、文檔、範例。
4. Eclipse WTP All-in-One 0.7.1：含 Eclipse 3.1 + EMF/GEF/JEM 依賴。
5. IDE for Laszlo 2.1：Eclipse 插件，提供 LZX 編輯器、可視化設計器、偵錯器、專案向導。

安裝順序：JDK → Tomcat → OpenLaszlo → Eclipse WTP → Laszlo IDE（透過 Update Manager 安裝 laszloIDE.zip）。

FluidMotion 範例應用架構

工單管理系統 (WOM)：員工提交維修工單，維護人員查看/更新/關閉。

• 客戶端：OpenLaszlo (LZX) → Flash Player → 瀏覽器。
• 通訊協議：SOAP over HTTP。
• 服務端：Apache Axis (Web Service) + Hibernate (ORM) + Derby (嵌入式 DB)。
• 容器：OpenLaszlo Server (Tomcat 定制版)。

後端 Web Service 開發（Eclipse WTP）

1. 動態 Web 專案

建立 fms 專案，配置 Tomcat 5.0 運行時（必須指向 JDK 而非 JRE，因 JSP 需編譯器）。

2. POJO 服務類

public class WorkOrderService {
    public WorkOrder[] findAllWorkOrders() { ... }
    public int createWorkOrder(String contact, String phone, String email,
                               String description, String building, String floor, int severity) { ... }
    public Building[] getBuildings() { ... } // 返回類型化陣列而非 List
}

DTO (WorkOrder, Building, Floor) 必須有無參構造函數供 XML 封送使用。

3. 底向上生成 Web Service

右鍵類別 → New → Web Service → 勾選「Generate proxy、Test、Monitor」 → 發布為 SOAP 服務。Eclipse 自動生成 WSDL、測試客戶端、TCP/IP 監視器。

4. 打包部署到 OpenLaszlo Server

Export → WAR file → 複製 fms.war 至 <OpenLaszlo>/Server/tomcat-5.0.24/webapps → 啟動 LPS。

前端 Laszlo 客戶端開發

專案結構

• index.lzx：主頁，含 Logo、<splash/> 進度條、引入 menu.lzx。
• menu.lzx：<dataset> 定義導航資料，<tree> 組件綁定資料，onactivate 事件跳轉頁面。
• createWork.lzx：工單表單，<combobox> 綁定樓宇/樓層資料集，<edittext> 輸入欄位，<slider> 嚴重度，<button> 提交。
• viewWork.lzx：<grid> 顯示工單列表，<gridcolumn> 含狀態下拉框、備註多行輸入框。

動態資料綁定：樓宇/樓層聯動

<combobox id="bl" onselect="getFloors(this.getValue())">
    <textlistitem datapath="location:/locations[1]/building" text="$path{'@name'}" value="$path{'@id'}"/>
</combobox>

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

SOAP Web Service 呼叫

簡單調用：獲取樓宇列表

<dataset name="location"/>
<soap name="WorkOrderService" wsdl="https://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>

serialize() 可將返回的原始 XML 格式化輸出至偵錯視窗，輔助理解數據結構（如 getBuildingsReturn 包裝器）。

參數化調用：提交工單

<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 ID = ' + value);</method>
</remotecall>

<button onclick="WorkOrderService.createWorkOrder.invoke()"/>

參數順序必須與 WSDL 定義一致。OpenLaszlo 要求服務至少返回一個值，不可為 void。

偵錯技巧

• <canvas debug="true"> 開啟偵錯視窗。
• debug.write("msg") 輸出日誌。
• IDE Run As → Laszlo Application 即時預覽。

打包部署

File → Export → Laszlo WAR File → 選擇專案與輸出路徑。WAR 包含所有依賴（JAR、組件、DTD、CSS、Flash/HTML），可部署至任意 Java Web 容器。

總結

OpenLaszlo 提供了開源、標準化、工具化的 RIA 開發路徑：

• LZX + JavaScript 降低 UI 開發門檻。
• SOAP 整合無縫對接 J2EE 後端。
• Eclipse Laszlo IDE + WTP 覆蓋全生命週期（編碼、偵錯、測試、打包、部署）。