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

最新推荐文章于 2024-04-23 18:52:22 发布

cuxiong8996

最新推荐文章于 2024-04-23 18:52:22 发布

阅读量281

点赞数

文章标签： java webgl epoll web 脚本语言

原文链接：https://www.ibm.com/developerworks/opensource/library/os-openlaszlo/index.html

版权

总览

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元素，例如客户端上的菜单，文本字段和文本区域。
布局和动画系统 -布局和动画系统处理各种与动画有关的算法，使用户能够以视觉上连续的方式查看组件。它还使用最少的编程，使用相对和绝对像素定位来处理各种组件的位置。

请求周期

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

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

示例示例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中的Window.lzx文件是一个LZX应用程序，它显示可调整大小的窗口。

清单6. Window.lzx

<canvas width="450" bgcolor="#6699FF" height="200" title="Canvas">
	<window align="center" valign="middle" resizable="true" width="300" height="150">
		<text>OpenLaszlo World!</text>
	</window>
</canvas>

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

图9.窗口

屏幕截图显示了带有浮动窗口的蓝色画布，其中包含文本“ OpenLaszlo World！”。

警报

警报对象表示显示消息的模式对话框。警报框配有“确定”按钮。默认情况下不显示它们。您必须调用它们的Alert的open方法使其可见。 Alert类是ModalDialog类的子类，该类是从WindowPanel派生的。模态对话框对象表示可移动的浮动视图。清单7中的代码显示了如何使用Alert框。

清单7. Alert.lzx

<canvas>
	<alert name="warning">Press OK to continue.</alert>
	<script>
		canvas.warning.open ();
	</script>
</canvas>

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

图10.警报框

清单8. AlertWithButtons.lzx

<canvas>
	<alert name="warning" buttonl="OK" button2="No">
		Click OK to Process.
		<handler name="onresult">
		if (this.result) {
			parent.message.setText("Processing Started");
		} else {
		parent.message.setText ("Processing Stopped'");
		}
		</handler>
	</alert>
	<script>
		canvas.warning.open ();
	</script>
	<text name="message"> Do you want to start processing?</text>
</canvas>

AlertWithButtons以带有“是/否”按钮的警报框的形式要求用户确认，并采取适当的措施。

纽扣

Button对象表示可单击的按钮，它引发一个事件，因此您可以在单击时执行操作。此类是BaseButton的子类，而BaseButton是BaseComponent的子类。清单9中的Button.lzx文件是一个使用按钮的LZX应用程序。该按钮的文本为“ Hello World !!”。

清单9. Button.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<button width="200" height="80" align="center" valign="middle">
		Hello World!!</button>
</canvas>

通过浏览到http：// localhost：8080 / lps-4.0.x / layout / Button.lzx运行该示例。图11显示了生成的输出。

图11.带按钮的画布

屏幕截图显示了画布的蓝色矩形，带有一个可单击的按钮，标记为“ Hello World !!”。在中心

使用布局

布局管理器允许您将组件布置在容器中。该LzLayout类的子类LzNode ，负责铺设的意见。 LzLayout类是提供此功能的基类。您将永远不会直接实例化此类，但始终会创建其子类的实例。 LzLayout子类如下所示。

`SimpleLayout`

SimpleLayout用于将组件水平或垂直彼此相邻放置。通过使用simplelayout标签创建一个实例，如下所示。

清单10. SimpleLayout.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<simplelayout axis="x" spacing="4"/>
	<view align="center" valign="middle" bgcolor="silver" width="100" height="100"/>
	<view align="center" valign="middle" bgcolor="gray" width="100" height="100"/>
	<view align="center" valign="middle" bgcolor="blue" width="100" height="100"/>
</canvas>

使用http：// localhost：8080 / lps-4.0.x / layout / SimpleLayout.lzx调用示例。图12显示了生成的输出。

图12.简单的布局

`ResizeLayout`

ResizeLayout与ResizeLayout相似， SimpleLayout允许您水平或垂直放置视图。但是，通过ResizeLayout您还可以调整要管理的视图的大小，如清单11所示。

清单11. ResizeLayout.lzx

