本教程将向您介绍如何使用 Sun Java Studio Creator 集成开发环境 (Integrated Development Environment, IDE) 生成一个 Web 页，该页包含使用 Java BluePrints AJAX 技术创建的文本字段组件。当在文本字段中键入内容时，将基于包含 180,000 个词条的英文词典所提供的可能扩展列表来尝试进行自动完成。将通过 Web 服务来提供词典内容，并且词典 Web 服务文件随附在 IDE 中。请注意，本教程当前不支持任何非英文版的 DictionaryService.war 文件。
通过目前提供的样例 Java BluePrints AJAX 组件，可以帮助您了解 AJAX 技术并说明 AJAX 是如何与 Java Studio Creator IDE 进行完美结合的。有关 AJAX 技术的相关说明，请参见 AJAX 和 Sun Java Studio Creator 2。
|
| 目录
|
![[spacer]](/im/a.gif) |
 |
将词典 Web 服务添加到 IDE
在本教程中生成的 Web 应用程序会调用词典 Web 服务，该服务使用一个接口与两个方法进行交互。一个方法查找单词定义，另一个方法为用户输入返回十个匹配程度最高的项。DictionaryService.war 随附在 IDE 中，并且已自动部署到与 IDE 捆绑在一起的应用服务器中。使用以下步骤，您就可以将词典 Web 服务添加到可以在 IDE 中使用的 Web 服务的列表。您只需添加一次该 Web 服务即可。再次尝试运行本教程时，就已安装了该服务。您所用的 DictionaryService.wsdl 文件也随附在 IDE 中。
如上所述，DictionaryService.war 当前不支持非英文的语言环境。
- 在 IDE 的“服务器”窗口中，展开“部署服务器”>“已部署的组件”节点。
请注意，/DictionaryService 作为已部署的组件之一被列出，如下图所示。
图 1：已部署词典 Web 服务 |
- 在“服务器”窗口中右键单击“Web 服务”节点，然后从弹出式菜单中选择“添加 Web 服务”。
- 在“添加 Web 服务”对话框中，选择“本地文件”，然后单击“浏览”。
- 在“打开”对话框中，选择
DictionaryService.wsdl 文件，然后单击“打开”。
将解析 Web 服务描述语言 (Web Services Description Language, WSDL) 文件，并使用 Web 服务信息更新“添加 Web 服务”对话框，如下图所示。
图 2：“添加 Web 服务”对话框 |
- 单击“添加”。
词典服务会被添加到“Web 服务”节点下方，现在，该 Web 服务可供在 IDE 中创建的 Web 应用程序使用了。
添加自动完成文本字段
在本部分，您可以创建一个包含自动完成文本字段组件的页面，如下图 3 所示。此组件所包含的源代码显示文本 "Hello"，并显示在文本字段中输入的文本的大写形式。
- 下载并导入 BluePrints AJAX 组件（如果您尚未执行此操作）。
- 创建一个新的 JSF Web 应用程序项目，并将其命名为
TextCompletionApp。
- 从组件面板的“基本”类别中拖动一个“标签”组件，并将其放在页面上。将其
text 属性设置为 Type a word:。
- 从组件面板的 "BluePrints AJAX Components" 类别中，拖动 "Auto Complete Text Field" 组件，并将其放在页面上的“标签”组件的旁边。
- 双击 "Auto Complete Text Field" 组件会在 Java 编辑器中打开其源代码，可以从中添加事件处理程序。
Java 编辑器打开后，插入点位于 autoComplete1_complete 方法中。
- 删除以
result 开头的两行注释符 (//)，以使 autoComplete1_complete 方法如下所示：
| 代码样例 1：事件处理程序代码 |
public void autoComplete1_complete(FacesContext context,
String prefix, CompletionResult result) {
result.addItem("Hello");
result.addItem(prefix.toUpperCase());
}
|
- 部署并运行该应用程序。
请注意，在文本字段中键入内容时，将显示键入内容的大写形式，如下图所示。服务器将对键入的文本执行大写转换计算，而无需提交任何页面。文本字段将动态显示结果，如下图所示。
图 3：文本完成初始页 |
添加代码以显示一组单词
现在，需要修改上述部分的代码，以便该代码使用词典服务显示一小组单词，这些单词以自动完成文本字段中键入的文本开头。在无需提交任何页面的情况下就可以再次动态显示这些单词。
- 单击编辑工具栏中的“设计”以便在可视设计器中查看 Page1。
- 打开“服务器”窗口，并将“Web 服务”节点下的 "DictionaryService" 组件拖动到可视设计器中。
该组件会在页面的源代码中添加本地客户端对象 dictionaryServiceClient1。该组件不会出现在可视设计器中，但是该对象的新节点会出现在“概要”窗口中。
图 4：已添加词典服务客户端对象 |
- 双击 "Auto Complete Text Field" 组件以打开 Java 编辑器。
- 在
autoComplete1_complete 方法中，删除以 result 开头的两行代码，并添加下面以粗体显示的代码。
| 代码样例 2：调用词典 Web 服务 |
public void autoComplete1_complete(FacesContext context,
String prefix, CompletionResult result) {
try {
String[] items = dictionaryServiceClient1.matchPrefix(prefix);
result.addItems(items);
} catch (Exception ex) {
log("Exception getting the matching words", ex);
String[] items = new String[] {"Exception getting the matching words"};
result.addItems(items);
}
} |
- 部署并运行该应用程序。
在自动完成文本字段中键入内容时，将从词典服务返回包含十个单词的列表，并且它们会显示在该文本字段中。这些内容将在部署应用程序部分的前三个步骤中进行说明。
在接下来的步骤中，用户可以查看从列表中选定的单词定义。
添加代码以显示单词定义
此时需要在页面中添加静态文本组件和按钮组件。用户在单击该按钮时，所选单词的定义将显示在静态文本组件中。
- 返回到可视设计器中。
下图显示了完成以下步骤后的页面。
 图 5 ：页面的最终设计 |
- 将另一个“标签”组件拖动到可视设计器上，并将其放在第一个“标签”组件的下方。将其
text 属性设置为 Definition:。
- 将一个“静态文本”组件拖动到页面上，并将其放在 "Auto Complete Text Field" 组件的下方
重新调整“静态文本”组件的宽度，使其略宽于 "Auto Complete Text Field"。这样，当该静态文本显示在部署应用程序中时，就不会显示为一个很长的列，其宽度只能容纳若干个单词（与该组件的缺省宽度一样）。
- 在“属性”窗口的“数据”类别中，请将“静态文本”组件的
escape 属性设置为 False。
值为 False 表示关闭对 HTML 的转义。这样，<、> 和 & 字符就不会转换为 HTML 实体 <、> 和 &。这是必需的，因为词典 Web 服务返回的单词定义包含 HTML 标记。HTML 标记需要浏览器进行解释，而不是像纯文本那样显示。
- 将一个“消息组”组件拖动到页面上，并将其放在“静态文本”组件的下方。
- 将一个“按钮”组件拖动到页面上，并将其放在 "Auto Complete Text Field" 组件的右侧。将按钮的
id 属性设置为 lookUpButton，并将其 text 属性设置为 Look Up。
- 双击 "Look Up" 按钮以显示其事件处理程序代码。通过插入以下粗体显示的代码来修改
lookUpButton_action 方法。
| 代码样例 3：按钮处理程序 |
public String lookUpButton_action() {
try {
String definition =
dictionaryServiceClient1.define(autoComplete1.getText());
staticText1.setText(definition);
} catch (Exception ex) {
log("Dictionary Service Error:", ex);
error("Error accessing Dictionary Service");
}
return null;
} |
部署应用程序
- 部署并运行该应用程序。
- 将光标放在 "Auto Complete Text Field" 组件中。
请注意，在词典服务中列出的前十个单词会立即显示在文本字段中，如下图所示。
图 6：词典服务返回的前十个单词 |
- 在文本字段中键入
java。
列表将显示 Java 一词和词典服务提供的后九个单词，如下图所示。
图 7：键入 Java 后返回的十个单词的列表 |
- 从列表中选择 Java 一词，然后单击 "Look Up" 按钮。
将从词典 Web 服务中检索对应的定义，并在页面上显示该定义，如下图所示。
图 8：所选单词及其定义 |
另请参见：
更多的开发者资源：
此页的最新修改时间：2006 年 4 月 14 日
|
