Board logo

标题: 使用 OpenLaszlo 创建 Web 富客户端（1） [打印本页]
作者: look_w    时间: 2018-7-16 12:31     标题: 使用 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 的容易、快速开发特性相结合，可以产生怎样的效果。



欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0