<width="450" bgcolor="#6699FF" height="200">
	<resizelayout axis="y" spacing="20"/>
	<view valign="middle" width="100" height="100" bgcolor="silver"/>
	<view valign="middle" width="100" height="100" bgcolor="gray"/>
	<view valign="middle" width="100" height="100" bgcolor="blue" 
	options="releasetolayout"/>
</canvas>

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

图13.调整大小布局

`SimpleBoundsLayout`

SimpleBoundsLayout像SimpleLayout一样水平或垂直SimpleLayout 。但是， SimpleBoundsLayout确保旋转一个视图时，没有视图与另一个视图重叠。下面的清单12显示了一个示例。

清单12. SimpleBoundsLayout.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<simpleboundslayout axis="x"/>
	<view valign="middle" width="100" height="100" bgcolor="silver"/>
	<view valign="middle" width="100" height="100" bgcolor="gray" rotation="30"/>
	<view valign="middle" width="100" height="100" bgcolor="blue"/>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / layout / SimpleBoundsLayout.lzx调用此应用程序。图14显示了生成的输出。

图14. `SimpleBoundsLayout`

`ReverseLayout`

使用ReverseLayout ，视图从右到左（沿x轴）或从下到上（沿y轴）进行布局。清单13显示了一个使用ReverseLayout的LZX应用程序。

清单13. ReverseLayout.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<reverselayout axis="x" end="false" spacing="20"/>
	<view align="center" valign="middle" width="100" bgcolor="silver"/>
	<view align="center" valign="middle" width="100" bgcolor="gray"/>
	<view align="center" valign="middle" width="100" bgcolor="blue"/>
</canvas>

使用http：// localhost：8080 / lps-4.0.x / layout / ReverseLayout.lzx运行示例。图15显示了生成的输出。

图15.反向布局

`ConstantLayout`

这种布局使视图彼此重叠。与SimpleLayout ，您可以指定axis属性。然后， ContantLayout将每个视图xoffset和yoffset值中指定的像素数。结果是被这些值偏移的视图的级联。

清单14. ConstantLayout.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<constantlayout axis="x" value="10"/>
	<view valign="middle" width="300" height="150" bgcolor="silver"/>
	<view valign="middle" width="200" height="80" bgcolor="gray" xoffset="-15"/>
	<view valign="middle" width="40" height="40" bgcolor="blue" xoffset="-50"/>
</canvas>

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

图16.常量布局

`WrappingLayout`

WrappingLayout在空间不足时通过更改行或列来WrappingLayout它管理的视图。清单15显示了一个示例。

清单15. WrappingLayout.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<wrappinglayout axis="x" spacing="20"/>
	<view align="center" valign="middle" bgcolor="silver" width="200" height="100"/>
	<view align="center" valign="middle" bgcolor="gray" width="200" height="100"/>
	<view align="center" valign="middle" bgcolor="blue" width="200" height="100"/>
</canvas>

使用http：// localhost：8080 / lps-4.0.x / layout / WrappingLayout.lzx调用上述应用程序。图17显示了生成的输出。

图17.包装布局

事件处理

为了使程序更具交互性，OpenLaszlo对象可以引发事件以响应用户的动作，例如buttonclick 。这是通过将事件连接到事件处理程序来完成的，该事件处理程序包含当对象引发事件时要执行的代码。有几种方法可以将事件连接到事件处理程序。一种是在对象的标签声明中将事件处理程序的名称分配给事件名称，如清单16所示。下面显示的标签创建一个Window对象，其onx事件连接到事件处理程序myHandler 。

清单16. window.lzx

<window name="win" onx="myHandler">

另一种方法是编写嵌套在对象的标签声明中的方法，然后将事件处理程序分配给该方法的事件属性。清单17中的代码片段将按钮的onclick事件连接到其标签内的事件处理程序。

清单17. Window.lzx

<button>
	<handler name="onclick">
		// Event handler code
	</handler>
</button>

清单18中的示例显示了将按钮映射到事件处理程序时发出的onclick事件。

清单18. EventWiring.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<button width="200" height="80" align="center" valign="middle">Hello Button
	<handler name="onclick">
		setAttribute("text", "Hello Button Clicked");
		setAttribute ('width', 200);
	</handler>
	</button>
</canvas>

您可以通过浏览到http：// localhost：8080 / lps-4.0.x / event / EventWiring.lzx来执行示例EventWiring.lxz。图18显示了最初生成的输出以及单击按钮触发事件后的输出。

