在Rational Application Developer V7中使用JSF，AJAX和Web服务通过预输入字段来提高Web应用程序的可用性-CSDN博客

预输入如何工作

IBM Rational Software Delivery Platform桌面产品V7

为了支持新的V7产品，请查阅以下资源：

预输入字段的目的是改善用户体验。当某人在页面的输入字段中输入内容时，计算机通常可能会猜测该人将要键入的内容，从而为用户完成数据输入。

例如，如果您要求用户输入他所居住的州的名称，然后他开始输入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。）
在“新建项目”向导中：
1. 输入project name 。
2. 选择Faces Project配置。
3. 选择将项目添加到EAR 。
点击完成。

图1. New Dynamic Web Project屏幕

创建网页

要创建网页：

在“ 项目资源管理器”中右键单击项目名称 。
从列表中选择新建 > 网页。
在“ 新建网页”向导中， enter a page name 。（请参见图2。）
点击完成。

图2.新网页显示

创建一个输入控件

将输入组件从面板的“ 增强的Faces组件”抽屉拖到页面上。（参见图3。）

图3.添加一个输入控件

快速简便的步骤以添加预输入

现在您已经有了一个输入字段，您可以按照以下几个步骤为它启用预输入功能（参见图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 ）：
1. 输入班级名称（例如， Suggestions ）。
2. 选择java.util.AbstractMap作为超类。
3. 选择“ 创建继承的抽象方法” 。
点击完成。

图6.新类

将此bean添加为托管bean：

切换回网页（page1.jsp）。
在页面数据视图中 ，右键单击Faces Managed Beans类别，然后选择New > Faces Managed Bean 。（参见图7。）
在“ 添加Bean”对话框中：
1. 输入bean name 。
2. 输入bean class 。
3. 选择会话范围 。
点击完成。

图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服务发现”对话框中：
1. 从已知的URL中选择Web服务。
2. 输入Web服务的URL： http://services.aonaware.com/DictService/DictService.asmx?wsdl : http://services.aonaware.com/DictService/DictService.asmx?wsdl ，然后单击Go 。
3. 当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