内容


使用 OpenLaszlo 创建 Web 富客户端

用 XML 和 JavaScript 构建 Flash 组件

Comments

近来 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 还采用了一些令人兴奋的概念和设计方法学,以便在数分钟内创建出真正可重用的组件。这种组件拥有令人喜爱的视觉效果,并且为用户所熟悉。图 1 给出了一个例子,这是用 OpenLaszlo 创建的一个股票行情自动收录器应用程序的一个 UI。

图 1. 一个示例 OpenLaszlo UI
一个示例 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 所示。

清单 1. 用 Laszlo 编写的 "Hello, World!" 例子
<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 文件以供部署。在后面 “部署:proxied 与 SOLO 应用程序” 小节中我将更详细地谈到这一点。

事件和继承

像任何良好的面向对象组件一样,OpenLaszlo 组件会处理可以被声明为 inline(例如 <button onclick="buttonClicked()">)的事件(例如 onmouseover);或者,也可以在特定的组件或组件的实例上定义方法事件处理器,如 清单 2 所示。这样一来,便可以很自然地组织代码,并将匿名内部函数的概念引入到 OpenLaszlo 开发当中。考虑到任何组件都是可扩展并且是可定制的,这种技术因此变得极其强大。

清单 2. 在一个 <view> 实例上定义的事件
<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>

在一些不需要重用的情况下,清单 2 中的代码编写起来可能很方便,但是对于其他情况呢?幸运的是,您可以扩展任何其他已有的组件,建立一个新的组件。而您只需使用 <class> 标记定义一个新类,如下所示:

<class name="customView" extends="view">

默认情况下,所有定制的类都扩展 <view>,后者主要是作为一个容器,这一点非常类似于一个 HTML <span>。即使是简单的扩展也会有用,因为您可以使用属性来根据特定的需求定制一个组件;一些基本的例子看上去就像 CSS 一样,提供默认大小、背景颜色,等等。当然,有趣的事情不仅仅是这些。您可以在组件中包括方法、动画、构造函数属性,等等。想像一下,将完全面向对象的 UI 方法,例如 Swing,与 HTML 的容易、快速开发特性相结合,可以产生怎样的效果。

约束:强大的交互

对于富用户界面,一个重要的方面就是布局管理。Laszlo 支持(通过布局组件)很多标准的方法。例如,可以使用 <simplelayout> 元素,该元素有两个主要属性。axis 属性可用于指定布局方向,它的值可以是 x-axis 或 y-axis,而 spacing 属性可用于控制组件之间的间距。对于一个容器,可以声明多个布局,以便组合水平和垂直方向的间距。同样,这也是 Laszlo 中的一个简单而有效的概念。Laszlo 还包含网格布局和那些用于一个区域的布局,但这并不是使我对 Laszlo 刮目相看的原因。真正令人兴奋的特性是 Laszlo 约束模型(constraint model),通过它可以非常优雅地获得 UI 控件和动画效果。

大多数事件的替代物

每当 Laszlo 组件中的属性发生改变时,就触发了一个事件。正如 “事件和继承” 小节中所述,这些事件可以被侦听到。这是一个很好的特性 —— 不必为每个属性添加侦听器之类的东西 —— 但是这仍然会导致大量冗余代码。如果元素可以通过一种更方便的方式,就像电子表格中应用的依赖关系一样来使用这些属性,岂不是更好?通过约束,您就可以做到这一点。对于 Laszlo 中的任何属性,都可以为之赋予一个约束表达式(constraint expression),而不是赋予一个标准的值。约束表达式以一个美元符号开头,格式如下:

$when{ConstrainedExpression}

其中,when 的值是 alwaysonceimmediately 中的一个。如果忽略了 when,那么这个值就默认为 always,也就是说,每当 ContrainedExpression 的一个依赖关系发生改变,该约束都将重新计算。如果一个约束在初始化之后一直是静态的,那么可以将这个值设为 once,这样可以使约束只计算一次,可以提高效率。另一个值是 immediately,如果定义了结束元素,并且约束不依赖于其他对象,那么可以使用这个值来计算约束。

我们首先来看一个简单的例子。如果您想要一个大小可变的项,并且还有一个位于它中间的项,应该怎么办呢?清单 3 展示了如何实现这一点。它使用标准的 Laszlo 组件 slider 来控制矩形的大小。