图18.事件处理

另外，事件处理程序代码也可以嵌入到object标记中，如清单19所示。

清单19. EmbeddedEventHandling.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<button width="200" height="80" align="center" valign="middle" 
		onclick="setAttribute ('text', 'Hello Button Clicked');
		setAttribute ('width', 200);">
		Hello Button
	</button>
</canvas>

全局事件处理程序

可以使用可以从多个对象调用JavaScript函数编写全局事件处理程序。例如，清单20中的代码定义了myHandler函数，可以从程序的任何位置调用它。

清单20. GlobalEventHandler.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<button width="200" height="80" align="center" valign="middle" id="button1" 
		onclick="globalHandler()"> Hello Button
	</button>
	<script>
		<![CDATA[
			function globalHandler () {
				button1.setAttribute ("text", "Hello Button Clicked");
				button1.setAttribute ('width', 200);
			}
		]]>
	</script>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / event / GlobalEventHandler.lzx编译和调用以上应用程序。

传递对象的参考

在OpenLaszlo中，甚至可以将对象引用传递给方法，如清单21所示。

清单21. PassingObjectReference.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<simplelayout axis="x"/>
	<button width="200" height="80" align="center" valign="middle" id="button1" 
		onclick="globalHandler (this)"> Hello Button 1
	</button>
	<button width="200" height="80" align="center" valign="middle" id="button2" 
		onclick="globalHandler (this)"> Hello Button 2
	</button>
	<script>
		<![CDATA[
			function globalHandler (b) {
				b.setAttribute ("text", "Hello Button Clicked");
				b.setAttribute ('width', 200);
			}
		]]>
	</script>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / event / PassingObjectReference.lzx来编译和调用此应用程序。

添加动画

通常，可以通过动态更改其x和y坐标的值来实现对象的动画。通过使用animator和animatorGroup标签，可以轻松实现OpenLaszlo中的animator 。 animator标签用于在对象内执行运动，而animatorGroup标签用于将多个动画师标签分组以执行一种以上类型的动画。清单22中的LZX应用程序显示了一个沿水平线移动的按钮。

清单22. SimpleAnimation.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<button width="200" height="80" align="center" valign="middle" 
		text="Animated Stuff">
		<animator attribute="x" from ="0" to="300" duration="5000"/>
	</button>
</canvas>

上面示例中的按钮在5000毫秒内从x = 0漫游到x = 450。您可以使用http：// localhost：8080 / lps-4.0.x / animation / SimpleAnimation.lzx执行此示例。图19显示了生成的输出。

图19.简单的动画

屏幕截图显示了一个标签为“ Animated Stuff”的按钮，其中一个箭头指示屏幕右侧的运动

多个动画片段

通过使用多个动画标记，您可以同时在两个或多个方向上移动对象。沿x轴移动时它将旋转。清单23显示了使用多个动画师标签的代码。

清单23. MultipleAnimation.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<view width="100" height="60" align="center" valign="middle" 
		resource="IBMLogo.jpg>
		<animator attribute="x" from ="0" to="450" duration="5000"/>
		<animator attribute="rotation" to="360" duration="5000"/>
	</view>
</canvas>

上面应用程序中的按钮从x = 0滚动到x = 450，并在5,000毫秒内旋转360度。通过浏览到http：// localhost：8080 / lps-4.0.x / animation / MultipleAnimation.lzx执行该示例。图20显示了生成的输出。

图20.多个动画

生成的应用程序加载后，前面示例中的动画就开始移动。通过将动画师标签的start属性设置为false并在动画师对象上调用doStart方法，可以使它基于onClick等事件start 。清单24完成了此操作。

清单24. ManualAnimationStart.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<button width="100" height="60" valign="middle" 
		text="Start Animation" onclick="this.a.doStart()">
		<animator name="a" attribute="x" start="false"
			from ="0" to="450" duration="1000" motion="easein"/>
	</button>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / animation / ManualAnimationStart.lzx编译和调用以上应用程序。

重复动画

可以设置动画标记的repeat属性，以确定动画循环的次数。将其设置为“ Infinity”可使动画无限期重复。例如，清单25中的OpenLaszlo应用程序显示了一个动画，该动画重复了三遍。

