预输入如何工作
预输入字段的目的是改善用户体验。 当某人在页面的输入字段中输入内容时,计算机通常可能会猜测该人将要键入的内容,从而为用户完成数据输入。
例如,如果您要求用户输入他所居住的州的名称,然后他开始输入Mass ,则很有可能他将键入Massachusetts 。 在这种情况下,计算机可以通过在用户已经输入的Mass末尾添加achusetts来自动完成单词。 这节省了时间并减少了潜在错误的数量,因为用户很少会犯拼写错误。
尽管通常可以正确猜测用户下一步要输入的内容,但情况并非总是如此。 如果用户没有输入Mass而是输入Ma怎么办? 以马开头的三种状态; 因此,无法预测用户将要键入的三个。 在这种情况下,将为她提供可供选择的列表:缅因州,马里兰州和马萨诸塞州。 这些选择通常显示在输入字段下的列表框中。 当她选择提供的选项之一时,该选项将复制到输入字段中,从而完成输入。 但是,如果她继续键入,则提供的建议数量会减少,因为用户输入的数据越多,计算机软件就越能猜测他们期望的结果。
使此类字段在Web浏览器中成为可能的技术相当简单,但直到最近才被广泛使用。 为了使Web浏览器获得建议列表,它需要以用户不注意的方式与服务器通信。 浏览器和服务器之间的这种后台通信通常称为AJAX(异步JavaScript™和XML的缩写),并且在各种网站上都非常流行。
预输入字段背后的想法非常简单:用户在输入字段中输入字符后,浏览器就会通过将该字段的当前内容作为参数传递给服务器,以向服务器发出AJAX请求。 服务器评估内容并将建议列表返回给浏览器。 然后,浏览器在输入字段旁边显示一个列表框,其中提供了来自服务器的建议。 如果用户选择了建议之一,则会将其复制到输入字段中。
实施此服务需要四个主要部分:
- 浏览器需要JavaScript,该JavaScript可以创建和处理AJAX请求以与服务器进行后台通信。
- 浏览器还需要JavaScript,该JavaScript定义了从服务器收到建议列表后如何向用户显示建议列表。
- 服务器需要代码来指示它从浏览器接收AJAX请求并对其进行响应。
- 服务器还需要代码来猜测用户打算输入或期望什么,并生成建议以供用户选择。
尽管想法很简单,但是所有这些部分的实现可能非常复杂。 幸运的是,Rational Application Developer V7中的JavaServer™Faces(JSF)库处理了前三个部分,使您完全无需编写客户端JavaScript和客户端-服务器AJAX通信。 将预输入JSF组件添加到页面后,您所需要做的就是提供服务器端代码以生成建议(四个要求中的第四个)。 在本文中,您将学习两种方法:编写自己的代码以使用本地数据源或使用Web服务。
最初设定
首先,您需要创建一个Web项目,一个网页和一个输入控件。
创建一个Web项目
要创建一个Web项目:
- 从菜单中选择文件 > 新建 > 项目 > 动态Web项目 。 (参见图1。 )
- 在“新建项目”向导中:
- 输入
project name
。 - 选择Faces Project配置。
- 选择将项目添加到EAR 。
- 输入
- 点击完成 。
图1. New Dynamic Web Project屏幕
创建网页
要创建网页:
- 在“ 项目资源管理器”中右键单击项目名称 。
- 从列表中选择新建 > 网页 。
- 在“ 新建网页”向导中,
enter a page name
。 (请参见图2。 ) - 点击完成 。
图2.新网页显示
![图2.网页显示](https://i-blog.csdnimg.cn/blog_migrate/ed125b84fb9c68ecde9292a40d1484dd.png)
创建一个输入控件
将输入组件从面板的“ 增强的Faces组件”抽屉拖到页面上。 (参见图3。 )
图3.添加一个输入控件
![图3.输入控件](https://i-blog.csdnimg.cn/blog_migrate/da322c341977a55311c7ac832ef1221f.png)
快速简便的步骤以添加预输入
现在您已经有了一个输入字段,您可以按照以下几个步骤为它启用预输入功能(参见图4 ):
- 单击输入字段以将其选中。
- “ 属性”视图将更新以显示
inputText
标记的属性。 切换到“inputText
标记的“ 行为”页面。 - 选择启用提前输入选项 。
这就是您需要做的!
图4.启用预先输入功能
请注意,输入组件的显示已更改为表明它现在支持预输入功能,并且“属性”视图已切换为显示预输入属性。 (参见图5。 )
图5.启用预输入功能
现在,您已经启用了预输入支持的输入字段,剩下要做的就是生成建议列表的服务器端代码。
产生建议的方法
处理用户输入并生成建议列表是预输入功能的目的。 实际上,这是每次想要添加预输入功能时都需要实现的唯一部分。
为了使预输入JSF组件起作用,其value属性必须绑定到Map对象。 当客户端从服务器请求建议时,它将调用Map的get方法并将输入字段的当前内容作为参数传递。 然后,get方法可以生成建议列表,并将其返回给ArrayList对象中的客户端。
用JSF术语来说,这意味着您需要创建一个实现java.util.Map接口的托管Bean,并将代码添加到get方法中以生成建议。 您可以将此托管bean放入会话或什至应用程序范围,以便仅创建一次。
在托管bean中生成建议
要创建一个新的bean:
- 在“ 项目资源管理器”中右键单击该项目的Java资源文件夹。
- 从列表中选择新建 > 包 。
- 输入软件包名称(例如,
beans
),然后单击完成 。 - 在“ 项目资源管理器”中右键单击包名称 。
- 从上下文菜单中选择“ 新建” >“ 类 ”。
- 在New Class向导中(请参见图6 ):
- 输入班级名称(例如,
Suggestions
)。 - 选择java.util.AbstractMap作为超类。
- 选择“ 创建继承的抽象方法” 。
- 输入班级名称(例如,
- 点击完成 。
图6.新类
将此bean添加为托管bean:
- 切换回网页(page1.jsp)。
- 在页面数据视图中 ,右键单击Faces Managed Beans类别,然后选择New > Faces Managed Bean 。 (参见图7。 )
- 在“ 添加Bean”对话框中:
- 输入
bean name
。 - 输入
bean class
。 - 选择会话范围 。
- 输入
- 点击完成 。
图7.新的托管bean
现在,您已经创建了bean,您需要实现其get方法。 为了使此示例简单,您将通过在用户键入该字段的文本中添加数字来创建10条建议的列表。 整个bean看起来像这样:
清单1.建议bean
package beans;
import java.util.AbstractMap;
import java.util.ArrayList;
import java.util.Set;
public class Suggestions extends AbstractMap {
public Object get(Object key) {
ArrayList suggestions = new ArrayList(10);
String currentValue = key.toString();
for(int i = 0; i < 10; i++) {
suggestions.add(currentValue + " " + i);
}
return suggestions;
}
public Set entrySet() {
return null;
}
}
您的bean和输入组件现在准备就绪。 您只需要将它们绑定在一起:
- 切换回网页(page1.jsp)。
- 选择预输入组件 。
- 切换到“ 属性”视图。 (请参见图8。 )
- 在“ 值”字段中输入您创建
name of the managed bean
的name of the managed bean
:#{suggestions}
图8.预输入值集
现在,您可以保存所有文件,并在服务器上运行page1.jsp。 当浏览器窗口打开时,您将看到一个输入字段。 (请参见图9。 )用户开始输入内容时,将在输入字段下打开一个建议列表框。 它包含10个选项,每个选项都包含输入字段的当前值以及一个从零到9的数字。
图9.在服务器上运行
在本示例中获得的建议不是很有用,因为我们在这里故意将Bean代码保持简单以演示预输入组件如何工作。 在实际的应用程序中,您可能需要执行更复杂的查找,并将值与数据库匹配,例如员工列表(如果用户输入名称)或产品列表(如果用户正在搜索)。目录)。 如果数据集是恒定的并且相对较小,也可以对其进行硬编码,例如美国的州列表。 或者,您可以调用Web服务从独立的提供程序获取建议列表。
从Web服务生成建议
Web服务可能是有关预输入字段的最常见建议来源。 使用Web服务时,您无需了解或担心数据来自何处,也不用担心逻辑如何实现。 在托管bean中实现get方法很简单,只需使用接收到的参数调用Web服务并将结果作为ArrayList返回即可。
您可以使用多种Web服务。 您可以创建自己的Web服务(这超出了本文的范围),可以使用组织中另一个团队可以使用的Web服务,也可以使用对公众可用的Web服务。 Web上有很多公共Web服务。 为此,您将在Aonaware上使用字典查找服务。 该服务可以返回以某个前缀开头的英语单词的列表,如果您想帮助用户正确输入英语单词,那么它非常适合于预先输入功能。
为了使您的应用程序使用此Web服务,您需要将该服务添加到Rational Application Developer IDE,以便它生成所有必需的Web服务类。 然后,您可以在Suggestions
类中更改get方法以使用此服务。
添加Web服务以生成建议
要将Web服务添加到您的项目,请按照下列步骤操作:
- 切换回网页(page1.jsp)。
- 在页面数据视图中 ,右键单击服务类别,然后选择新建 > Web服务 。 (参见图10。 )
- 在“ Web服务发现”对话框中:
- 从已知的URL中选择Web服务。
- 输入Web服务的URL:
http://services.aonaware.com/DictService/DictService.asmx?wsdl
:http://services.aonaware.com/DictService/DictService.asmx?wsdl
,然后单击Go 。 - 当Web服务出现在“ 信息”框中时,单击“ 添加到项目” 。
- 在“ 添加Web服务”对话框中,选择任何方法,然后单击“ 完成” 。
图10.添加一个Web服务
使用网络服务
将Web服务添加到项目中之后,Rational Application Developer IDE会生成从bean访问该服务所需的所有代码。 现在,您可以返回到Suggestions
类,并修改get方法以调用该服务,因此不会得到10个无用的字符串。
建议豆的代码如下所示:
清单2.带有Web服务的建议Bean
01 package beans;
02
03 import java.util.AbstractMap;
04 import java.util.ArrayList;
05 import java.util.Set;
06 import com.aonaware.services.DictServiceSoapProxy;
07 import com.aonaware.services.DictionaryWord;
08
09 public class Suggestions extends AbstractMap {
10
11 DictServiceSoapProxy proxy = null;
12
13 public Suggestions() {
14 proxy = new DictServiceSoapProxy();
15 }
16
17 public Object get(Object key) {
18 String currentValue = key.toString();
19 if(currentValue.length() < 3) {
20 return null;
21 }
22 ArrayList result = new ArrayList();
23 try {
24 DictionaryWord[] words = proxy.matchInDict("wn", currentValue, "prefix");
25 for(int i = 0; i < words.length; i++) {
26 String word = words[i].getWord();
27 result.add(word);
28 }
29 } catch (Exception e) {
30 }
31 return result;
32 }
33
34 public Set entrySet() {
35 return null;
36 }
37 }
以下是此代码的关键部分的简要分析:
- 在第11行中,您声明了一个代理变量以用于调用服务。 (
DictServiceSoapProxy
类是将服务添加到项目时Rational Application Developer软件生成的类之一)。 - 在第14行中,您将创建Web服务代理的实例。
- 在第19-21行中,请确保要传递给服务的字符串不是太短。 这是为了避免服务器收到非常大的请求。 (想象一下,无意中要求它返回所有以A开头的单词!)
- 在第24行中,您调用服务并传递输入字段的当前值作为参数。 其他两个参数(
wn
和prefix
)定义要使用的字典以及要应用的匹配规则。 - 在第25-28行中,将服务返回的结果转换为预先输入组件可以理解的ArrayList。
现在您可以保存所有文件,并再次在服务器上运行page1.jsp。 (请参见图11。 )这一次,只要您键入一个或两个字母,什么都不会发生。 但是,只要您键入至少三个字母,建议框就会打开,其中列出了从词典返回的前10个单词。
图11.在服务器上运行
如何自定义您的预输入组件
您可以使用以下属性来自定义预输入行为:
属性 | 描述 |
---|---|
maxSuggestions | 显示的最大建议数。 默认值为10, |
startCharacters | 提出建议之前,输入字段中必须包含的最少字符数。 默认值为1。 |
startDelay | 提出建议之前的延迟毫秒数。 默认值为500。 |
matchWidth | 如果为true,则建议列表与输入字段一样宽。 如果为false,则其宽度由列表CSS决定。 |
尺寸 | 建议列表的高度(以行为单位)。 如果建议多于行,则在建议列表中打开滚动。 默认值是10。 |
类型 | suggest 或autocomplete 指定是在下拉列表中显示建议(用户从列表中选择),还是使用列表中的第一个建议自动完成字段(在这种情况下,用户可以使用箭头键进行显示)选择其他建议)。 默认是suggest 。 |
启动时 | 提交AJAX请求时执行JavaScript函数。 |
未完成 | 处理AJAX请求时执行JavaScript函数。 |
注意:例如,您可以使用onstart
和oncomplete
向用户提供服务正在获取建议的视觉反馈。
建议列表框的显示由以下CSS类控制:
CSS类 | 描述 |
---|---|
<基础> | 可以在预输入组件的styleClass 属性中设置此类的名称。 默认值为inputText_Typeahead 。 设置包含列表的div的样式。 |
<base>-列表 | 设置显示建议列表的窗口的样式。 |
<base>-项目 | 设置列表中各个项目的样式。 |
<base>-已选择项目 | 设置当前所选项目的样式。 |
注意事项
与使用AJAX的任何其他组件一样,提前输入组件可能会在浏览器和服务器之间生成大量网络流量。 在为您的Web应用程序考虑此组件时,请记住,每个用户每次击键都可能生成其他请求。 如果您要服务大量用户,则服务器可能要处理很多请求。
为了限制请求数量,最好将startDelay
和startCharacters
属性设置为相对较高的值,以便浏览器仅在明显延迟后(用户输入几个字符后或用户暂停输入后)才发送AJAX请求一会儿。
翻译自: https://www.ibm.com/developerworks/rational/library/06/1205_kats_rad1/index.html