Building Data-Driven Applications
出自OpenFace
第二十七章 构建数据驱动应用程序
第五部分 数据绑定
目录 |
简介
在本章中，教您创建一个全功能的电话簿应用。该应用显示一列联系人名单并允许对存在的联系人进行添加和删除操作。
在这章在第一部分，您可以使用一个静态的XML文件作为数据源。
在第二部分，你用的关系型数据库作为数据源。
得到数据
在一个openlaszlo应用中显示涉及到两个主要步骤：
定义一个dataset
数据绑定到用户界面组件
Example 27.1. 定义一个dataset: phonebook.lzx
<canvas bgcolor="#D4D0C8">
<dataset name="dset">
<phonebook>
<contact category="friends">
<firstName>John</firstName>
<lastName>Smith</lastName>
<phone>617-536-7855</phone>
<email>jsmith@mail.com</email>
</contact>
</phonebook>
</dataset>
<view name="list" datapath="dset:/phonebook/contact" y="20" fontsize="16">
<simplelayout/>
<text datapath="firstName/text()"/>
<text datapath="lastName/text()"/>
<text datapath="phone/text()"/>
<text datapath="email/text()"/>
<text datapath="@category"/>
</view>
</canvas>
数据集创建
在应用中，数据集(dataset)表示XML数据文件结构，数据集(dataset)标签中可以嵌入数据（比如在这个例子中），或者连接到外部数据源，稍后会进行讨论。你可以在一个应用中定义多个数据集(dataset)。数据集(dataset)也是OpenLaszlo数据绑定的API接口。
XPath和数据绑定的API接口
数据绑定的API接口允许用户接口组件自动绑定到数据。对于每个用户组件，使用datapath属性来绑定到某一个组件数据来进行显示。datapath属性的值是一个XPath表达式。XPath表达式使用URL方式来表示一个xml文档的层次结构。表达式是由数据集的名称加上冒号(:)和想得到某一个标签内容的路径组成。使用/text()可以显示标签里的内容，或者使用@属性的名称可以显示标签相应的属性。
相对寻址
便于你的代码易于阅读和维护，你可以把某一个特定的结点绑定到view上，在view里的拥护接口组件可以以相对地址来读取数据。
<view name="list" datapath="dset:/phonebook/contact"> <simplelayout axis="x"/> <text datapath="firstName/text()"/> <text datapath="lastName/text()"/> <text datapath="phone/text()"/> <text datapath="email/text()"/> <text datapath="@category"/> </view>
多行数据操作
Laszlo中可以非常容易的显示和操作多行数据。如果XPath表达式指到不止一个结点的XML文档,用户接口组件可以重复读取每一个结点里的值。
Example 27.2. 数据绑定到views
<canvas height="50" width="700" bgcolor="#D4D0C8">
<dataset name="dset">
<phonebook>
<contact category="friends">
<firstName>John</firstName>
<lastName>Smith</lastName>
<phone>617-536-7855</phone>
<email>jsmith@mail.com</email>
</contact>
<contact category="business">
<firstName>Mary</firstName>
<lastName>Jones</lastName>
<phone>415-534-1186</phone>
<email>mjones@mail.com</email>
</contact>
<contact category="friends">
<firstName>Lisa</firstName>
<lastName>Brown</lastName>
<phone>212-423-1132</phone>
<email>lbrown@mail.com</email>
</contact>
</phonebook>
</dataset>
<simplelayout />
<view name="list" datapath="dset:/phonebook/contact" fontsize="16">
<simplelayout axis="x"/>
<text datapath="firstName/text()"/>
<text datapath="lastName/text()"/>
<text datapath="phone/text()"/>
<text datapath="email/text()"/>
<text datapath="@category"/>
</view>
</canvas>
XPath支持以索引序列的方式查找结点.你可以在view的datapath属性上测试以下XPath表达式列表：
XPath表达式结果
dset:/phonebook/contact All the contact nodes(dset:/phonebook/contact 所有联系人结点信息)
dset:/phonebook/contact[1] First contact node only(dset:/phonebook/contact[1] 第一个联系人结点信息)
dset:/phonebook/contact[2-3] Contact nodes 2 to 3(dset:/phonebook/contact[2-3] 第二和第三个联系人结点信息)
dset:/phonebook/contact[2-] Contact nodes 2 and onwards(dset:/phonebook/contact[2-]第二个及后面所有的联系人结点信息)
dset:/phonebook/contact[-2] Contact nodes up to and including 2(dset:/phonebook/contact[2-]第二个及前面所有的联系人结点信息)
外部XML文档操作
在这一点上，电话簿应用的数据是直接嵌入在应用源码中，这适合于静态信息既数据不需要变化。然而，大多数情况下，在源文件中包含外部数据则是一个更好的办法。
首先,我们创建一个包含电话簿应用数据的xml文档phonebook.xml。
phonebook.xml:
<phonebook> <contact firstName="John" lastName="Smith" phone="617-536-7855" email="jsmith@mail.com"/> <contact firstName="Lisa" lastName="Jones" phone="415-225-8743" email="ljones@mail.com"/> <contact firstName="Mary" lastName="Brown" phone="212-665-5211" email="mbrown@mail.com"/> </phonebook>
现在我们可以把数据从源码中去掉，通过dataset指针指向phonebook.xml文件:
Example 27.3. 使用外部数据集(dataset)
<canvas bgcolor="#D4D0C8"> <dataset name="dset" src="phonebook.xml"/> <simplelayout axis="y"/> <view name="list" datapath="dset:/phonebook/contact" fontsize="16"> <simplelayout axis="x"/> <text datapath="@firstName"/> <text datapath="@lastName"/> <text datapath="@phone"/> <text datapath="@email"/> </view> </canvas>
注意:由于OpenLaszlo文件系统的局限性，相对路径在例子中是存在问题的(如,.../phonebook.xml)。当你运行该例子时，并不能正确运行。这是因为，当你编辑该例子时，它并不能找到相应的源文件。所以你可以在你编辑的环境中，创建该xml文件。
删除数据集(dataset)中的一个结点
删除数据集(dataset)中的一个结点，你需要调用datapath对象中的deleteNode()函数
在类里面进行操作
可能你已经注意到了，newContact视图和updateContact视图中的大部分代码都是一样的。我们可以把共同的代码抽象成一个基类。这中方法可以促进重用并保持一致性。在这种情况下，我门可以创建一个通用的conactiview类。
<class name="contactview" extends="view" visible="true" x="20" height="120">
<text y="10">First Name:</text>
<text name="firstName" datapath="firstName/text()" x="80" y="10"/>
<text y="35">Last Name:</text>
<text name="lastname" datapath="lastName/text()" x="80" y="35"/>
<text y="60">Phone:</text>
<text name="phone" datapath="phone/text()" x="80" y="60"/>
<text y="85">Email:</text>
<text name="email" datapath="email/text()" x="80" y="85"/>
</class>
现在，我们可以使用contactview类来修改电话簿应用：
Example 27.4.使用contactview 类
<canvas height="200" width="700" bgcolor="#D4D0C8" >
<dataset name="dset" src="../phonebook.xml"/>
<class name="contactview" extends="view" visible="true" x="20" height="120">
<text y="10">First Name:</text>
<text name="firstName" datapath="firstName/text()" x="80" y="10"/>
<text y="35">Last Name:</text>
<text name="lastname" datapath="lastName/text()" x="80" y="35"/>
<text y="60">Phone:</text>
<text name="phone" datapath="phone/text()" x="80" y="60"/>
<text y="85">Email:</text>
<text name="email" datapath="email/text()" x="80" y="85"/>
</class>
<simplelayout axis="y"/>
<view>
<simplelayout axis="y"/>
<contactview name="updateContact" datapath="dset:/phonebook/contact"/>
</view>
</canvas>