清单25. RepeatAnimation.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<view width="100" height="60" align="center" valign="middle" 
		resource="IBMLogo.jpg>
		<animator attribute="rotation" from ="0" to="360" duration="3000" 
			repeat="3"/>
	</view>
</canvas>

使用http：// localhost：8080 / lps-4.0.x / animation / RepeatAnimation.lzx运行此示例。

清单26显示了一个环绕另一个视图的视图。

清单26. CircularAnimation.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<view valign="middle" align="center" bgcolor="#ddddee" width="350" height="150"/>
		<view width="40" height="40" bgcolor="silver"
			x="${ 180 + 30 * Math.cos (angle*Math.PI/180) }"
			y="${ 100 + 30 * Math.sin (angle*Math.PI/180) }">
			<attribute name="angle" value="0"/>
			<animator motion="linear" attribute="angle" from ="0"
				to="360" duration="2000" repeat="Infinity"/>
			<animator motion="linear" attribute="rotation" from ="0"
				to="360" duration="2000" repeat="Infinity"/>
	</view>
</canvas>

参见带有http：// localhost：8080 / lps-4.0.x / animation / CircularAnimation.lzx的示例。图21显示了生成的输出。

图21.圆形动画

使用`animatorgroup`

animatorgroup标签可用于对多个animator标签进行分组。 process属性确定这些标签的运行方式。将process属性设置为“同时”以使所有事件同时发生。将process设置为“顺序”，以使它们一个接一个地运行。默认情况下， process属性是顺序的。清单27显示了animatorGroup的用法。

清单27. AnimatorGroup.lzx

<canvas height="400">
	<button width="70" text="Click here">
		<animatorgroup process="sequential">
			<animator attribute="x" from ="0" to="300" duration="1000"/>
			<animator attribute="rotation" from ="0" to="90" duration="1000"/>
		</animatorgroup>
	</button>
</canvas>

使用`timer`

计时器是可以设置为在指定时间段后调用方法的对象。例如，可以在用户不活动十分钟后显示警告消息，如清单28所示。

清单28. Timer.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<alert id="alertBox" width="250">10 minutes left for Completion!</alert>
	<handler name="oninit">
		var delegate = new LzDelegate (this, "showAlertBox");
		lz.Timer.addTimer (delegate, 3000);
	</handler>	
	<method name="showAlertBox">
		alertBox.open();
	</method>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / animation / Timer.lzx编译和调用以上示例。图22显示了生成的输出。

图22.计时器服务

清单29中的另一个示例显示了一个数字时钟。

清单29. DigitalClock.lzx

<canvas fontsize="45" width="450" bgcolor="#6699FF" height="200">
	<text id="display" width="250" bgcolor="#ddddee" align="center" valign="middle"/>
	<handler name="oninit">
		lz.Timer.addTimer (new LzDelegate (this, "refreshClock"), 1000);
	</handler>
	<method name="refreshClock">
		lz.Timer.addTimer (new LzDelegate (this, "refreshClock"), 1000);
		var now = new Date ();
		var hour = now.getHours ();
		var minute = now.getMinutes();
		var second = now.getSeconds();
		display.setText (hour + ":" + minute + ":" + second);
	</method>

	<![CDATA[
		if (n < 10) {
			return "0" + n;
		} else {
			return n;
		}
	]]>
</canvas>

使用http：// localhost：8080 / lps-4.0.x / animation / DigitalClock.lzx运行此示例。图23显示了生成的输出。

图23.数字时钟

构建丰富的组件

OpenLaszlo为用户提供了丰富的组件集，这些组件可以轻松用于任何LZX应用程序。图24显示了OpenLaszlo中某些内置组件的类层次结构。

图24.组件类层次结构

滑杆

滑块是允许通过拖动按钮选择值的组件。 slider类是所有滑块的模板。它是Baseslider的直接子类。该Baseslider类又扩展Basevaluecomponent类的直系后裔Basecomponent 。清单30中的代码使用滑块控制视图的不透明度。

清单30. Slider.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<slider name="s" valign="middle" align="center"  height="100" 
		showvalue="true" width="200" value="50"/>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / richComponents / Slider.lzx编译和调用以上应用程序。图25显示了生成的输出。

图25.滑块组件

`datepicker`