清单 3. 用于控制一个矩形大小,同时影响矩形内部的另一个矩形的大小的 slider 组件
<canvas>
   <slider id="sliderItem" y="20" x="10" minvalue="50" maxvalue="300" 
           value="50"/>
   <view y="$once{sliderItem.y + sliderItem.height + 5}" 
       x="$once{sliderItem.x}" bgcolor="0xff0000" 
       width="${sliderItem.value}" height="${width}">
		
      <view bgcolor="0x0000ff" 
         width="${parent.width / 5}" height="${width}"
         x="${(parent.width / 2) - (width / 2)}"
         y="${(parent.height / 2) - (height / 2)}"/>
   </view>
</canvas>

您可以看到,由于 x<view> 的一个属性,您可以使用一个约束来设置这个值。Laszlo 使用分层的方法来标识项,parent 对象是指包含控件。通过这种语法,可以访问该结构中的所有地方,但是也可以指定 nameid 属性。两者之间的不同之处是,id 标识的是一个特定的项(因此在文档中只能使用一次),所以它可以全局使用(例如在 清单 3 中,我为 slider 控件使用一个 id 属性,然后在约束中使用那个 id${sliderItem.value})。

在这个例子中,注意用于指定有色矩形的 x 和 y 位置的约束的 once 选项的使用。图 2 给出了 清单 3 中代码的输出。

图 2. 清单 3 的输出
 清单 3 的输出

高级约束

约束对于替代简单事件和建立布局约束来说很棒,但是它们所提供的特性远远不止这些。由于可以为约束表达式设置任何 任意的属性值(包括您自己定义的值),或者在约束中使用它,因此存在很多可能。在下一节中,您将结合使用约束和 Laszlo 的动画制作系统来产生强大的结果。

动画和绘画

在现代界面设计中更关键的表示细节是动画。动画可以为界面的用户提供灵感和视觉感受。动画是 Macromedia Flash 的长项,也是 OpenLaszlo 的长项。动画也是目前不使用特殊的扩展就不能实现跨浏览器的少数几种技术之一。

动画标记

Laszlo 附带了两个元素用于帮助加快动画的开发:<animator> 元素是所有动画的基本构件,而 <animatorgroup> 则是 <animator> 项的容器。在 Laszlo 中,动画意味着在指定的一段时间内以复杂的组合改变不同属性的值。通过使用这些简单的概念和构件,几乎任何事情都有可能实现。

<animator> 元素有一个必需的名为 attribute 的属性。该属性指定动画将在哪个属性上进行操作。它还有一个必需的名为 to 的属性,该属性的值为一个数值,表示被操作的属性的终值。最后一个必需的属性是 duration,该属性指定动画所经历的时间,以毫秒计。为了方便,<animator> 元素还有一个可选的 from 属性,该属性为属性值设置起始点。通过使用这些属性,可以构造一个简单的程序,该程序以动画效果改变一个视图的宽度,如 清单 4 所示。

清单 4. 一个简单的动画例子:改变视图的宽度
<canvas>
   <view bgcolor="#ff0000" width="50" height="${width}">
      <animator attribute="width" to="200" duration="1000"/>
   </view>
</canvas>

在这个例子中将出现一个红色的正方形,并且该正方形在一秒内扩展到 200 乘 200 像素的宽度。如果试着运行这个例子,您会注意到这种运动并不是线性的。这是因为属性 motion 的默认值是 easeboth。通过使用 easeineaseouteaseboth,可以分别产生在动画开始或结束较慢或者在动画的开始和结束都较慢的效果。最后,motion 属性还可以带的一个值是 linear,该属性让动画以恒速变化。还要注意,动画是立即开始的,可以通过 start 属性来修改这一点,该属性的默认值是 true。最后,还有其他一些属性,包括用于控制步骤重复次数的属性(repeat)以及各种事件,例如 onstartonfinish 等 —— 以支持在动画完成之后添加定制逻辑。

使用 <animatorgroup> 获得复杂动画

如前所述,<animatorgroup> 就是 <animator> 元素和其他 <animatorgroup> 元素的容器。然而,增加这种容器类型肯定可以增加很多可能性。<animatorgroup> 可以和 <animator> 一样定义所有相同的属性,还可以定义一个新属性:process。如果应用到 <animatorgroup>,则之前提到的所有属性将串连起来。新的属性 process 用于控制组中各个项的执行顺序。如果它的值是 sequential,则这些项将一个接一个地执行,直到整个组执行完毕。另一个选项是 simultaneous

通过这两个选项,可以产生非常有趣的效果。例如可以有一个在屏幕上移动同时改变大小的项。由于组还可以包含其他的组,因此可以为动画定义一个好的结构和顺序。

能产生令人印象深刻的效果的约束和定制属性

