openlaslzo开发之进阶篇－理解绑定

RIA除了在界面效果吸引人外，功能是最主要的，让用户在互动操作中体验到简化的操作流程，丰富而强大的应用程序体验，这才是RIA的魅力。

openlazlo的编程语言lzx就可以满足这种要求，而且开发人员无需编写过多的代码，就可以完成许多数据操作，这就是本节所介绍的，lzx中最有用的功能：绑定。

openlaszlo的绑定功能分为：

视图绑定

数据绑定

按绑定方式划分又分为：

一次绑定

始终绑定

运行时绑定

下面就介绍openlaszlo的绑定特性。

1. 视图绑定

视图绑定是界面布局中比较常用的方法，一般情况下，所有的视图元素都可以用绝对位置来指定，但是这样有两个缺点，一个是修改布局中某一个视图的位置，就需要修改和它相邻的或者和它层叠的视图位置；另一个缺点是实现某个视图运动动画时，需要指定其相关视图的运动。

这样的后果就是需要编写额外的代码来实现，增加了劳动量，也没有充分体现lzx语言的力量。我们本可以用更简单的方式做。下面看几个小例子：

1.1 简单绑定实例

<view name="bindtoleft" x="$once{parent.left.x}"

y="$once{parent.left.y+parent.left.height+20}"

width="100" height="100" bgcolor="#0000FF"/>

</canvas>

访问地址：http://www.openria.cn/lps-3.0/my-apps/bindingview_1.lzx?lzt=html

这个例子是lzx的简单布局实例，视图left和right都是绝对布局，而视图bindtoleft将自己的位置绑定到了

left，使用的语法是：

x="$once{parent.left.x}"

y="$once{parent.left.y+parent.left.height+20}"

$表示绑定符，once表示一次绑定，如果始终绑定就不用写once了。大括弧{}加里面内容构成一个表达式用来表示当前视图的属性由表达式决定。

将这两句话翻译过来就是说，bindtoleft的x值即水平位置就是left的水平位置；bindtoleft的y值即垂直位置就是left的垂直位置再加20个象素（往下移动20个象素）。

这样看起来好像挺麻烦，但是如果你修改视图left的位置和大小时，就不用理会bindtoleft的位置和大小，而right看起来写的挺方便，但是缺需要跟着left改。尤其是应用程序中的视图很多时，这种绑定会很方便，尤其是关系紧密的视图。

1.2 始终绑定实例

<view name="bindtoleft" x="$once{parent.left.x}"

y="$once{parent.left.y+parent.left.height+20}"

width="100" height="100" bgcolor="#0000FF"/>

parent.left.animate('x',200,500,false);

</method>

</button>

</canvas>

访问地址：http://www.openria.cn/lps-3.0/my-apps/bindingview_2.lzx?lzt=html

点击一下按钮，会发现left（红色的矩形）移动了，但是如果想让蓝色的矩形（bindtoleft）也跟着动怎么办呢，很简单，把bindtoleft的x="$once{parent.left.x}"属性改为x="${parent.left.x}"就可以了，试试吧，

是不是很爽，都不用再编写额外的代码移动bindtoleft。除了能对x,y进行绑定，视图的其他属性，比如visible属性也可以进行绑定，这种绑定也经常用到。

2. 数据绑定

基于openlaszlo的应用程序和其他RIA技术如flex一样，是数据驱动的应用程序，也就是说界面的框架定下来后，它的具体内容是由数据来决定的，有多少数据就会生成多少视图。这一过程的实现就是依靠“数据绑定”。依靠数据绑定，openlaszlo的应用程序将完全脱离传统web应用基于页面思想的编程方式，用动态语言来输出页面标签，实现动态视图。从而真正的实现MVC模式，让数据和视图彻底分开。

数据绑定和视图绑定一样仍然分为两种情况，一次绑定和运行时绑定，这个“运行时绑定”也可以称为动态绑定。可以看作是多个一次绑定构成运行时绑定。下面看几个例子：

2.1 始终绑定实例

<root>

</root>

</dataset>

</list>

</canvas>

访问地址：http://www.openria.cn/lps-3.0/my-apps/databinding_1.lzx?lzt=html

从这个例子可以看出，列表的内容完全由dataset的数据生成的，而且在编译的时候就已经数据和list组件绑定在一起了，即通过list的datapath="ds1:/*"来绑定到数据集ds1上。这样做比较死板，实际应用中很少这样做。

2.2 运行时绑定（动态绑定）实例

<root>

</root>

</dataset>

<root>

</root>

</dataset>

samplelist.datapath.setPointer(ds1.childNodes[0]);

</method>

</list>

parent.samplelist.datapath.setPointer(ds2.childNodes[0]);

</method>

</button>

parent.samplelist.datapath.setPointer(ds1.childNodes[0]);

</method>

</button>

</canvas>

访问地址：http://www.openria.cn/lps-3.0/my-apps/databinding_2.lzx?lzt=html

对比这个例子和前面那个例子，可以看出，list的datapath开始是为空的，而在程序init的时候，才给它绑定数据，点击按钮又改变的绑定数据源，这样就是运行时的数据绑定。

在实际的应用开发过程中，很多情况需要运行时绑定，这样可以减少服务器的编译时间和减少文件尺寸，充分利用客户端的运算能力，可以在客户端有更直接快捷的数据更新，而无需刷新页面，改善用户体验。

此外，通过对list对应的数据集的操作，如增、删、改，可以直接影响到list的视图表现。

注意：本例使用dataoption="lazy"来实现list的性能优化，从而使视图更新时更快，更适合大数据量的展现。

3. 与数据绑定相关的内容

3.1 数据指针：datapointer

数据指针和数据集几乎是形影不离，每申明一个远程的dataset，就应该申明一个对应的datapointer，让这个datapointer指向dataset。让datapointer来表明dataset的状态并执行对应视图的视图绑定。

比如：

viewname.datapath.setPointer(this.p);

3.2 数据元素：LzDataElement

dataset是继承自LzDataElement，有时需要在运行时用脚本来生成数据来给视图用，这时使用的对象就是LzDataElement，比如：

var sampledata = new LzDataElement('root');

sampledata.appendChild(new LzDataElement('node'));

这就生成了一个类似于dataset的数据集，即：

<root>

<node/>

<root/>

3.3 数据路径查询：datapath.xpathQuery()

很多时候，要从视图中取得某个属性，然后进行判断或者操作，这时候需要用到这个功能，比如：

var someattr = sampleview.datapath.xpathQuery('@value');

这是查询视图sampleview的数据集中属性为value的值。

具体内容见开发文档中xpath中的介绍。

结束语

掌握了openlaszlo的视图和数据绑定，以及数据操作，就基本掌握了openlaslzo开发的精髓，关键的是要改变思想，要thinking in RIA，开发RIA是构建应用，而不是写页面，还是系列文章开篇所讲，openlaszlo的开发思想是：

面向对象

基于组件

数据驱动

有时感觉做openlaszlo开发就像是在做swing或者vb开发，只是没有多线程的烦恼，唯一不足的是没有所见即所得开发工具，要不会很爽，而ide4laszlo插件又不好用。

下一篇将介绍开发自定义组件，openlaszlo开发之高级篇，敬请期待。