顾名思义， datepicker组件使您可以轻松选择日期。该组件是由表示datepicker类，它是一个直接后裔Basedatepicker类。 Basedatepicker是抽象类，并且是Basecomponent的子类。例如，清单31中的代码允许用户选择一个日期，并在文本标签中显示所选的日期。

清单31. Datepicker.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<script>
		var today = new Date ();
		var lastYear = new Date (today.getFullYear () - 1,
		today.getMonth (), today.getDate ());
		var nextYear = new Date (today.getFullYear () + 1,
		today.getMonth (), today.getDate ());
	</script>
	<simplelayout axis="y" spacing="5"/>
	<datepicker earliestdate="${lastYear}"
		selecteddate="${today}"
		latestdate="${nextYear}">
		<handler name="onselecteddate">
			if ( this.selecteddate != null ) {
				display.year.setText (
				this.selecteddate.getFullYear() );
				display.month.datapath.setXPath(
				"datepicker_strings_en:/months/month[@index='" +
				this.selecteddate.getMonth() + "']/@full" );
				display.date.setText ( this.selecteddate.getDate() );
			}
		</handler>
	</datepicker>
	<view id="display">
		<text name="month" resize="true" datapath="."/>
		s<text name="date" resize="true"/>
		<text name="year" resize="true"/>
		<simplelayout axis="x" spacing="2"/>
	</view>
</canvas>

通过使用http：// localhost：8080 / lps-4.0.x / richComponents / DatePicker.lzx编译并调用上面的示例。图26显示了生成的输出。

图26.日期选择器

滚动条

滚动条组件由scrollbar类表示。它的子类Basescrollbar ，这是一个直接的子类Basecomponent 。清单32中的代码显示了一个LZX应用程序，它使用一个垂直滚动条和一个水平滚动条。

清单32. ScrollBar.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<view name="main" width="100" height="100" clip="true">
		<text multiline="true">
			OpenLaszlo is an open source platform invented by Laszlo Systems, 
			a company based in San Mateo, California for the development and
			deployment of rich Internet based applications.It is released 
			under the Open Source Initiative-certified Common Public License. 
			One of the greatest challenge faced by Rich Interactive 
			Applications (RIA) developers today is that of Browser 
			Compatibility. Since OpenLaszlo is based on the famous Java 
			paradigm of write-once-run-everywhere, it ensures that 
			applications based on OpenLaszlo runs uniformly in various 
			browsers in multiple operating systems. 
		</text>
		<scrollbar axis="y"/>
		<scrollbar axis="x"/>
	</view>
</canvas>

可以使用http：// localhost：8080 / lps-4.0.x / richComponents / ScrollBar.lzx编译和调用该示例。图27显示了生成的输出。

图27.滚动条

标签和标签窗格

选项卡是可以包含选项卡窗格的视图。每个选项卡窗格都有一个标题，并且可以存储其他组件。选项卡和选项卡窗格是在较小的区域中排列组件的好方法，如清单33所示。

清单33. TabbedPane.lzx

<canvas width="450" bgcolor="#6699FF" height="300">
	<form inset_top="10">
		<tabs tabalign="right">
			<tabpane bgcolor="silver"  text="Name" tabwidth="80">
				<simplelayout axis="y"/>
				<text>Customer Name</text>
				<edittext name="customerName"/>
				<text>Email</text>
				<edittext name="email"/>
				<radiogroup name="customerType">
					<radiobutton>Silver</radiobutton>
					<radiobutton>Gold</radiobutton>
				</radiogroup>
				<button>Submit</button>
			</tabpane>
			<tabpane bgcolor="silver" text="Address" tabwidth="80">
				<simplelayout axis="y"/>
				<text>Address</text>
				<edittext name="address"/>
				<text>City</text>
				<edittext name="city"/>
				<text>State</text>
				<edittext name="astate"/>
				<text>Pin Code</text>
				<edittext name="pincode"/>
			</tabpane>
		</tabs>
	</form>
</canvas>

通过浏览到http：// localhost：8080 / lps-4.0.x / richComponents / TabbedPane.lzx来调用上面的示例。图28显示了生成的输出。

图28. TabbedPane

树

树是OpenLaszlo组件，用于显示分层数据，例如XML。 tree类代表一棵树，并且是Basetree的子类。 Basetree是一个子类的Basecomponent 。清单34中的代码显示了如何构造和使用树。

