Openlaszlo教程.docx

developerWorks 中国技术主题Open source文档库OpenLaszlo 一个快速构建和部署富 Internet 应用程序的平台理解 OpenLaszlo 是什么，以及它如何简化富 Internet 应用程序的开发和部署OpenLaszlo 是 Common Public License（CPL）下发布的一个开放源码平台，用于开发和交付富 Internet 应用程序（RIA）。OpenLaszlo 基于 LZX，后者是一种利用 XML 和 JavaScript 的面向对象语言。用 OpenLaszlo 编写的富客户端应用程序可以跨浏览器和跨平台运行。本文中讨论 OpenLaszlo 的架构和 API，并提供一些例子，此外还谈到一些基本的调试工具。0 评论： Kumarsun Nadar, 高级资深软件工程师, EMC关闭 xKumarsun Nadar 目前是位于印度孟买的 IBM 印度软件实验室（ISL）WebSphere Business Service Fabric 产品团队的一名高级资深软件工程师。作为该团队的一员，他一直从事基于 Wicket 框架的 Fabric Web Tools 模型的 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 服务器是一个 Java servlet/JSP 应用程序。该服务器使 LZX 应用程序的开发轻而易举。 OpenLaszlo 服务器由 5 个子系统组成：Interface Compiler Interface Compiler 由一个 LZX Tag Compiler 和一个 Script Compiler 组成，它将源文件转换成可执行（SWF）文件，并将它们以字节码的形式提供给客户端浏览器中运行的插件（例如 Flash 或 J2ME），或者以 JavaScript（DHTML）的形式提供给浏览器，由浏览器本身执行。Media Transcoder Media Transcoder 将所有媒体资产转换成一种统一格式，以便由 OpenLaszlo 的目标客户端呈现引擎来呈现。这使得 OpenLaszlo 应用程序可以在同一个画布上以统一的方式提供各种受支持的媒体类型，而不必使用多个助手应用程序或附加的重放软件。Media Transcoder 可自动呈现以下媒体类型： JPEG、GIF、PNG、MP3、TrueType 和 SWF（仅指艺术/动画）。Data Manager Data Manager 充当 OpenLaszlo 应用程序与网络上其他应用程序，例如数据库和 XML Web 服务之间的接口。它由一个数据编译器和一系列的数据连接器组成，数据编译器将数据转换成一种压缩的二进制格式，而数据连接器则使 OpenLaszlo 应用程序可以通过 XML/HTTP 检索数据。 Cache Cache 包含任何应用程序的最近编译版本。当 OpenLaszlo 应用程序第一次被请求时，它将被编译，产生的 SWF 文件被发送到客户端。与此同时，一个副本缓存在服务器上，所以随后的请求就不必等待编译。OpenLaszlo 客户端OpenLaszlo 的客户端架构主要由一些 Laszlo 基础类组成，它为运行 OpenLaszlo 应用程序提供运行时环境。每当有客户端通过 URL 调用 OpenLaszlo 应用程序时，所需的运行时库也随之一起下载。 客户端总是维护与服务器的连接。OpenLaszlo 客户端主要由以下子系统组成： Event System Event System 负责处理各种基于用户的事件，例如鼠标点击或数据提交。 它还通过在客户端上执行各种不同的操作来提高应用程序的性能， 例如进行排序和验证，而不是直接将那些数据传递给服务器。Data Loader/BinderData Loader 接收从服务器端发来的数据，并将那些数据绑定到相应的 UI 组件，例如客户端上的菜单、 文本框和文本域。Layout and Animation SystemLayout and Animation System 处理各种与动画相关的算法，使用户可以以视觉上连续的方式查看组件。它还通过极少的编程，使用相对和绝对像素定位来处理各种组件的位置。请求周期一个典型的请求遵循以下路径：用户通过浏览器以 URL 的形式发送对资源的请求。OpenLaszlo 服务器根据 URL 获取资源，并将它发送到 Interface Compiler，以便进行编译。Interface Compiler 将 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 中的代码是一个简单的 HelloWorld LZX 应用程序。 清单 1. HelloWorld.lzxWelcome to Hello World!保存源文件下载，将该脚本保存为 HelloWorld.lzx。该文件必须保存在 Server/lps-4.0.x 目录中的某个地方，该目录在 OpenLaszlo Server 的安装目录下。编译和运行脚本编译 LZX 文件的最容易的方式是使用 OpenLaszlo 服务器。确保计算机上正在运行 Apache Tomcat，让浏览器访问以下 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. 示例 hello world OpenLaszlo 应用程序显示屏底部显示的是一个开发工具，其中包含一些按钮，这些按钮可用于查看 OpenLaszlo 源代码、部署应用程序、 编译源代码和执行其他功能。可以通过传递适当的请求类型和运行时目标作为参数， 避开该开发工具。例如：:8080/lps-4.3.0/helloWorld/HelloWorld.lzx?lzr=swf9&lzt=html以及： :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.lzxOpenlaszlo World!可以使用 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.1 KHz、22 KHz, 11 KHz, 8 KHz 和 5.5 KHz 频率采样的音频文件。清单 5 显示一个例子 LZX 应用程序，该 LZX 应用程序使用 view 显示一个图像。清单 5. ResourceView.lzx可以使用 http:/localhost:8080/lps-4.0.x/view/ResourceView.lzx 调用上述应用程序。图 8 显示生成的输出。图 8. 使用资源视图 窗口Window 对象表示一个可调窗口。Window 类是 WindowPanel 的子类，后者是 BaseWindow 的子类。BaseWindow 又是 BaseComponent 的直接子类。清单 6 中的 Window.lzx 文件是一个 LZX 应用程序，它显示一个可调窗口。 清单 6. Window.lzxOpenLaszlo World!可以使用 http:/localhost:8080/lps-4.0.x/window/Window.lzx 调用上述应用程序。 图 9 显示生成的输出。图 9. 窗口警告Alert 对象表示一个显示消息的模态对话框。Alert 对话框带有一个 OK 按钮。默认情况下 Alert 对话框不会显示。 必须调用 Alert 的 open 方法才能使之可见。 Alert 类是 ModalDialog 类的子类，后者又是 WindowPanel 的子类。Modal Dialog 对象表示 一个可移动的浮动视图。清单 7 中的代码显示如何使用 Alert 对话框。 清单 7. Alert.lzxPress OK to continue.canvas.warning.open ();可以使用 http:/localhost:8080/lps-4.0.x/alert/Alert.lzx 调用上述应用程序。图 10 显示生成的输出。图 10. Alert 对话框清单 8. AlertWithButtons.lzxClick OK to Process.if (this.result) parent.message.setText(Processing Started); else parent.message.setText (Processing Stopped);canvas.warning.open (); Do you want to start processing?AlertWithButtons 以包含 Yes/No 按钮的 Alert 框的形式请求用户确认，并采取适当的行动。按钮Button 对象表示一个可点击按钮，它会引发一个事件，所以可以在点击时执行某个动作。该类是 BaseButton 的子类，后者又是 BaseComponent 的子类。清单 9 中的 Button.lzx 文件是一个使用按钮的 LZX 应用程序。按钮的文本是 “Hello World!”。清单 9. Button.lzxHello World!通过浏览 http:/localhost:8080/lps-4.0.x/layout/Button.lzx 运行该例子。图 11 显示生成的输出。图 11. 包含按钮的画布回页首使用布局通过布局管理器可以布置容器中的组件。 LzLayout 类是 LzNode 的子类，负责布置视图。 LzLayout 类是提供该功能的基类。 永远不要直接实例化这个类，而是创建它的子类的一个实例。下面是 LzLayout 的一些子类。SimpleLayoutSimpleLayout 用于水平或垂直地接连放置组件。 可以使用 simplelayout 标记创建它的实例，如下所示。 清单 10. SimpleLayout.lzx使用 http:/localhost:8080/lps-4.0.x/layout/SimpleLayout.lzx 调用该示例。图 12 显示生成的输出。图 12. 简单布局 ResizeLayoutResizeLayout 类似于 SimpleLayout，通过它可以水平或垂直地定位视图。 但是，通过 ResizeLayout 还可以重新调整受管的视图，如清单 11 所示。 清单 11. ResizeLayout.lzx可以使用 http:/localhost:8080/lps-4.0.x/layout/ResizeLayout.lzx 调用上述应用程序。图 13 显示生成的输出。图 13. 可调布局 SimpleBoundsLayoutSimpleBoundsLayout 像 SimpleLayout 一样水平或垂直地定位视图。但是，SimpleBoundsLayout 确保当一个视图旋转时，不会与其他视图重叠。下面清单 12 显示了一个例子。清单 12. SimpleBoundsLayout.lzx可以使用 http:/localhost:8080/lps-4.0.x/layout/SimpleBoundsLayout.lzx 调用该应用程序。 图 14 显示生成的输出。图 14. SimpleBoundsLayoutReverseLayout使用 ReverseLayout 时，视图从右到左排列（沿着 x 轴）或者从下到上排列（ 沿着 y 轴）。清单 13 显示一个使用 ReverseLayout 的 LZX 应用程序。 清单 13. ReverseLayout.lzx通过 http:/localhost:8080/lps-4.0.x/layout/ReverseLayout.lzx 运行该例子。 图 15 显示生成的输出。图 15. 反转布局 ConstantLayout这种布局将视图层相互层叠。 和 SimpleLayout 一样，可指定 axis 属性。然后，ContantLayout 根据 xoffset 和 yoffset 值指定的像素数错开每个视图。 结果是按这些值叠放的视图。清单 14. ConstantLayout.lzx可以使用 http:/localhost:8080/lps-4.0.x/layout/ConstantLayout.lzx 调用该应用程序。 图 16 显示生成的输出。图 16. Constant 布局WrappingLayout当空间不够时，WrappingLayout 通过换行或换列包装它管理的视图。清单 15 显示一个 例子。清单 15. WrappingLayout.lzx使用 http:/localhost:8080/lps-4.0.x/layout/WrappingLayout.lzx 调用上述应用程序。 图 17 显示生成的输出。图 17. Wrapping 布局回页首事件处理为了使程序更具交互性， OpenLaszlo 对象可以在用户做出动作后产生事件，例如 buttonclick。然后将事件与 一个事件处理程序关联，后者包含该对象产生事件时将执行的代码。 有几种方式可以将事件与事件处理程序相关联。 一种方式是在对象的标记声明中将事件处理程序的名称赋给事件名称，如清单 16 所示。下面显示的标记创建一个 Window 对象，它的 onx 事件与事件处理程序 myHandler 相关联。 清单 16. window.lzx另一种方法是编写一个方法，将该方法嵌入在对象的标记声明中， 并将事件处理程序赋给那个方法的 event 属性。 清单 17 中的代码片段在标记中将一个按钮的 onclick 事件与事件处理程序相关联。 清单 17. Window.lzx/ Event handler code清单 18 中的例子显示一个按钮发出的 onclick 事件，该事件被映射到一个事件处理程序。清单 18. EventWiring.lzxHello ButtonsetAttribute(text, Hello Button Clicked);setAttribute (width, 200);可以通过浏览 http:/localhost:8080/lps-4.0.x/event/EventWiring.lzx 执行例子 EventWiring.lxz。图 18 显示最初生成的输出，以及单击按钮触发事件后的输出。图 18. 事件处理或者，还可以将事件处理程序的代码嵌入在对象标记中，如 图 19 所示。 清单 19. EmbeddedEventHandling.lzxHello Button全局事件处理程序 全局事件处理程序可以用 JavaScript 函数编写，这些函数可以从多个对象中调用。 例如，清单 20 中的代码 定义 myHandler 函数， 该函数可以从程序中的任何地方调用。 清单 20. GlobalEventHandler.lzx Hello Button可以使用 http:/localhost:8080/lps-4.0.x/event/GlobalEventHandler.lzx 编译和调用上述应用程序。传递对象的引用在 OpenLaszlo 中，甚至可以将对象引用传递给方法，如清单 21 所示。清单 21. PassingObjectReference.lzx Hello Button 1 Hello Button 2可以使用 http:/localhost:8080/lps-4.0.x/event/PassingObjectReference.lzx 编译和调用该应用程序。 回页首添加动画通常，可以通过更改对象的 x 和 y 坐标值实现对象的动画效果。 OpenLaszlo 中的动画很容易通过使用 animator 和 animatorGroup 标记来实现。animator 标记在对象中使用，用于执行移动，而 animatorGroup 标记用于组合多个 animator 标记，以实现多种类型的动画。清单 22 中的 LZX 应用程序显示一个按钮，该按钮沿着一条水平线移动。 清单 22. SimpleAnimation.lzx以上例子中的按钮在 5000 毫秒内沿着从 x=0 到 x=450 的路径移动。 可以通过 http:/localhost:8080/lps-4.0.x/animation/SimpleAnimation.lzx 执行这个例子。 图 19 显示生成的输出。图 19. 简单的动画 多重动画通过使用多个 animator 标记，可以使一个对象同时沿着两个以上的方向移动。 它可以一边沿着 x 轴移动，一边旋转。清单 23 显示使用多个 animator 标记的代码。清单 23. MultipleAnimation.lzx上述应用程序中的按钮在 5000 毫秒内一边沿着从 x=0 到 x=450 的方向移动，一边进行 360 度的选择。可以通过浏览 http:/localhost:8080/lps-4.0.x/animation/MultipleAnimation.lzx 执行上述例子。图 20 显示生成的输出。图 20. 多重动画 当生成的应用程序装载后，以上例子中的动画便立即开始动起来。 另外，还可以使动画根据某个事件，例如 onClick 来开始，方法是将 animator 标记的 start 属性设为 false， 然后调用 animator 对象的 doStart 方法。 清单 24 实现了该功能。 清单 24. ManualAnimationStart.lzx可以使用 http:/localhost:8080/lps-4.0.x/animation/ManualAnimationStart.lzx 编译和调用该应用程序。 重复动画可以设置 animator 标记的 repeat 属性，以确定动画循环的次数。将该属性设为 “Infinity” 则导致动画无限循环。 例如，清单 25 中的 OpenLaszlo 应用程序显示一个重复 3 次的动画。 清单 25. RepeatAnimation.lzx使用 http:/localhost:8080/lps-4.0.x/animation/RepeatAnimation.lzx 运行该例子。清单 26 显示一个视图在另一个视图上翻滚。 清单 26. CircularAnimation.lzx使用 http:/localhost:8080/lps-4.0.x/animation/CircularAnimation.lzx 运行这个例子。 图 21 显示生成的输出。图 21. 翻滚 动画使用 animatorgroup可以使用 animatorgroup 标记组合多个 animator 标记。 process 属性确定这些标记如何运行。将 process 属性设为 “simultaneous” 将使所有事件同时发生。将 process 设为 “sequential” 将使这些事件依次发生。默认情况下， process 属性的值为 sequential。清单 27 显示 animatorGroup 的使用。 清单 27. AnimatorGroup.lzx使用 timer计时器（timer）是一个对象，通过设置计时器，可以在指定时间段过后调用某个方法。 例如，可以在用户 10 分钟无操作后调用 显示一条警告消息，如清单 28 所示。 清单 28. Timer.lzx10 minutes left for Completion!var delegate = new LzDelegate (this, showAlertBox);lz.Timer.addTimer (delegate, 3000);alertBox.open();可以使用 http:/localhost:8080/lps-4.0.x/animation/Timer.lzx 编译和调用上述例子。图 22 显示生成的输出。图 22. Timer 服务清单 29 中的另一个例子显示一个数