看了前面的内容,您似乎会觉得动画过程看上去非常简单,作用有限。于是您可能想知道如何执行要求更复杂的计算的动画。通常,答案是利用定制属性和约束。例如,假设想要有一个在屏幕中沿着圆形轨迹运动的项。显然,您不能直接通过控制 xy 属性来产生动画效果。但是可以约束xy 的位置,使之成为某个定制属性的一个函数,这个定制属性沿着一个矩形来变化。如 清单 5 所示,如果使用约束的话,产生一个沿着圆形轨迹移动的视图非常容易。

清单 5. 结合使用约束和动画
<canvas>
   <view bgcolor="#ff0000" width="20" height="$once{width}"
      x="${radius + (radius * Math.cos(animCnt))}"
      y="${radius + (radius * Math.sin(animCnt))}">
      <attribute name="animCnt"/>
      <attribute name="radius" value="30"/>
      <animator attribute="animCnt" from="0" to="$once{Math.PI * -2}" 
            duration="1000" motion="linear" repeat="Infinity"/>
   </view>
</canvas>

通过使用这些技术,可以创建令人印象深刻的动画。您永远不必担心帧速率和其他计算,因为所有这些细节都已经为您抽象好了。此外,由于约束可能涉及多个组件,一个组件的动画可能改变其他组件的状态。

定制绘画

OpenLaszlo 的一个巨大的优势就是可以很容易地绘制定制的图形。这些图形可以是静态的,也可以是动态的,这样您便可以对用户交互作出响应,甚至可以创建图形应用程序。您可以在 <drawview> 组件上执行定制绘画,用该组件充当画布。即使绘画是说明性 的,但是它仍然具有过程的性质。一旦掌握了绘画,很容易知道如何将它应用到动态或静态场景中。

<drawview> 元素实际上只有 4 个定制属性。这些属性是全局的,可以控制被画到画布上的片段的默认属性,包括:fillStyle globalAlphalineWidthstrokeStyle。您可以通过 10 个专用于 <drawview> 的定制过程来修改所有这些属性。

绘画过程

绘画接口定义了 10 个过程。这些过程可以移动画笔(pen),最终创建路径(path),而路径可以被描边,可以用渐变方式和颜色进行填充(如果是封闭的)。

画笔的初始位置为点 0,0。通过使用 moveTo(x, y) 方法,可以将画笔移动到一个新的位置。一条路径实际上就是一系列的点,路径可以被描边,也可以被填充。还可以使用 lineTo(x, y) 方法添加一个子路径到当前路径,并将画笔定位在一个指定的位置。还有一个类似的 quadraticCurveTo(cpx, cpy, x, y) 方法,该方法以一个坐标和一个曲线控制点坐标为参数,但是其行为类似于 lineTo()

建立好一条路径后,为了使之可见,必须对它进行描边或填充。通过调用 stroke() 方法,可以使用 strokeStyle (十六进制格式的颜色,例如 0x000000)和 lineWidth 的当前属性值来决定如何对该路径描边。fill() 方法使所有子路径封闭起来,然后逐个填充每个子路径,期间使用 fillStyle (一种颜色,或一个渐变对象)来决定如何绘制填充。清单 6 演示了一个简单的例子,这个例子用各种方式描边和填充一些正方形。

清单 6. 简单的绘画例子
<canvas width="115" height="95">
   <drawview width="200" height="200" x="5" y="5">
      <method event="oninit">
         // Draw a black square
         this.strokeStyle = 0x000000;
         this.moveTo(0, 0);
         this.lineTo(25, 0);
         this.lineTo(25, 25);
         this.lineTo(0, 25);
         this.closePath();
         this.stroke();
         // Reset the path and draw a square with red fill 
         // and a black outline
         this.beginPath();
         this.fillStyle = 0xff0000;
         this.moveTo(40, 0);
         this.lineTo(65, 0);
         this.lineTo(65, 25);
         this.lineTo(40, 25);
         this.closePath();
         this.fill();
         // Draw a square with a square filled with a gradient 
         // from white to gray
         this.beginPath();
         // Create the gradient, adding color 'stops' (where 
         // the color shifts)
         var gradient = this.createLinearGradient(80, 0, 105, 25);
         gradient.addColorStop(0, 0xffffff);
         gradient.addColorStop(1, 0x000000);
         this.fillStyle = gradient;
         this.moveTo(80, 0);
         this.lineTo(105, 0);
         this.lineTo(105, 25);
         this.lineTo(80, 25);
         this.closePath();
         this.fill();
         this.stroke();
   </method>
   </drawview>
</canvas>

图 3 给出了 清单 6 在浏览器窗口中的输出:

图 3. 清单 6 的输出
清单 6 的输出

