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

将 RatingData 类添加到项目

1. 将 RatingData.java 下载到您的文件系统。
   
   
2. 下载并导入 AJAX 组件（如果您尚未下载）。
   
   
3. 创建一个新项目并将其命名为 RatingExample。
   
   
4. 在主菜单中，选择“文件”>“添加现有项”>“Java 源代码”。在“添加现有项”对话框中，找到并选择 RatingData.java ，然后单击“添加”。
   
   IDE 会将 RatingData 类添加到 ratingexample 包。
   
   
5. 在“项目”窗口中，双击 "RatingData.java" 节点以便在 Java 编辑器中打开该文件。将以下 package 语句添加到文件顶部附近且位于 import 语句之上的位置。
   

   package ratingexample;

6. 在主菜单中，选择“生成”>“生成主项目”以编译 RatingData 类。
   
   
7. 关闭 RatingExample 项目，然后再将其重新打开，这样 RatingData 便可以在设计时使用。如果不执行此步骤，那么按照本教程最后一部分将评级组件的属性绑定到 currentRatingData 时，会出现错误。

将属性添加到会话 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" 节点，验证这四个属性是否出现在该节点之下，如下图所示。如果某个属性未出现，请右键单击该节点，然后选择“刷新”。如果该属性仍未显示，请重复执行添加该属性的步骤。
    
   

   图 1：会话 Bean 属性

    
   
9. 单击 SessionBean1.java 标签，然后将下面以粗体显示的代码附加到 SessionBean1.init 方法中。
    
   

   代码样例 1：SessionBean1 init

   public void init { ... // 执行必须在初始化受管组件 // *之后*完成的应用程序初始化 //待做事项 - 在此处添加您自己的初始化代码 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.gif", "The definitive guide to Java Studio Creator."}; itemMap.put(itemIds[0], currentItemData); itemMap.put(itemIds[1], new String[] {"/resources/coreJSFbook.gif", "The one book you need to master this time-saving technology."}); }

    
   此代码将填充会话 Bean 属性。它首先初始化 ratingMap 和 itemMap。然后，通过 for 循环创建 RatingData 实例并将其放置在 ratingMap 中，同时将第一个 RatingData 实例设置为当前评级数据。请注意，RatingData 实例是用悬停文本构造的，即，当用户将鼠标悬停在组件中的星形符号上时将显示这些文本。在 for 循环之后，代码创建了一个字符串数组以保存项数据（图像 URL 及描述），并将第一个字符串数组设置为当前项数据 (currentItemData)。

创建主页

图 2：缺省评级组件

1. 如果尚未下载 FieldGuide.gif，请将其下载到您的文件系统。
   
   
2. 单击 "Page1" 标签以返回到可视设计器中。
   
   
3. 将一个“标签”组件从组件面板的“基本”类别拖动到页面上，键入 Browse Books，然后按 Enter 键。在“属性”窗口中，将“标签”的 id 属性设置为 headerLabel，将 labelLevel 设置为强(1)。
   
   
4. 将一个“图像超级链接”组件拖动到页面上。将 id 属性设置为 fieldGuideLink，并从 text 属性中删除图像超级链接字样。
   
   
5. 右键单击“图像超级链接”，然后从弹出式菜单中选择“设置图像”。找到并选中 FieldGuide.gif，然后单击“确定”。
   
   Sun Java Studio Creator Field Guide 的图像将会出现在页面上。
   
   
6. 将一个 "Rating"（评级）组件从组件面板的 "BluePrints AJAX Components" 类别拖动到页面上。将该组件的 id 属性设置为 fieldGuideRating。
   
   缺省情况下，评级组件是一排显示为五个星形的符号，如上面的图 2 所示。
   
   
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 会为评级组件添加相应的控件。最终结果如下图所示。
    
   

   图 3：定制的评级组件

    
   
   控件用于说明用户对某一项不感兴趣， 控件用于清除用户的评级。 控件是模式切换控件。评级组件可以在显示项的用户评定级别和平均评定级别之间进行切换。
   
   
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 将显示相应的工具提示。
    
   图 4 显示了当前页的设计情况。
    
   

   图 4：评级组件页的设计

    
   

测试应用程序

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 的图像，则什么也不会发生。稍后将在本教程中实现该链接的代码。

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

图 5：页面上的两项

1. 如果尚未下载 CoreJSFbook.gif，请将其下载到您的文件系统。
   
   
2. 将一个“图像超级链接”组件拖动到 Page1 上，并将其放置在评级组件的下方。将其 id 属性设置为 coreFacesLink，并从 text 属性中删除图像超级链接字样。使用“设置图像”菜单项打开图像定制器，然后找到并选中 CoreJSFbook.gif。
   
   此时，Core Faces 一书的图像应该出现在页面上。
   
   
   
3. 复制 Field Guide 书籍的评级组件，并将副本粘贴在 Core JSF 书籍的下方。将新评级组件的 id 属性设置为 coreFacesRating。编辑绑定属性的表达式，使用 coreFaces 关键字代替这些属性中的 fieldGuide 关键字。
   
   
4. 双击 coreFacesLink 图像超级链接，然后用以下代码实现操作方法。
   
   

   代码样例 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"; }

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

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

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

   图 6：Detail 页的设计

    
   
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
   Data
   averageGrade	#{SessionBean1.currentRatingData.averageGrade}
   averageModeText	#{SessionBean1.currentRatingData.averageModeText}
   inAverageMode	设置为 True
   Advanced
   gradeReadOnly	设置为 True

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

   属性
   常规
   id	myRating
   Appearance
   includeClear	设置为 True
   includeNotInterested	设置为 True
   Data
   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，如下图所示。
    
   

   图 7：页面导航

    
   
9. 运行并测试应用程序。单击第一页上某本书的图像，以打开显示该书详细信息的第二页。请注意可以跨页显示和修改评级数据。
   
   注意：在 Detail 页对书籍进行评级时，必须刷新该页才能更新平均评定级别。但是，返回到 Page1 时，将自动显示更新后的平均评定级别。这两种行为都可以模拟实际的应用程序。在呈现页面时，您需要确保平均评定级别是准确的，但是没有必要在任何人对项进行评级时都实时更新平均评定级别。

小结

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

• 使用 AJAX 自动完成文本字段组件
• 使用 AJAX 地图查看器组件
• 使用 AJAX 进度栏组件
• AJAX 和 Sun Java Studio Creator 2 简介
• 在 Sun Java Studio Creator 2 中安装并使用 BluePrints 样例 AJAX 组件