清单34. TreeView.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
	<view valign="middle" align="center" width="200" height="150">
		<tree open="true" text="OpenLaszlo Article">
			<tree text="Chapter 1: Overview" isleaf="true"/>
			<tree open="true" text="Chapter 2: Basic Components">
				<tree text="Section 1: Slider" isleaf="true"/>
				<tree text="Section 2: ScrollBar" isleaf="true"/>
			</tree>
		</tree>
</view>
</canvas>

使用http：// localhost：8080 / lps-4.0.x / richComponents / TreeView.lzx运行示例。图29显示了生成的输出。

图29.树视图

处理XML数据

OpenLaszlo可用于使用XPath显示和处理数据，XPath是一种从XML文档检索数据的语言。 LzDataset类用于保存XML数据，还可以通过HTTP GET或POST请求检索数据。图30显示了LzDataset类的层次结构。

图30. `LzDataset`类层次结构

该图显示了一个树，其中LzNode在顶部。左侧有一个叉子，其中包含lzDataNode，LzDataElement和LzDataset

可以使用<datapath>和<datapointer>操纵数据集中的<datapointer> 。

数据路径

数据路径可用于通过XPath访问数据集中包含的数据，如下所示。作为示例，清单35中的代码显示了如何使用DataPath。

清单35.使用DataPath.lzx

<canvas width="600" bgcolor="#6699FF" height="220">
	<dataset name="myData" request="true" type="http" src="data.xml"/>
	<grid height="100" valign="middle" datapath="myData:/company" 
		contentdatapath="department">
		<gridcolumn width="100">
			Name
			<text datapath="name/text ()"/>
		</gridcolumn>
		<gridcolumn width="100">
			ID
			<text datapath="id/text ()"/>
		</gridcolumn>
		<gridcolumn width="200">
			Description
			<text datapath="desc/text ()"/>
		</gridcolumn>
		<gridcolumn width="100">
			Location
			<text datapath="location/text ()"/>
		</gridcolumn>
		<gridcolumn width="70">
			<view datapath="position ()">
			<button text="delete">
				<handler name="onclick">
					parent.datapath.deleteNode ();
				</handler>
			</button>
			</view>
		</gridcolumn>
	</grid>
</canvas>

清单36显示了data.xml的内容。

清单36. data.xml的内容

<company>
	<department headCount="19">
		<name>HR</name>
		<id>Comp-HR-01</id>
		<location>First-Flr</location>
		<desc>Looks after Human resources</desc>
	</department>
	<department headCount="200">
		<name>Manufacturing</name>
		<id>Comp-MFG-02</id>
		<location>Ground-Flr</location>
		<desc>Manufactures Components</desc>
	</department>
	<department headCount="65">
		<name>Marketing</name>
		<id>Comp-Mktg-01</id>
		<location>Third-Flr</location>
		<desc>Markets the product</desc>
	</department>
</company>

可以使用http：// localhost：8080 / lps-4.0.x / data / UsingDataPath.lzx编译和调用以上应用程序。图31显示了生成的输出。

图31.使用数据路径

数据指针

DataPointer充当数据集中的光标。 DataPointer可用于顺序移动数据集中包含的记录。清单37显示了如何使用DataPointer。

清单37. UsingDataPointer.lzx

<canvas width="450" bgcolor="#6699FF" height="200">
  <simplelayout spacing="5"/>
  <script>
    var isLast = false;
  </script>

  <dataset name="mydata" request="true" type="http" src="data.xml"/>
  
  <alert name="myalert"/>

  <view id="tt" height="60" valign="middle" width="450" font="verdana" fontsize="20">
	<text name="output" y="30" align="center"/>
  </view>

  <view height="150" align="center" valign="middle" >
    <simplelayout  axis="x" spacing="4" />
    <datapointer id="mydp" xpath="mydata:/company/department[1]"/>
    <button font="verdana" fontsize="15"> Next Record
      <handler name="onclick">
		isFirst = false;
		var s = mydp.xpathQuery('name/text()');
		if(isLast){
			s = 'Last Record!';
		}
		if(!mydp.selectNext()){
		   isLast = true;
		}
        tt.output.setText(s);
      </handler>
    </button>
  </view>
</canvas>

