构建富 Internet 应用程序（4）

开发富客户机

本节演示如何配置 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>[e-mail]</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>[e-mail]</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 架构中非常容易。