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,列出所有的有效值。
下面的代码将展示怎样使用组件来产生任意子组件的列表:
--------------------------
valueChangeListener ="#{autoCompleteBean.updateList}"
listValue ="#{autoCompleteBean.list}" >
< f:facet name ="selectInputText" >
< ice:panelGrid columns ="3" style ="margin-bottom:-20px;"
columnClasses ="cityCol,stateCol,zipCol" >
< ice:outputText value ="#{city.city}" />
< ice:outputText value ="#{city.state}" />
< ice:outputText value ="#{city.zip}" />
</ ice:panelGrid >
</ f:facet >
</ ice:selectInputText >
--------------------------
这个例子显示了输入城市名的部分单词,则下拉列表中显示出匹配的城市名、州名、邮政编码。
2、创建Backing Beans
在例子中我们使用三个主要的backing beans:
(1)AutoCompleteBean:从AutoCompleteDictionary类存储收集到的值。其包含的方法是更新列表和从字典列表中得到匹配。
(2)AutoCompleteDictionary:从文件系统中的一个文件得到字典列表。
(3)City:基本类,作为字典列表的对象。
1)创建字典
对于自动完成组件要工作,必须有一个字典,让backing beans能查询和得到匹配的变量列表。如下:
--------------------------
< object class ="java.util.ArrayList" >
< void method ="add" >
< object class ="com.icesoft.icefaces.tutorial.component.autocomplete.City" >
< void property ="areaCode" >
< string > 631 </ string >
</ void >
< void property ="city" >
< string > Holtsville </ string >
</ void >
< void property ="country" >
< string > Suffolk </ string >
</ void >
< void property ="state" >
< string > New York </ string >
</ void >
< void property ="stateCode" >
< string > NY </ string >
</ void >
< void property ="zip" >
< string > 00501 </ string >
</ void >
</ object >
</ void >
</ object >
</ java >
--------------------------
这个文件可能相当大,因此我们可以zip这个xml文件以节省空间。