OpenLaszlo-快速构建和部署富Internet应用程序的平台

总览

RIA开发人员面临的最大挑战之一是浏览器兼容性。 由于OpenLaszlo基于Java™语言范式“随处写入”，因此可以确保基于OpenLaszlo的应用程序可以在跨多个操作系统的各种浏览器中统一运行。

建筑

下图显示了OpenLaszlo的服务器端和客户端体系结构。

图1. OpenLaszlo服务器和客户端子系统

OpenLaszlo服务器

OpenLaszlo服务器是Java Servlet / JSP应用程序。 该服务器使LZX应用程序开发变得轻而易举。

OpenLaszlo服务器包含五个主要子系统：

• 接口编译器 -接口编译器由LZX标签编译器和脚本编译器组成，它们将源文件转换为可执行（SWF）文件，并将它们作为字节码提供给在客户端浏览器（例如Flash）中运行的插件或J2ME），或由浏览器本身执行JavaScript（DHTML）。
• 媒体转码器 —媒体转码器将所有媒体资产转换为单一格式，以供OpenLaszlo的目标客户端渲染引擎进行渲染。 这使OpenLaszlo应用程序可以在单个画布上以统一的方式呈现受支持的媒体类型，而无需多个助手应用程序或补充播放软件。 媒体转码器自动呈现以下媒体类型：JPEG，GIF，PNG，MP3，TrueType和SWF（仅适用于艺术/动画）。
• 数据管理器 —数据管理器充当OpenLaszlo应用程序与网络上其他应用程序（例如数据库和XML Web服务）之间的接口。 它由将数据转换为压缩二进制格式的数据编译器和使OpenLaszlo应用程序能够通过XML / HTTP检索数据的一系列数据连接器组成。
• 缓存 -缓存包含任何应用程序的最新编译版本。 第一次请求OpenLaszlo应用程序时，将对其进行编译，然后将生成的SWF文件发送到客户端。 副本也缓存在服务器上，因此后续请求不必等待编译。

OpenLaszlo客户端

OpenLaszlo的客户端体系结构主要由Laszlo Foundation类组成，该类提供了用于运行OpenLaszlo应用程序的运行时环境。 每当客户端通过其URL调用OpenLaszlo应用程序时，所需的运行时库也会与源代码一起下载。 客户端始终与服务器保持连接。

OpenLaszlo客户端包括以下主要子系统：

• 事件系统 -事件系统负责处理各种基于用户的事件，例如鼠标单击或数据提交。 它还通过在客户端执行各种操作（例如排序和验证），而不是将这些操作传递给服务器来提高应用程序的性能。
• 数据加载程序/绑定程序 —数据加载程序接收从服务器端分发的数据，并将这些数据绑定到相应的UI元素，例如客户端上的菜单，文本字段和文本区域。
• 布局和动画系统 -布局和动画系统处理各种与动画有关的算法，使用户能够以视觉上连续的方式查看组件。 它还使用最少的编程，使用相对和绝对像素定位来处理各种组件的位置。

请求周期

典型的请求流采用以下路径：

1. 用户通过浏览器以URL的形式发送对资源的请求。
2. OpenLaszlo服务器根据URL检索资源，并将其发送到Interface Compiler进行编译。
3. 接口编译器将LZX应用程序描述标签和JavaScript转换为可执行（SWF）字节码，以传输到OpenLaszlo客户端环境。 将此代码放入缓存，然后从缓存发送到客户端。
4. 根据应用程序的调用方式，它会作为SWF文件或带有嵌入式SWF对象HTML文件以及适当的Laszlo基础类进行传输。
5. 如果是HTML格式的响应，浏览器将显示该应用程序。 如果SWF格式的响应，则Flash Player会播放该应用程序。
6. 用户在客户端上输入一些请求数据并提交数据。
7. OpenLaszlo服务器调用适当的数据连接器，该数据连接器反过来获取XML数据。
8. OpenLaszlo服务器将数据发送回客户端。
9. 客户端上的Laszlo基础类将数据绑定到适当的UI对象。 屏幕元素将使用响应数据进行更新。

图2显示了如上所述的典型OpenLaszlo应用程序请求周期。

图2.请求周期

您的第一个OpenLaszlo应用程序

开发OpenLaszlo应用程序涉及：

• 使用文本编辑器编写OpenLaszlo程序（使用XML和JavaScript）。
• 将文件另存为LZX文件。
• 手动或使用OpenLaszlo服务器将LZX文件编译为SWF文件或DHTML，并在浏览器中查看输出。

编写OpenLaszlo应用程序

如前所述，OpenLaszlo应用程序是XML文档。 因此，您可以使用任何文本编辑器来编写代码。 清单1中的代码是一个简单的HelloWorld LZX应用程序。

清单1. HelloWorld.lzx