这个示例使用了 oninit() 方法,对于所有对象都可以使用该方法。它引入了用于路径管理的 beginPath()closePath() 这两个方法。它还引入了渐变,渐变在 Laszlo 中有两种形式: linearradial。每个渐变都被映射到一个矩形或圆形的坐标空间。为了设置颜色,可以使用 addColorStop() 方法,使颜色范围定在 0 到 1 之间。颜色 0 将成为渐变的起始颜色,而颜色 1 将成为渐变中最大的颜色值。在设置起止颜色之前,还可以通过修改 globalAlpha 属性来产生部分不透明的渐变颜色。

组合绘画和动画

前面介绍了 OpenLaszlo 提供的所有基本的绘画功能。您可能想知道如何使用 “动画和绘画” 小节中提到的动画功能和过程式的绘画 API。一种方法是添加定制属性到一个 <drawview>。例如,如果您想有一个动态绘制的圆形,并且半径的大小是以动画效果变化的,那么可以创建一个属性 radius,然后为这个属性产生动画效果(按照常用的方法),接着为半径的变化事件定义一个事件处理器(<method event="onradius">),在这个事件处理器中重画该元素。通过这种策略,几乎所有事情都可以实现。

部署:proxied 与 SOLO 应用程序

有些读者可能已经迫不及待地跳到了 参考资料 小节去看有哪些类型的 OpenLaszlo 应用程序。如果您没有这么做,而是坚持读到这里的话,我想您也很想知道如何将 Laszlo 文件转换成可以部署到 Web 上的格式。本节将谈到这个话题,并且还会点明哪种部署模型最适合您,是 proxied 还是 SOLO。

SOLO 部署

SOLO(standalone OpenLaszlo output 的简称)部署方式只受那些可以为 Flash 文件服务的 Web 服务器的支持。为了将 Laszlo 应用程序转换成一个 Flash 文件,可以调用编译器(例如 lzc file.lzx —— .lzx 是 Laszlo 文件的扩展名)来产生一个输出文件,只要带有必需的最小版本以上的 Flash,就可以播放该文件。这样就非常简单了:将生成的文件放在 Web 服务器上,然后将它包括在一个 HTML 文档的主体中就可以了。OpenLaszlo 编译器会负责所有底层的工作(资源组合,代码生成,等等)。但是,SOLO 部署方式有一个限制,有些非常强大的特性(例如 Web 服务调用、RPC 和某些类型的媒体流)SOLO 部署方式不能提供。

proxied 部署:所有特性

使用 proxied 部署方式,可以得到 OpenLaszlo 系统所能提供的所有特性。这是这种部署方式的一个优点,但是:为了使用这种部署模型,必须在服务器上安装一个 OpenLaszlo Server 环境。这种服务器环境是位于 J2EE 应用程序或 servlet 容器之上的一个 Web 应用程序,负责为 .lzx 文件处理所有请求。OpenLaszlo Server 的一个很棒的特性是,您只需将 Laszlo 文件和 OpenLaszlo Server 组件放在一个服务器上,便可以浏览页面并看到结果,因为它是由服务器动态编译和缓存的。OpenLaszlo Server 另外一个主要的优点是它位于所部署的应用程序与应用程序需要访问的其他资源之间,执行各种所需的转换。因此 Laszlo 支持(在被代理的情况下) XML-RPC 之类的特性。

对于很多用户来说,安装 OpenLaszlo Server 是很快的,并且它还捆绑了 Tomcat,安装起来很方便。对于那些使用 IBM WebSphere® 或其他 J2EE 应用服务器的用户来说,可以使用 参考资料 中提供的一个 Web 应用程序档案文件和关于如何设置环境的说明。系统管理方面超出了本文的范围,不过可以在 参考资料 小节中找到很多相关的参考资料。

何时使用 proxied 部署

由于在 SOLO 部署方式下媒体请求不是代理的,因此 SOLO 应用程序只支持 Flash、JPG 和 MP3 媒体类型。而且,由于不存在数据的代理,SOLO 部署中也不支持 RPC、SOAP 和持久连接之类的项。

虽然本文只对 proxied 和 SOLO 部署方式作了简要的概述,但是足以令您见识到 OpenLaszlo Server 的威力。在最后一节中,我将展示 Laszlo 支持的数据绑定和 RPC 特性,有些特性在 proxied 模式下具有不同的行为,或者依赖于 proxied 模式。

数据绑定特性和 RPC

谈到在 Laszlo 中显示大量数据的时候,这种语言的数据绑定特性可以说是非常方便的。通过数据绑定可以将特定的组件值映射为一个已有的数据结构,而不必进行额外的编程。数据绑定主要用于创建基于表单的布局,在这种情况下您需要将大量项插入到一个可视化的模板中。您可以将 UI 的文本域和其他内容绑定到外部数据存储,并且可以使用那些数据来填充像下拉框和复选框之类的控件。