使用http：// localhost：8080 / lps-4.0.x / data / UsingDataPointer.lzx运行示例。图32显示了生成的输出。

图32.使用`DataPointer`

屏幕截图显示了标题为“ Manufacturing”的工厂，带有标记为“ Next Record”的按钮

调试

在软件开发中，良好的调试工具有助于使应用程序更健壮和无缺陷。 OpenLaszlo配备了增强的调试工具，使开发人员可以查看运行时错误消息，评估变量值等。

要显示“调试器”窗口，请执行以下操作：

将canvas标记的debug属性设置为true： <canvas debug="true">
在用于请求OpenLaszlo应用程序的URL的末尾附加查询参数debug=true 。例如：
```
http://localhost:8080/lps-4.0.x/app14/debugTest.lzx?debug=true
```
单击调试单选按钮和编译按钮

作为示例，清单38中的代码在画布上显示了一个按钮。

清单38. DebugButton.lzx

<canvas width="450" bgcolor="#6699FF" height="800">
	<button id="buttonId" width="200" height="80" align="center" valign="middle">
		Hello World!!</button>
</canvas>

可以通过使用debug=true参数打开其URL来启用上述调试，并启用调试功能：http：// localhost：8080 / lps-4.0.x / debug / DebugButton.lzx？debug = true。这将加载应用程序，并打开一个Laszlo Debugger窗口，底部带有一个输入文本字段。

输入按钮ID buttonId ，然后按Enter 。输入的文本将以绿色回显，并且调试器会将对象打印为蓝色超链接。

接下来，在调试器窗口中单击对象链接<<button>#0| #buttonId>> <<button>#0| #buttonId>> 。调试器将打印出JavaScript对象的属性，如下图33所示。

图33.调试器窗口

屏幕截图显示了正在运行的调试器窗口，其中列出了与正在运行的应用程序关联的不同参数

在调试器中键入JavaScript表达式将编译该表达式并打印出结果。例如， buttonId.width将返回width属性的值。同样，输入命令buttonId.setAttribute('width', 400)将更改画布上显示的按钮的宽度。 Debugger窗口是Debug类的实例，它是LzView的子类。因此，所有属性LzView类也可在Debug类。

以下是Debug类中定义的方法：

backtrace (frameCount) —将当前调用堆栈的快照复制到LzBacktrace对象，然后可以打印或检查该对象。仅当使用-option debugBacktrace=true编译应用程序时，此方法才可用。 frameCount参数指定要从回溯中省略的帧数。（默认值为1）。
error (control, args) —在控制台上显示错误。 control参数指定格式控件，而args参数表示任意数量的参数。
format (control, args) -使用formatToString方法格式化输出。 control参数指定格式控件，而args参数表示任意数量的参数。
formatToString (control, args) —此方法类似于C语言中的printf函数。 control参数指定格式控件，而args参数表示任意数量的参数。
inspect (object, reserved) —在调试控制台上显示指定对象的属性。 reserved参数保留供将来使用。
log (message) —将消息发送到日志文件。
monitor (object, property) —监视指定对象的指定属性。每次属性值更改时，都会在“调试器”窗口中显示一条消息。
trace (object, method) —监视指定对象中指定方法的使用。每次调用该方法时，都会在Debugger窗口中打印一条消息。
取消unmonitor (object, property) —取消监视指定对象上的指定属性。
untrace (object, method) —取消对指定对象上的指定监视器的监视。

Debugger窗口还可用于评估JavaScript全局变量和表达式，以及执行JavaScript语句。该评估是文本字段，并在调试器窗口底部的EVAL按钮。

结论

OpenLaszlo是一个开源开发平台，用于构建以LZX（一种包含嵌入式JavaScript的XML语言）编写的富Web应用程序。

但是，与许多Ajax解决方案不同，OpenLaszlo应用程序可跨浏览器移植。由于OpenLaszlo编译器技术能够处理运行时详细信息，这使之成为可能，从而使开发人员可以将更多精力集中在应用程序的行为/逻辑和外观上，从而真正使其成为“一次编写，随处运行”的平台。 OpenLaszlo支持具有许多内置和可重用组件的丰富图形模型，以及先进的所见即所得文本和图形编辑工具。

翻译自: https://www.ibm.com/developerworks/opensource/library/os-openlaszlo/index.html