OpLenaszlo 入门教程.docx

OpenLaszlo 入门教程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/Binder Data Loader 接收从服务器端发来的数据，并将那些数据绑定到相应的 UI 组件，例如客户端上的菜单、 文本框和文本域。Layout and Animation System Layout 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.lzxWelcometoHelloWorld!保存源文件下载，将该脚本保存为 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.lzxOpenlaszloWorld!可以使用 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.lzxOpenLaszloWorld!可以使用 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.lzxPressOKtocontinue.canvas.warning.open();可以使用 http:/localhost:8080/lps-4.0.x/alert/Alert.lzx 调用上述应用程序。图 10 显示生成的输出。图 10. Alert 对话框清单 8. AlertWithButtons.lzxClickOKtoProcess.if(this.result)parent.message.setText(ProcessingStarted);elseparent.message.setText(ProcessingStopped);canvas.warning.open();Doyouwanttostartprocessing?AlertWithButtons 以包含 Yes/No 按钮的 Alert 框的形式请求用户确认，并采取适当的行动。按钮Button 对象表示一个可点击按钮，它会引发一个事件，所以可以在点击时执行某个动作。该类是 BaseButton 的子类，后者又是 BaseComponent 的子类。清单 9 中的 Button.lzx 文件是一个使用按钮的 LZX 应用程序。按钮的文本是 “Hello World!”。清单 9. Button.lzxHelloWorld!通过浏览 http:/localhost:8080/lps-4.0.x/layout/Button.lzx 运行该例子。图 11 显示生成的输出。图 11. 包含按钮的画布使用布局通过布局管理器可以布置容器中的组件。