>> 更多 Visual Web Pack 文档

使用 AJAX 评级组件

2007 年 5 月 [修订号：V5.5.1-1]

在本教程中，您将利用评级组件让用户得以对某一项评定级别。本教程提供了一个 RatingData 类的实现，用来维护该项的用户评定级别、投票数量以及平均评定级别。缺省情况下，评级组件是一排显示为五个星形的符号，然而，您可以定制该组件的外观和文本（如本教程中所述）。 您在本教程中构建的应用程序可以模拟实际的应用程序，即用户可以在其中对某一项进行评级。应用程序的第一页显示可供用户浏览和评定的书籍。第二页显示有关用户在第一页上选定的书籍的详细信息。

目录   -  将 RatingData 类添加到项目 -  将属性添加到会话 Bean -  创建主页 -  使用评级组件 -  测试应用程序 -  执行更多操作：添加要评定的第二项 -  执行更多操作：分隔平均评定级别和用户评定级别

本教程使用的文件

- RatingData.java - fieldguide.png - corejsfbook.png

本教程将使用以下技术和资源

JavaServer Faces 组件/ Java EE 平台	1.2/Java EE 5* 1.1/J2EE 1.4
Travel 数据库	不是必需的
BluePrints AJAX 组件库	必需

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5。

本教程是针对使用 Sun Java Application Server PE 9.0 Update Release 1 和 Tomcat 5.5.17 进行定制的。如果您使用的是其他服务器，请参考发行说明和常见问题解答以了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

将 RatingData 类添加到项目

1. 将 RatingData.java 下载到您的文件系统。
2. 下载并导入 AJAX 组件（如果您尚未下载）。
3. 创建一个新的 Visual Web 应用程序项目，并将其命名为 RatingExample。

4. 在“项目”窗口中，右键单击 "RatingExample" >“组件库”节点，然后从弹出式菜单中选择“添加组件库”。选择 "BluePrints AJAX Components"，然后单击“添加组件库”。

   IDE 会将该组件库复制到项目中，并在组件面板中添加这些组件和支持 Bean。

5. 从主菜单中，选择“文件”>“添加现有项”>“Java 源代码”。在“添加现有项”对话框中，找到并选择 RatingData.java，然后单击“添加”。

   IDE 将在 "ratingexample" 包中添加 RatingData 类。
6. 在主菜单中，选择“生成”>“生成主项目”以编译 RatingData 类。

7. 关闭 "RatingExample" 项目，然后再将其重新打开，这样 RatingData 便可以在设计时使用。

   如果不执行此步骤，那么按照本教程最后一部分将评级组件的属性绑定到 currentRatingData 时，会出现错误。
8. 如果它还不是主项目，请在“项目”窗口中右键单击 "RatingExample"，然后选择“设置为主项目”。

将属性添加到会话 Bean

1. 如果没有打开 Page1，请在可视设计器中将其打开。
2. 在“概要”窗口中，右键单击 "SessionBean1" 节点，然后选择“添加”>“属性”。

3. 在“新建属性模式”对话框中，依次在“名称”字段中键入 ratingMap，在“类型”字段中键入 HashMap。将“模式”设置为“只读”，然后单击“确定”。

   ratingMap 属性用于存储每项的评级数据。
4. 在“概要”窗口中，双击 "SessionBean1" 节点以便在 Java 编辑器中打开 SessionBean1.java。将光标放置在编辑器中，并按 Alt-Shift-F 组合键，这可以自动添加以下 import 语句并修复“找不到 HashMap”错误：

   import java.util.HashMap;

5. 返回到可视设计器中的 Page1，以使“概要”窗口可见。添加名为 currentRatingData、类型为 RatingData 的第二个会话 Bean 属性。请不要更改缺省模式“读/写”。单击“确定”。

   此属性用于存储当前项的评级数据。该应用程序是一个具有两个页面的应用程序，当前项是指在第二页上显示的项。

6. 添加名为 itemMap、类型为 HashMap 的第三个会话 Bean 属性。将“模式”设置为只读，然后单击“确定”。

   itemMap 属性用于存储每项中与评级无关的数据，对于本示例，它存储图像 URL 及项的描述。

7. 添加第四个会话 Bean 属性。将该属性命名为 currentItemData，使其成为字符串数组 (String[])，并使用缺省模式“读/写”。单击“确定”。

   此字符串数组属性用于存储当前项的图像 URL 及描述。
