使用 OpenLaszlo 创建 Web 富客户端（1）
|
- UID
- 1066743
|
使用 OpenLaszlo 创建 Web 富客户端（1）
近来 Web 开发领域的一个焦点是将富客户机体验引入 Web。Asynchronous JavaScript and XML (Ajax) 使开发人员和用户拓宽了对 Web 的认识，俨然有取代标准桌面富客户机之势。然而，Ajax（以及当前的浏览器技术）却在以下几个方面存在局限性：
- 提供带有大量动画的用户界面。
- 轻松地提供能在多种浏览器，包括旧浏览器上显示的标准表示法。
- 轻松地实现某些类型的应用程序，包括动态建立的应用程序。
但是，这些只是 OpenLaszlo 所擅长的一部分。在深入探讨这种架构之前，首先我们花点时间来讨论一下什么是 OpenLaszlo。
Laszlo 是 OpenLaszlo 所使用的一种语言，这种语言通过说明性方法，用 XML 和 JavaScript 来创建部件或整个应用程序。这种标记语言与脚本语言的合并类似于目前的 HTML/JavaScript 组合。然而，Laszlo 不是通过浏览器在客户端来解释语言，而是在服务器端将语言转换成 Macromedia Flash 格式。这样实际上就自动提供了跨浏览器支持，因为 Flash 提供了一个标准运行时。由于 Flash 格式是基于矢量的，因此允许使用非常灵活多变的用户界面组件，并且这些组件可以大量重用。
然而，OpenLaszlo 还不止这些。OpenLaszlo 还受到一个可选的服务器端容器，即 OpenLaszlo 服务器的支持，后者提供了对远程过程调用、Web 服务和 transcoding 服务（负责将较长的 MP3 文件以流的方式传送给用户之类的事情）的广泛集成和支持。作为一种语言，Laszlo 还采用了一些令人兴奋的概念和设计方法学，以便在数分钟内创建出真正可重用的组件。这种组件拥有令人喜爱的视觉效果，并且为用户所熟悉。 给出了一个例子，这是用 OpenLaszlo 创建的一个股票行情自动收录器应用程序的一个 UI。
图 1. 一个示例 OpenLaszlo UI 阅读本文并不需要以了解 Flash 为先决条件。但是应该对 JavaScript 有个基本的理解，并知道它与传统的面向对象编程语言的不同之处。此外，如果您理解基本的面向对象编程以及传统的用户界面开发 —— Swing、Standard Widget Toolkit (SWT)、Microsoft Foundation Classes (MFC) 等，那么本文将会更加有用。
组件：灵活的和可扩展的 目前，为 Web 构建可扩展的、灵活的用户界面组件的重担仍然落在开发人员身上。很多技术（定制标记库、PHP 抽象等）的存在都是为了解决一个共同的问题：开发人员常常必须组合很多 HTML 标记来为当前的 Web 应用程序创建复杂的组件。诚然，面向对象方法的价值已为众人所知，而 Laszlo 语言就包括很多面向对象的范例在里面。下面来看看一些基本的核心组件。
每个 Laszlo 应用程序都是由 XML 文件 [包含说明性用户界面（UI）信息和 JavaScript] 和资源文件（图像、嵌入式 Flash 内容和音频）组成，OpenLaszlo 将这些文件组合起来创建出最终的内容。根容器是 <canvas> 标记。<canvas> 在某些方面类似于 HTML 文档中的 <body> 标记。它可以包括一些属性，例如宽度、高度和背景颜色。源文件中的 <canvas> 是一个 XML 标记，而每个标记就是一个组件，或者是一个类 这句话的意思是，它具有相关联的方法、动画等。后面我会更详细地讲到这些组件的特性。现在，您可以通过说明性的方式使用这个标记和 <statictext> 创建规范的 "Hello, World!" 例子，如 所示。
清单 1. 用 Laszlo 编写的 "Hello, World!" 例子1
2
3
| <canvas width="300" height="200" bgcolor="white">
<statictext>Hello, World!</statictext>
</canvas>
|
组件利用 Flash 我暂时不介绍关于这样的代码是如何被转换和部署成 Flash 格式的细节，但是可以告诉您，OpenLaszlo 可以完成所有重要的工作。另外还需要知道的重要的一点是，OpenLaszlo 组件通常都是受 Flash 资源支持的。这意味着它们可以是基于矢量的，因此，您可以提供一个公共的组件，在各种不同的地方使用它。很多基本的组件是现成可用的。从事图形用户界面（GUI）方面工作的人对诸如 <button>、<checkbox>、<list>、<menu> 和 <tree> 之类的组件应该比较熟悉。
您也可以为这些基本组件提供自己的可视化资源。例如在使用标准 <basebutton> 组件时，该组件定义了 onmouseover 之类的事件，通过这些事件便可以创建自己的定制按钮。为了创建一个简单的翻滚按钮，可以使用 PNG 或 JPG，虽然这样做并不是很有趣。令人兴奋的是，您可以使用任何 Flash 文件作为资源，如此一来您可以创建可伸缩的、具有动画效果的按钮。因此，虽然在 Flash 资源中没有包含逻辑（例如 ActionScript），但是您可以利用所有 Flash 的动画概念。在此之前，为了用 Flash 创建有丰富界面的应用程序，需要熟悉大量编程方面的东西；而如果用OpenLaszlo 进行开发，就不是这样了。当然，OpenLaszlo 系统会负责将所有的 Flash 资源合并成一个单独的 Flash 文件以供部署。在后面 “” 小节中我将更详细地谈到这一点。
事件和继承 像任何良好的面向对象组件一样，OpenLaszlo 组件会处理可以被声明为 inline（例如 <button>）的事件（例如 onmouseover）；或者，也可以在特定的组件或组件的实例上定义方法事件处理器，如 所示。这样一来，便可以很自然地组织代码，并将匿名内部函数的概念引入到 OpenLaszlo 开发当中。考虑到任何组件都是可扩展并且是可定制的，这种技术因此变得极其强大。
清单 2. 在一个 <view> 实例上定义的事件1
2
3
4
5
6
7
8
9
10
11
12
13
| <canvas>
<view bgcolor="0xcccccc" width="50" height="50">
<method event="onmouseover">
// Keyword this is used in the familiar JavaScript sense.
// Most of JavaScripts scoping
// concepts apply directly to Laszlo
this.setAttribute('bgcolor', 0x000000);
</method>
<method event="onmouseout">
this.setAttribute('bgcolor', 0xcccccc);
</method>
</view>
</canvas>
|
在一些不需要重用的情况下， 中的代码编写起来可能很方便，但是对于其他情况呢？幸运的是，您可以扩展任何其他已有的组件，建立一个新的组件。而您只需使用 <class> 标记定义一个新类，如下所示：
1
| <class name="customView" extends="view">
|
默认情况下，所有定制的类都扩展 <view>，后者主要是作为一个容器，这一点非常类似于一个 HTML <span>。即使是简单的扩展也会有用，因为您可以使用属性来根据特定的需求定制一个组件；一些基本的例子看上去就像 CSS 一样，提供默认大小、背景颜色，等等。当然，有趣的事情不仅仅是这些。您可以在组件中包括方法、动画、构造函数属性，等等。想像一下，将完全面向对象的 UI 方法，例如 Swing，与 HTML 的容易、快速开发特性相结合，可以产生怎样的效果。 |
|
|
|
|
|
