Openlaszlo教程.docx
《Openlaszlo教程.docx》由会员分享，可在线阅读，更多相关《Openlaszlo教程.docx（47页珍藏版）》请在冰豆网上搜索。
Openlaszlo教程
developerWorks中国
技术主题
Opensource
文档库
OpenLaszlo——一个快速构建和部署富Internet应用程序的平台
理解OpenLaszlo是什么，以及它如何简化富Internet应用程序的开发和部署
OpenLaszlo是CommonPublicLicense（CPL）下发布的一个开放源码平台，用于开发和交付富Internet应用程序（RIA）。
OpenLaszlo基于LZX，后者是一种利用XML和JavaScript的面向对象语言。
用OpenLaszlo编写的富客户端应用程序可以跨浏览器和跨平台运行。
本文中讨论OpenLaszlo的架构和API，并提供一些例子，此外还谈到一些基本的调试工具。
0
评论：
KumarsunNadar,高级资深软件工程师,EMC
关闭[x]
KumarsunNadar目前是位于印度孟买的IBM印度软件实验室（ISL）WebSphereBusinessServiceFabric产品团队的一名高级资深软件工程师。
作为该团队的一员，他一直从事基于Wicket框架的FabricWebTools模型的UI开发。
他获得了SUN公司SCJP、SCWCD和SCBCD认证证书并对基于Java/J2EE的各种客户端和服务器端技术，比如Wicket、EJB、Hibernate、Struts等有丰富的经验。
他在业余时间喜欢观看和参加一些体育项目，比如板球和旅游杯摩托车赛。
2010年3月25日
内容
概述
架构
第一个OpenLaszlo应用程序
基本组件
使用布局
事件处理
添加动画
构建富组件
使用XML数据
调试
结束语
下载
参考资料
评论
概述
EIA开发人员面临的最大挑战之一是浏览器的兼容性。
由于OpenLaszlo基于“一次编写，到处运行”的Java™语言范式，因此可确保基于OpenLaszlo的应用程序可以跨多种操作系统在不同的浏览器中运行。
回页首
架构
下面的图显示OpenLaszlo的服务器端和客户端架构。
图1.OpenLaszlo服务器和客户端子系统
OpenLaszlo服务器
OpenLaszlo服务器是一个Javaservlet/JSP应用程序。
该服务器使LZX应用程序的开发轻而易举。
OpenLaszlo服务器由5个子系统组成：
InterfaceCompiler—InterfaceCompiler由一个LZXTagCompiler和一个ScriptCompiler组成，它将源文件转换成可执行（SWF）文件，并将它们以字节码的形式提供给客户端浏览器中运行的插件（例如Flash或J2ME），或者以JavaScript（DHTML）的形式提供给浏览器，由浏览器本身执行。
MediaTranscoder—MediaTranscoder将所有媒体资产转换成一种统一格式，以便由OpenLaszlo的目标客户端呈现引擎来呈现。
这使得OpenLaszlo应用程序可以在同一个画布上以统一的方式提供各种受支持的媒体类型，而不必使用多个助手应用程序或附加的重放软件。
MediaTranscoder可自动呈现以下媒体类型：
JPEG、GIF、PNG、MP3、TrueType和SWF（仅指艺术/动画）。
DataManager—DataManager充当OpenLaszlo应用程序与网络上其他应用程序，例如数据库和XMLWeb服务之间的接口。
它由一个数据编译器和一系列的数据连接器组成，数据编译器将数据转换成一种压缩的二进制格式，而数据连接器则使OpenLaszlo应用程序可以通过XML/HTTP检索数据。
Cache—Cache包含任何应用程序的最近编译版本。
当OpenLaszlo应用程序第一次被请求时，它将被编译，产生的SWF文件被发送到客户端。
与此同时，一个副本缓存在服务器上，所以随后的请求就不必等待编译。
OpenLaszlo客户端
OpenLaszlo的客户端架构主要由一些Laszlo基础类组成，它为运行OpenLaszlo应用程序提供运行时环境。
每当有客户端通过URL调用OpenLaszlo应用程序时，所需的运行时库也随之一起下载。
客户端总是维护与服务器的连接。
OpenLaszlo客户端主要由以下子系统组成：
EventSystem—EventSystem负责处理各种基于用户的事件，例如鼠标点击或数据提交。
它还通过在客户端上执行各种不同的操作来提高应用程序的性能，例如进行排序和验证，而不是直接将那些数据传递给服务器。
DataLoader/Binder—DataLoader接收从服务器端发来的数据，并将那些数据绑定到相应的UI组件，例如客户端上的菜单、文本框和文本域。
LayoutandAnimationSystem—LayoutandAnimationSystem处理各种与动画相关的算法，使用户可以以视觉上连续的方式查看组件。
它还通过极少的编程，使用相对和绝对像素定位来处理各种组件的位置。
请求周期
一个典型的请求遵循以下路径：
用户通过浏览器以URL的形式发送对资源的请求。
OpenLaszlo服务器根据URL获取资源，并将它发送到InterfaceCompiler，以便进行编译。
InterfaceCompiler将LZX应用程序描述标记和JavaScript转换为可执行（SWF）字节码，以便传送到OpenLaszlo客户端环境。
该代码被放在缓存中，并从缓存中发送到客户端。
取决于调用应用程序的方式，上述代码以SWF文件或嵌有SWF对象的HTML文件的形式，随适当的Laszlo基础类一起传送。
如果影响返回的格式为HTML，则由浏览器显示应用程序。
如果返回的格式为SWF，则由Flash播放器播放应用程序。
用户在客户端输入请求数据，并提交该数据。
OpenLaszlo服务器调用适当的数据连接器，后者取XML数据。
OpenLaszlo服务器将数据发送回客户端。
客户端上的Laszlo基础类将数据绑定到适当的UI对象。
系统以响应数据更新屏幕组件。
图2显示上述一个典型的OpenLaszlo应用程序请求周期。
图2.请求周期
回页首
第一个OpenLaszlo应用程序
开发OpenLaszlo应用程序需要完成以下步骤：
使用文本编辑器编写OpenLaszlo程序（使用XML和JavaScript）。
将该文件保存为LZX文件。
将LZX文件编译为SWF文件或DHTML，可以手动编译，也可以使用OpenLaszlo服务器，并在浏览器中查看输出。
编写OpenLaszlo应用程序
如前所述，OpenLaszlo应用程序是一个XML文档。
因此，可以使用文本编辑器编写代码。
清单1中的代码是一个简单的HelloWorldLZX应用程序。
清单1.HelloWorld.lzx
WelcometoHelloWorld!
保存源文件
下载，将该脚本保存为HelloWorld.lzx。
该文件必须保存在Server/lps-4.0.x目录中的某个地方，该目录在OpenLaszloServer的安装目录下。
编译和运行脚本
编译LZX文件的最容易的方式是使用OpenLaszlo服务器。
确保计算机上正在运行ApacheTomcat，让浏览器访问以下URL：
http:
//localhost:
8080/lps-4.0.x/path。
在此，path是LZX文件相对于Server/lps-4.0.x目录的路径。
例如，如果脚本被保存为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.示例helloworldOpenLaszlo应用程序
显示屏底部显示的是一个开发工具，其中包含一些按钮，这些按钮可用于查看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.示例HelloWorldOpenLaszlo应用程序
基本组件
OpenLaszlo附带了一组表示简单组件和富组件的类，以使LZX编程变得更容易和更快捷。
BaseComponent类是LzView的子类，同时又是所有LZX组件的超类。
画布
canvas标记表示LZX应用程序中所有视图和组件的最顶层容器。
每个LZX应用程序只有一个画布。
当LZX编译器遇到canvas标记时，将实例化LzCanvas类。
例如，清单2中的代码显示如何使用canvas标记和它的一些属性。
清单2.Canvas.lzx
OpenlaszloWorld!
可以使用http:
//localhost:
8080/lps-4.0.x/canvas/Canvas.lzx调用上述应用程序。
图5显示生成的输出。
图5.画布
视图
一个视图表示一块矩形区域，其中可显示文本和其他组件。
可以使用view标记或通过实例化LzView类创建视图。
例如，清单3显示一个使用view标记的LZX应用程序。
清单3.View.lzx
可以通过http:
//localhost:
8080/lps-4.0.x/view/View.lzx查看上述应用程序。
图6显示view.lzx文件生成的输出。
图6.使用视图
在典型的LZX应用程序中，常常会使用多个视图，视图之间相互嵌套。
清单4显示一个包含嵌套视图的LZX应用程序。
清单4.NestedView.lzx
可以通过浏览http:
//localhost:
8080/lps-4.0.x/view/NestedView.lzx调用上述应用程序。
图7显示生成的输出。
图7.使用嵌套视图
还可以使用view标记显示或播放外部资源，例如图像、MP3文件和其他Flash文件。
受支持的媒体类型有JPG、GIF、PNG、MP3和SWF。
注意，对MP3的支持仅限于以44.1KHz、22KHz,11KHz,8KHz和5.5KHz频率采样的音频文件。
清单5显示一个例子LZX应用程序，该LZX应用程序使用view显示一个图像。
清单5.ResourceView.lzx
width="300"height="150"/>
可以使用http:
//localhost:
8080/lps-4.0.x/view/ResourceView.lzx调用上述应用程序。
图8显示生成的输出。
图8.使用资源视图
窗口
Window对象表示一个可调窗口。
Window类是WindowPanel的子类，后者是BaseWindow的子类。
BaseWindow又是BaseComponent的直接子类。
清单6中的Window.lzx文件是一个LZX应用程序，它显示一个可调窗口。
清单6.Window.lzx
OpenLaszloWorld!
可以使用http:
//localhost:
8080/lps-4.0.x/window/Window.lzx调用上述应用程序。
图9显示生成的输出。
图9.窗口
警告
Alert对象表示一个显示消息的模态对话框。
Alert对话框带有一个OK按钮。
默认情况下Alert对话框不会显示。
必须调用Alert的open方法才能使之可见。
Alert类是ModalDialog类的子类，后者又是WindowPanel的子类。
ModalDialog对象表示一个可移动的浮动视图。
清单7中的代码显示如何使用Alert对话框。
清单7.Alert.lzx
PressOKtocontinue.
可以使用http:
//localhost:
8080/lps-4.0.x/alert/Alert.lzx调用上述应用程序。
图10显示生成的输出。
图10.Alert对话框
清单8.AlertWithButtons.lzx
ClickOKtoProcess.
if（this.result）{
parent.message.setText（"ProcessingStarted"）;
}else{
parent.message.setText（"ProcessingStopped'"）;
}
Doyouwanttostartprocessing?
AlertWithButtons以包含Yes/No按钮的Alert框的形式请求用户确认，并采取适当的行动。
按钮
Button对象表示一个可点击按钮，它会引发一个事件，所以可以在点击时执行某个动作。
该类是BaseButton的子类，后者又是BaseComponent的子类。
清单9中的Button.lzx文件是一个使用按钮的LZX应用程序。
按钮的文本是“HelloWorld!
!
”。
清单9.Button.lzx
HelloWorld!
!
通过浏览http:
//localhost:
8080/lps-4.0.x/layout/Button.lzx运行该例子。
图11显示生成的输出。
图11.包含按钮的画布
回页首
使用布局
通过布局管理器可以布置容器中的组件。
LzLayout类是LzNode的子类，负责布置视图。
LzLayout类是提供该功能的基类。
永远不要直接实例化这个类，而是创建它的子类的一个实例。
下面是LzLayout的一些子类。
SimpleLayout
SimpleLayout用于水平或垂直地接连放置组件。
可以使用simplelayout标记创建它的实例，如下所示。
清单10.SimpleLayout.lzx
使用http:
//localhost:
8080/lps-4.0.x/layout/SimpleLayout.lzx调用该示例。
图12显示生成的输出。
图12.简单布局
ResizeLayout
ResizeLayout类似于SimpleLayout，通过它可以水平或垂直地定位视图。
但是，通过ResizeLayout还可以重新调整受管的视图，如清单11所示。
清单11.ResizeLayout.lzx
options="releasetolayout"/>
可以使用http:
//localhost:
8080/lps-4.0.x/layout/ResizeLayout.lzx调用上述应用程序。
图13显示生成的输出。
图13.可调布局
SimpleBoundsLayout
SimpleBoundsLayout像SimpleLayout一样水平或垂直地定位视图。
但是，SimpleBoundsLayout确保当一个视图旋转时，不会与其他视图重叠。
下面清单12显示了一个例子。
清单12.SimpleBoundsLayout.lzx
可以使用http:
//localhost:
8080/lps-4.0.x/layout/SimpleBoundsLayout.lzx调用该应用程序。
图14显示生成的输出。
图14.SimpleBoundsLayout
ReverseLayout
使用ReverseLayout时，视图从右到左排列（沿着x轴）或者从下到上排列（沿着y轴）。
清单13显示一个使用ReverseLayout的LZX应用程序。
清单13.ReverseLayout.lzx
升级会员 