8. 打开 SessionBean1.java，然后将下面以粗体显示的代码附加到 SessionBean1.init 方法中。
   
   

   代码样例 1：SessionBean1 init

   public void init() { // Perform initializations inherited from our superclass super.init(); // Perform application initialization that must complete // *before* managed components are initialized // TODO - add your own initialiation code here ratingMap = new HashMap(); itemMap = new HashMap(); String[] itemIds = {"fieldGuide", "coreFaces"}; String[] hoverTexts = {"I hate it", "I dislike it", "It's OK", "I like it", "I love it"}; for (int i = 0; i < itemIds.length; i++) { RatingData ratingData = new RatingData(hoverTexts); ratingMap.put(itemIds[i], ratingData); if (i == 0) { currentRatingData = ratingData; } } currentItemData = new String[]{"/resources/fieldguide.png", "The definitive guide to NetBeans IDE."}; itemMap.put(itemIds[0], currentItemData); itemMap.put(itemIds[1], new String[] {"/resources/corejsfbook.png", "The one book you need to master this time-saving technology."}); }

   
   

   此代码将填充会话 Bean 属性。它首先初始化 ratingMap 和 itemMap。然后，通过 for 循环创建 RatingData 实例并将其放置在 ratingMap 中，同时将第一个 RatingData 实例设置为当前评级数据。

   请注意，RatingData 实例是用悬停文本构造的，即，当用户将鼠标悬停在组件中的星形符号上时将显示这些文本。在 for 循环之后，代码创建了一个字符串数组以保存项数据（图像 URL 及描述），并将第一个字符串数组设置为当前项数据 (currentItemData)。

创建主页

接下来，将创建主页并添加评级组件和其他基本组件，如下图所示。通过该页面，用户可以为某本书籍评定级别，并且可以查看此级别以及该书的平均评定级别。

图 1：评级组件页的设计

1. 如果尚未下载 fieldguide.png，请将其下载到您的文件系统。
2. 单击 "Page1" 标签以返回到可视设计器中。
3. 将一个“标签”组件从组件面板的“基本”类别拖动到页面上，键入 Browse Books，然后按 Enter 键。在“属性”窗口中，将标签的 id 属性设置为 headerLabel，将 labelLevel 设置为 强(1)。
4. 将一个“图像超级链接”组件拖动到页面上。将 id 属性设置为 fieldGuideLink，并从 text 属性中删除“图像超级链接”字样。

5. 右键单击“图像超级链接”，然后从弹出式菜单中选择“设置图像”。找到并选中 fieldguide.png，然后单击“确定”。

   NetBeans IDE Field Guide 的图像将会出现在页面上。该文件还将复制到项目的 web/resources 子目录中。

6. 将一个 "Rating"（评级）组件从组件面板的 "BluePrints AJAX Components" 类别拖动到页面上。将该组件的 id 属性设置为 fieldGuideRating。

   缺省情况下，评级组件是一排显示为五个星形的符号，如上面的图 1 所示。

7. 双击 fieldGuideLink 图像超级链接并将 fieldGuideLink_action() 方法的主体替换为下面以粗体显示的代码。

   请确保删除 return null;，因为它将被替换为 return "Detail";

   代码样例 2：fieldGuideLink_action 方法

   public String fieldGuideLink_action() { SessionBean1 sessionBean = getSessionBean1(); sessionBean.setCurrentItemData ((String[])sessionBean.getItemMap().get("fieldGuide")); sessionBean.setCurrentRatingData ((RatingData)sessionBean.getRatingMap().get("fieldGuide")); return "Detail"; }

   
   此代码将 fieldGuide 设置为当前项。具体说来，此代码设置会话 Bean 的 currentItemData 和 currentRatingData 属性。当用户单击图像超级链接时，此方法将返回结果详细信息，这会导致打开第二个页面并显示当前项的数据。稍后，本教程会介绍将 Detail 页添加到项目。

使用评级组件

1. 单击“设计”按钮以便在可视设计器中重新打开 Page1。选择 "Rating" 组件，然后通过在“属性”窗口 "Appearance" 类别中设置以下属性来配置该组件。

   外观属性
   includeClear	设置为 True
   includeModeToggle	设置为 True
   includeNotInterested	设置为 True

   
   
   您将每个属性设置为 True 时，IDE 会为评级组件添加相应的控件。最终结果如下图所示。
   
   

   图 2：定制的评级组件

   • 控件用于说明用户对某一项不感兴趣。
   • 控件用于清除用户的评级。
   • 控件是一个模式切换控件。评级组件可以在显示项的用户评定级别与平均评定级别之间切换。

2. 在“属性”窗口的 "Data" 类别下设置以下属性。在有些情况下，您需要将组件属性与 ratingMap 或 itemMap 中的条目绑定。

   为此，必须将这些绑定表达式直接输入到“属性”窗口中。这些绑定在“属性绑定”对话框中是不可用的，因为该对话框不显示 Map 对象中的条目。

   Data 属性
   averageGrade	#{SessionBean1.ratingMap.fieldGuide.averageGrade}
   averageModeHoverText	Show the average rating for this item
   averageModeText	#{SessionBean1.ratingMap.fieldGuide.averageModeText}
   clearHoverText	Clear my rating
   grade	#{SessionBean1.ratingMap.fieldGuide.grade}
   hoverTexts	#{SessionBean1.ratingMap.fieldGuide.hoverTexts}
   inAverageMode	设置为 True
   normalModeHoverText	Show my rating for this item
   normalModeText	#{SessionBean1.ratingMap.fieldGuide.normalModeText}
   notInterestedHoverText	I'm not interested in this item

   • grade 属性是用户为某项评定的级别（星数），而 averageGrade 属性则是用户群体为该项评定的平均级别。
   • 包括 Text 一词的属性是用来设置当用户将鼠标悬停在组件的控件之上和之外时所看到的文本。请注意分别用于用户（正常）模式和平均模式的文本属性。
   • 如果 inAverageMode 属性为 True，则将组件的初始显示设置为平均模式。

   要获得某个属性的详细信息，请将鼠标悬停在“属性”窗口中该属性的名称上，IDE 将显示相应的工具提示。

测试应用程序

1. 运行项目。应用程序将在 Web 浏览器中打开，评级组件显示平均评定级别，如 控件和下文所示：

   Average rating:  0 (from 0 votes).

   将鼠标悬停在组件上，请注意随着控件的改变会显示出不同的文本。将鼠标从组件移开时，则又会回到平均评定级别。

2. 将 Field Guide 评定为 4 星级。组件接受该级别，并切换到用户（正常）模式，如 控件所示。

   将鼠标从组件移开时，您将看到文本 "Saved: I like it"，这指示已保存您评定的级别。
3. 如果您改变了主意，将 Field Guide 评定为 5 星级。则现在文本就会变成 "Saved: I love it"。

4. 将鼠标移动到 控件上，请注意它将变成 ，然后单击该控件。

   将鼠标从组件移开时，您将看到 2 次投票的平均评定级别为 4.5。

5. 通过单击“清除”和“不感兴趣”控件来继续了解组件。

   如果此时单击 Field Guide 的图像，则什么也不会发生。稍后，我们将在本教程中实现该链接的代码。

执行更多操作：添加要评定的第二项

通过上面步骤中描述的项目，您可以很好地了解如何使用和定制评级组件。实际的应用程序很可能包括多个要评级的项。在此，您需要将第二本书和评级组件添加到页面，如下图所示。

图 3：页面上的两项

1. 如果尚未下载 corejsfbook.png，请将其下载到您的文件系统。
2. 将一个“图像超级链接”组件拖动到 Page1 上，并将其放置在评级组件的下方。将其 id 属性设置为 coreFacesLink，并从 text 属性中删除“图像超级链接”字样。

3. 单击 imageURL 属性旁边的省略号按钮 (...)。在 corejsfbook.png 的 imageURL 对话框中，找到并选择 corejsfbook.png。单击“确定”。

   Core Faces 一书的图像应该出现在页面上。IDE 还会将该文件复制到项目的 web/resources 子目录中。

4. 复制 Field Guide 一书的评级组件，并将副本粘贴在 Core JSF 图像的下方。将新评级组件的 id 属性设置为 coreFacesRating。

5. 在“属性”窗口的“数据”部分中，编辑绑定属性的表达式，使用 coreFaces 关键字代替这些属性中的 fieldGuide 关键字。

   注意：如果属性设置未显示在“属性”窗口中，请单击与属性关联的省略号 (...) 按钮，然后在弹出式窗口中单击“取消”。相应的文本将出现在“属性”窗口中。请不要在对话框中编辑属性。

6. 双击 coreFacesLink 图像超级链接，然后用以下代码实现操作方法。

   同样，请确保删除 return null;，因为它将被替换为 return "Detail";

   代码样例 3：coreFacesLink 方法

   public String coreFacesLink_action() { SessionBean1 sessionBean = getSessionBean1(); sessionBean.setCurrentItemData ((String[])sessionBean.getItemMap().get("coreFaces")); sessionBean.setCurrentRatingData ((RatingData)sessionBean.getRatingMap().get("coreFaces")); return "Detail"; }

7. 运行并测试应用程序。

执行更多操作：分隔平均评定级别和用户评定级别

1. 在“项目”窗口中，右键单击 "RatingExample" >“Web 页”，然后从弹出式菜单中选择“新建”>“页”。将新页命名为 Detail。

   下图显示了在此部分中创建的页面。

   图 4：Details 页的设计

2. 将一个“超级链接”组件拖动到页面上，键入 Return to Browsing Books，然后按 Enter 键。在“属性”窗口中，将 id 属性设置为 browseLink，将 url 属性设置为 /faces/Page1.jsp。
3. 将一个“图像”组件拖动到页面上。将其 id 属性设置为 currentItemImage，将 url 属性设置为 #{SessionBean1.currentItemData[0]}。
4. 将一个“静态文本”组件拖动到页面上。将 id 属性设置为 currentItemText，将 text 属性设置为 #{SessionBean1.currentItemData[1]}。
5. 将一个 "Rating" 组件拖动到页面上。按以下方式设置属性：
   
   

   属性
   常规
   id	averageRating
   数据
   averageGrade	#{SessionBean1.currentRatingData.averageGrade}
   averageModeText	#{SessionBean1.currentRatingData.averageModeText}
   inAverageMode	设置为 True
   高级
   gradeReadOnly	设置为 True

6. 将第二个 "Rating" 组件拖动到页面上。按以下方式设置其属性：
   
   

   属性
   常规
   id	myRating
   外观
   includeClear	设置为 True
   includeNotInterested	设置为 True
   数据
   clearHoverText	Clear my rating
   grade	#{SessionBean1.currentRatingData.grade}
   hoverTexts	#{SessionBean1.currentRatingData.hoverTexts}
   normalModeText	#{SessionBean1.currentRatingData.normalModeText}
   notInterestedHoverText	I'm not interested in this item

7. 在可视设计器中单击鼠标右键，然后从弹出式菜单中选择“页面导航”。

   将在 IDE 中打开“页面导航”窗口。

8. 将一条连线从 Page1.jsp 图标旁边的连线端口拖动到 Detail.jsp 图标。将该连线命名为 Detail，如下图所示。请注意，在使用连线端口后，IDE 将在其下面添加第二个连线端口。

   图 5：页面导航

9. 运行并测试应用程序。单击第一页上某本书的图像，以打开显示该书详细信息的第二页。请注意可以跨页显示和修改评级数据。

   注意：在 Detail 页对书籍进行评级时，必须刷新该页才能更新平均评定级别。但是，返回到 Page1 时，将自动显示更新后的平均评定级别。这两种行为都可以模拟实际的应用程序。在呈现页面时，您需要确保平均评定级别是准确的，但是没有必要在任何人对项进行评级时都实时更新平均评定级别。

试试看。在本教程中，Detail 页只显示在 Page1 上所选项的图像和描述。在实际的应用程序中，可能需要在 Detail 页上包含更多的信息，例如出版日期、ISBN 编号、出版商说明等。要实现这些功能，请首先将这些信息添加到字符串数组。然后，为每条新信息在 Detail 页上添加一个静态文本组件。最后，将 Detail 页上的新静态文本组件与 currentItemData 字符串数组的新成员绑定。

小结

以下是有关评级组件的要点：

• 缺省情况下，评级组件是一排显示为五个星形的符号。您可以通过修改 maxGrade 属性的值来定制星形符号的数量。
• 评级组件还具有用于包括“清除”和“不感兴趣”控件的属性，以及用于定制用户将鼠标悬停在这些控件之上和之外时出现的文本的属性。
• 通过组件的模式切换控件，可以在组件的同一实例中显示用户评定级别和平均评定级别。然而，如果您愿意，也可以在两个独立的实例中显示用户评定级别和平均评定级别。该组件具有设置与每种模式关联的文本和悬停文本的属性。
• 可以跨页显示和修改平均评定级别和用户评定级别。
• 由于应用程序通常包括多个要评级的项，因此最好创建一个映射以保存评级数据实例。
• 只有在用户更改评定级别时，才会发送 AJAX 请求。如果用户评定的级别与已保存的级别相同，则不会发送 AJAX 请求。
• 作为对 AJAX 请求的响应，可以在服务器上更新（和国际化）评级组件的正常模式文本和平均模式文本。

• 在 NetBeans Visual Web Pack 5.5 中下载并导入 AJAX 和其他组件
• 使用 AJAX 地图查看器组件
• 使用 AJAX 进度栏组件

---

请将您的意见和建议发送给我们