数据源通常是一个 XML 文档,该文档或者被静态地编译成 OpenLaszlo 应用程序,或者被动态地获取。您也可以使用 XMLHttpRequest 之类的 API 开发更具手动特点的解决方案,但是使用数据绑定将减少开发时间。在 OpenLaszlo 中,可以在 XML 文档中指定元素,通过在 datapath 属性中添加 XPath 来绑定这些元素。清单 7 展示了一个简单的例子,这个例子将一些联系信息绑定到某些文本区域。

清单 7. 简单的联系信息的数据绑定
<canvas>
   <dataset name="contactInfo">
      <contacts>
         <contact>
            <name>John Doe</name>
            <phone>555-2000</phone>
            <DOB>16-01-1973</DOB>
            <role>Developer</role>
         </contact>
         <contact>
            <name>Jane Doe</name>
            <phone>555-3000</phone>
            <DOB>27-02-1974</DOB>
            <role>Manager</role>
         </contact>
      </contacts>
   </dataset>
   <view datapath="contactInfo:/contacts/">
      <simplelayout axis="y" />
      <view datapath="contact/">
         <simplelayout axis="x" />
         <text datapath="name/text()" />
         <text datapath="phone/text()" />
         <text datapath="DOB/text()" />
         <text datapath="role/text()" />
      </view>
   </view>
</canvas>

上面的例子引入了数据绑定中的另一个重要概念:XPath 继承。您可以看到,外部的视图与 XML 文档的根节点(<contacts>)是绑定的,而嵌套在里面的视图则绑定到一个 <contact> 节点。另一个值得注意的地方是两个 实体都显示出来了,如图 4 所示。

图 4. 清单 7 的输出
清单 7 的输出
清单 7 的输出

这是默认的行为,不过您可以指定一个特定的 contact 节点(例如 datapath="contact[1]")。如果使用这种默认行为,LzReplicationManager 将复制相应的 <view> 项。

数据绑定还可以做更多的事情,因为 <dataset> 对象可以定义成远程对象。此外,它们可以动态更新,利用数据绑定层处理所有底层的事情。当然,和 Laszlo 中的大多数特性一样,您可以以多种方式使用数据绑定。例如可以覆盖声明了 datapath 属性的项上的 applyData() 方法,以定制数据的格式化。类似地,<dataset>ondata 事件可用于处理其他定制的更新。除了这些简单的覆盖外,Laszlo 还包括很多更复杂的接口和对象(包括 <datapointer> 元素),更高级的 Laszlo 开发人员可能会感兴趣。

RPC 选项

虽然完整地描述 RPC 的工作原理超出了本文的范围,不过我还是觉得有必要提到 OpenLaszlo 对 RPC 提供支持的方式。在 proxied 部署方式中,OpenLaszlo 支持三种类型的 RPC:JavaRPC、SOAP 和 XML-RPC。所有这些方法都有相关的特定组件,但是它们都继承 OpenLaszlo RPC 组件 <rpc>。同样,RPC 也需要 OpenLaszlo Server。后者负责处理数据的编排和将请求代理给远程服务器。

通过使用 JavaRPC (或其他 RPC 方法),不必修改服务器端已有的逻辑便可以与 OpenLaszlo 兼容。这相对于基于 Ajax 的解决方案来说是一个优点,它提供了定制的或第三方的软件来将 Ajax 型请求映射到 JavaRPC 模型中。此外,由于 OpenLaszlo 会创建代理存根(使用 Laszlo Delegates),大大减轻了开发人员的负担。由于 OpenLaszlo 中提供的 RPC 方法非常类似于更传统的相应的 RPC 方法,因此那些熟悉 RPC 的用户可以直接上手。那些不熟悉 RPC 的用户也可以放心,OpenLaszlo 中的 RPC 支持允许以一种直观的方式与服务器端逻辑紧密耦合。

结束语

正如您看到的那样,OpenLaszlo 有很多好的特性。它为将来的很多问题提供了优雅的、完整的解决方案。希望本文对其中一些独特的特性作了简要的概述,并为提供了足够的基础信息,以帮助您将 OpenLaszlo 用于开发项目。我鼓励您深入研究本文 参考资料 小节中列出的文档和示例。一旦找到窍门,相信您会发现 OpenLaszlo 开发是非常快捷的,同时也会获得丰厚的回报。


下载资源


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, XML
ArticleID=111855
ArticleTitle=使用 OpenLaszlo 创建 Web 富客户端
publish-date=05112006