<canvas height="350" width="1050" bgcolor="#FFBE7D" >
	<view width="500" height="250" align="center" valign="middle" bgcolor="#FFFF66">
		<text align="center" valign="middle">
			<font size="25">Welcome to Hello World!</font>
		</text>
	</view>
</canvas>

保存源文件

现在，将脚本另存为HelloWorld.lzx。 该文件必须保存在OpenLaszlo Server安装目录中的Server / lps-4.0.x目录中的某个位置。

编译并运行脚本

编译LZX文件的最简单方法是使用OpenLaszlo服务器。 确保您的计算机上正在运行Apache Tomcat，并将浏览器定向到以下URL：http：// localhost：8080 / lps-4.0.x / path。 在这里， path是相对于Server / lps-4.0.x目录的LZX文件的路径。

例如，如果脚本保存为Server / lp2-4.0.x / hello / HelloWorld.lzx，则用于编译OpenLaszlo应用程序的URL为http：// localhost：8080 / lps-4.0.x / hello / HelloWorld。 lzx，如图3所示。Servlet容器会将HTTP请求传递给OpenLaszlo服务器。 服务器将打开并编译正确的LZX文件，生成输出，并将其保存在临时目录中。

然后，OpenLaszlo服务器将生成的输出发送到浏览器。 如果将应用程序编译为Flash，则将缓存生成的SWF文件和相关文件。 后续对相同未修改LZX文件的请求将更快，因为不需要执行重新编译。 如果编译失败，浏览器将显示一条错误消息。

图3. Hello World OpenLaszlo应用程序示例

显示屏的底部显示了一个开发工具，其中包含一些按钮，这些按钮使您可以查看OpenLaszlo源代码，部署应用程序，重新编译源代码以及执行其他功能。 通过传递适当的请求类型和运行时目标作为参数，可以避免使用开发工具。 例如：

http://127.0.0.1:8080/lps-4.3.0/helloWorld/HelloWorld.lzx?lzr=swf9&lzt=html

和：

http://127.0.0.1:8080/lps-4.3.0/helloWorld/HelloWorld.lzx?lzr=dhtml&lzt=html

图4显示了helloWorld应用程序的示例，该示例带有参数以禁止工具栏运行。

图4. Hello World OpenLaszlo应用程序示例

基本组成

OpenLaszlo带有一组代表简单而丰富的组件的类，使LZX编程更容易，更快速。 BaseComponent类是LzView的子类，并且是所有LZX组件的超类。

帆布

canvas标签代表LZX应用程序中所有视图和元素的最顶层容器。 每个LZX应用程序只有一个画布。 当LZX编译器遇到canvas标记时，将实例化LzCanvas类。 例如，清单2中的代码显示了如何使用canvas标签及其一些属性。

清单2. Canvas.lzx

<canvas width="450" bgcolor="#6699FF" height="200" title="Canvas">
	<text align="center" valign="middle">
			<font size="25">Openlaszlo World!</font>
	</text>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / canvas / Canvas.lzx调用上述应用程序。 图5显示了生成的输出。

图5.画布

视图

视图表示可以显示文本和其他元素的矩形区域。 您可以使用view标签或实例化LzView类来创建视图。 例如，清单3显示了一个使用view标签的LZX应用程序。

清单3. View.lzx

<canvas width="300" bgcolor="#ddddee" height="200">
	<view align="center" valign="middle" bgcolor="#6699FF" width="300" height="150"/>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / view / View.lzx查看以上应用程序。 图6显示了从view.lzx文件生成的输出。

图6.使用视图

在典型的LZX应用程序中，您经常会使用彼此嵌套的多个视图。 清单4显示了具有嵌套视图的LZX应用程序。

清单4. NestedView.lzx

<canvas height="370">
	<view width="150" height="150" bgcolor="black">
		<view width="100" height="100" bgcolor="white">
			<view width="50" height="50" bgcolor="gray"/>
		</view>
	</view>
</canvas>

可以通过浏览到http：// localhost：8080 / lps-4.0.x / view / NestedView.lzx来调用上述应用程序。 图7显示了生成的输出。

图7.使用嵌套视图

人们还可以使用view标签显示或播放外部资源，例如图像，MP3文件和其他Flash文件。 支持的媒体类型为JPG，GIF，PNG，MP3和SWF。 请注意，对MP3的支持仅限于以44.1 KHz，22 KHz，11 KHz，8 KHz和5.5 KHz采样的音频文件。 清单5显示了一个使用view显示图像的示例LZX应用程序。

清单5. ResourceView.lzx

<canvas width="300" bgcolor="#ddddee" height="200">
	<view align="center" resource="IBMLogo.jpg" valign="middle" bgcolor="#6699FF" 
		width="300" height="150"/>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / view / ResourceView.lzx调用上述应用程序。 图8显示了生成的输出。

图8.使用资源视图

窗口

Window对象表示可调整大小的窗口。 Window类是WindowPanel的子类，而WindowPanel是BaseWindow的子类。 BaseWindow是BaseComponent的直接子代。 清单6