使用 XForms 创建动态 Web 搜索（2）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-7-20 10:24 | 只看该作者

使用 XForms 创建动态 Web 搜索（2）

XForms 表示XForms 表示包括两个基本的部分：输入部分和输出部分。这两个分开的部分相互之间进行交互，为完全不同的底层数据结构提供了一个无缝的接口。这些底层数据结构由各自的搜索引擎定义，并不受 XForms 创建者控制。显示输入部分中的第一部分。
XForms 输入表示在 XForms 表示的输入部分中,需要注意用于把搜索文本和 box 实例中的 q 节点链接起来的方法和 submit 定义中 toggle 元素。这些 toggle 代码行用于控制输出部分中两种情况之间的转换。前面我们提到过应注意定义的名称，这里显得格外重要。本例中，Teoma 搜索的情形被命名为 teo 而不是 teoma，这样便不会与实例名相冲突。Yahoo 提交也使用了类似的命名方法。
清单 5. XForms 表示代码，第 1 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<body>

 <xforms:select1 ref="instance('box')/engine">
 <xforms:label>Choose a search engine: </xforms:label>
 <xforms:item>

<xforms:label>Yahoo</xforms:label><xforms:value>Yahoo</xforms:value>
 </xforms:item>
 <xforms:item>

<xforms:label>Teoma</xforms:label><xforms:value>Teoma</xforms:value>
 </xforms:item>
 </xforms:select1>



 <xforms:input ref="instance('box')//q" >
 <xforms:label>Search Text: </xforms:label>
 </xforms:input>

 <xforms:input ref="instance('box')/site" >
 <xforms:label>Site: </xforms:label>
 </xforms:input>

 <xforms:select1 ref="instance('box')/results" >
 <xforms:label>Results displayed: </xforms:label>
 <xforms:item>
 <xforms:label>Ten</xforms:label>
 <xforms:value>10</xforms:value>
 </xforms:item>
 <xforms:item>
 <xforms:label>Twenty</xforms:label>
 <xforms:value>20</xforms:value>
 </xforms:item>
 <xforms:item>
 <xforms:label>Thirty</xforms:label>
 <xforms:value>30</xforms:value>
 </xforms:item>
 </xforms:select1>



 <xforms:submit submission="submit_teoma" ref="instance('box')/submitTeoma">
 <xforms:label>Search using Teoma</xforms:label>
 <xforms:toggle ev:event="DOMActivate" case="teo"/>
 </xforms:submit>

 <xforms:submit submission="submit_yahoo" ref="instance('box')/submitYahoo">
 <xforms:label>Search using Yahoo!</xforms:label>
 <xforms:toggle ev:event="DOMActivate" case="yah"/>
 </xforms:submit>

请注意，表单列出了所有的信息，包括站点特定的字段。还要注意页面同时列出了两个按钮。然而，数据的真实外观是由顶部的选择列表控制的 engine 字段值决定的。当值为 Yahoo 时，显示的是所有的 Yahoo 信息，如所示。当值为 Teoma 时，显示的是所有的 Teoma 信息，如图 2 所示。
图 2. 使用 Teoma 搜索

XForms 输出表示XForms 的几个很有用的特性，例如“repeat”和“switch/case”特性，使两种格式不同的搜索结果无缝统一地表示了出来。清单 6 显示了 XForms 表示的输出部分。
清单 6. XForms 表示代码，第 2 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<xforms:label><h3>Search Results:</h3></xforms:label>
<xforms:switch>
 <xforms:case id="teo" selected="true">
 <xforms:repeat nodeset="instance('teoma')//RESULT">
 
 <xforms:label>Title: <xforms

utput
ref="TITLE"/></xforms:label> 
<xforms:label>URL: <xforms

utput
ref="URL"/></xforms:label> 
<xforms:label>Description: <xforms

utput
ref="ABSTRACT"/></xforms:label>
 
 </xforms:repeat>
 </xforms:case>

 <xforms:case id="yah">
 <xforms:repeat nodeset="instance('yahoo')//y:Result">
 
 <xforms:label>Title: <xforms

utput
ref="y:Title"/></xforms:label> 
<xforms:label>URL: <xforms

utput
ref="y:Url"/></xforms:label> 
<xforms:label>Description: <xforms

utput
ref="y:Summary"/></xforms:label>
 
 </xforms:repeat>
 </xforms:case>
</xforms:switch>

 </body>
</html

首先应注意 switch 语句，它与附带的 case 语句结合使用。前面的部分讨论了两个 submission 元素并重点研究了每个 submit 定义中的两条语句，该语句引用了与 case 语句引用的相同的标志，即 teo 和 yah。toggle 动作使在任意给定时间都有其中的一个 case 有效。作用是只显示附带的 XForms 定义中的一种。
在 case 语句中，Yahoo 与 Teoma 输出显示的基本格式非常相似。搜索引擎运行时，将生成很多 results 节点。对于大部分搜索引擎 API 而言，返回的搜索项数目是可配置的。因此，只要对此接口进行改进使其支持该特性，便可以改变 results 节点的数目。XForms 对从 XML 数据结构中找到的所有节点都将运行 "repeat"。这样便创建了一列结果，而无需 XForms 创建者预先知道它的数目，也无需使用 JavaScript 修改页面源数据结构来为每个节点提供显示元素。
图 3 显示了使用 Teoma 产生的搜索结果。Teoma 的情况比较简单一点。Web 站点记录了 Teoma 返回的 XML 结构（参阅中的链接）。因为 Teoma 并没有为数据指定名称空间，所以只能使用 XML 中给定的名称来引用节点。
图 3. Teoma 搜索结果

图 4 显示了使用 Yahoo 得到了搜索结果。考虑到 Yahoo 能够将结果限定在一个站点之内并且能决定显示多少结果，Yahoo 的 XML 字段名称与 Teoma 有所不同。不过它们之间还有另一个重要的区别：Yahoo 在返回的 XML 中指定了名称空间。这需要 XForms 引用使用该名称空间。XHTML 在其头部把名称空间定义为 y。用粗体显示了所有 XForms ref 说明符上的这些 y: 说明符。
图 4. Yahoo 搜索结果

结束语XForms 在显示方式这方面具有极大的灵活性，能动态地适应不同的情况，以提供无缝的用户体验。本文使用其中的一些功能创建了一个搜索客户机，它能根据用户选择的搜索引擎显示不同的界面。可以在自己的基于 XForms 的应用程序中使用这些思想，创建能适应用户选择和可用数据的接口。

收藏分享评分

回复引用

订阅 TOP

返回列表