ICEfaces Note(3)

最新推荐文章于 2025-12-08 00:32:30 发布

最新推荐文章于 2025-12-08 00:32:30 发布 · 82 阅读

文章标签：

本文介绍ICEfaces中的Auto-CompleteComponent组件及其使用方法。该组件为用户提供带有自动完成功能的文本输入框，能够根据用户输入显示可能的匹配选项。文章详细说明了如何配置组件属性，以及创建支持自动完成功能的backingbeans。

ICEfaces Note(3)

一、使用ICEfaces的Auto-Complete Component
自动完成组件（Auto-Complete Component）实际上就是ice:selectInputText组件。这个组件提供了一个带有自动完成功能的增强的文本输入组件。一旦用户输入文本到组件中，组件将提供一个可能匹配的弹出列表供用户选择。
这个组件在用户还没有完成输入时预测了用户想要键入的短语。这个组件需要开发者在backing bean实现匹配搜索算法。
下面给了使用该组件的例子。
1、selectInputText组件能产生两种类型的列表（list）：
1）字符串数据的列表；
2）任意复杂的子组件列表。
－－－－－－－－－－－－－－－－－－－－－－－－－－
<ice:selectInputText rows="10" width="300" valueChangeListener="#{autoCompleteBean.updateList}">
<f:selectItems value="#{autoCompleteBean.list}"/>
</ice:selectInputText>
－－－－－－－－－－－－－－－－－－－－－－－－－－
上面的代码将显示一个下拉列表引用来匹配输入的文本。
rows属性定义了当输入文本时，有多少结果项被列出；
width属性定义了输入文本框和下拉列表框的宽度；
valueChangeListener属性链接backing bean，来控制当输入列表改变时相应列表的改变。
f:selectItems是JSF的标签，它链接到backing bean，列出所有的有效值。

下面的代码将展示怎样使用组件来产生任意子组件的列表：
－－－－－－－－－－－－－－－－－－－－－－－－－－

<ice:selectInputTextrows="6"width="300"listVar="city"

valueChangeListener="#{autoCompleteBean.updateList}"

listValue="#{autoCompleteBean.list}">

<f:facetname="selectInputText">

<ice:panelGridcolumns="3"style="margin-bottom:-20px;"

columnClasses="cityCol,stateCol,zipCol">

<ice:outputTextvalue="#{city.city}"/>

<ice:outputTextvalue="#{city.state}"/>

<ice:outputTextvalue="#{city.zip}"/>

</ice:panelGrid>

</f:facet>

</ice:selectInputText>

－－－－－－－－－－－－－－－－－－－－－－－－－－
这个例子显示了输入城市名的部分单词，则下拉列表中显示出匹配的城市名、州名、邮政编码。

2、创建Backing Beans
在例子中我们使用三个主要的backing beans：
（1）AutoCompleteBean：从AutoCompleteDictionary类存储收集到的值。其包含的方法是更新列表和从字典列表中得到匹配。
（2）AutoCompleteDictionary：从文件系统中的一个文件得到字典列表。
（3）City：基本类，作为字典列表的对象。
1）创建字典
对于自动完成组件要工作，必须有一个字典，让backing beans能查询和得到匹配的变量列表。如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－