将HTML元素捆绑到XML数据岛的功能展现了为最终用户提供信息的可能性。其中最好的一点就是元素<TABLE>可以作为一个模板在基于一行的基础上得到多行。同样的,嵌套的<TABLE>能够与XML层中的嵌套节点捆绑在一起。这样与其他边界元素联合就为通过快速编码解决方案打开了大门。
通过以下的XML代码,就可以建立一个ListView控件来为用户提供一个有伴随图片的选择列表:
<root>
<product>
<product_id>001</product_id>
<product_name>Widget1</product_name>
<price>.99</price>
<product_img>images/widget1.gif</product_img>
</product>
<product>
<product_id>002</product_id>
<product_name>Widget2</product_name>
<price>.99</price>
<product_img>images/widget2.gif</product_img>
</product>
<product>
<product_id>003</product_id>
<product_name>Widget3</product_name>
<price>.99</price>
<product_img>images/widget3.gif</product_img>
</product>
</root>
首先,通过以上代码段,我们在HTML页上设置一个XML数据岛。这是通过用XML元素标识填充XML来完成的。然后我们在开放的<XML>标识中加入ID和NAME属性以便引用。例如下面例子:
<XML ID="xmlProducts" NAME="xmlProducts">
. . .
</XML>
然后为TABLE建立HTML部分代码:
<DIV style="width:250px;height:300px;overflow:auto;border:2px
menu solid;">
<TABLE
CELLPADDING="0"
CELLSPACING="0"
BORDER="0"
DATASRC="#xmlProducts"
ID="tblProducts"
NAME="tblProducts">
<TR>
<TD><IMG
DATAFLD="product_img"
BORDER="0"></TD>
<TD><SPAN
DATAFLD="product_name"></TD>
<TD><SPAN
DATAFLD="price"></TD>
</TR>
</TABLE>
</DIV>
在<TABLE>元素中的DATASRC属性将XML 数据岛中的行约定为<TABLE>元素内容。包含有DATAFLD属性的单独元素是与当前行中的相应的字段捆绑在一起。请注意在DATASRC的名字前要有一个“#”号。
“product_img”字段被定为<IMG>标识中的SRC属性。这就为每行的单个产品提供了对应的图像。“product_name”字段被定为<SPAN>标识中innerText的内容。在<TABLE>周围的<DIV>元素仅仅意味着包含<TABLE>元素。