目录   -  什么是页面警报 -  设计起始页 -  将属性添加到会话 Bean -  配置起始页按钮 -  创建显示页面警报的页 -  将组面板组件添加到页面警报组件 -  创建警报状态页 -  定义页面导航 -  运行并测试应用程序

什么是页面警报

设计起始页

图 1：四种页面警报

1. 创建一个新的 Web 应用程序，并将其命名为 PageAlertExample。
   
   
2. 将一个“标签”组件从组件面板的“基本”类别拖放到页面顶部。在“属性”窗口中，将此“标签”组件 text 属性设置为 Page Alert Button Facets，并将其 labelLevel 属性设置为强 (1)。
   
   
3. 将一个“按钮”组件从组件面板的“基本”类别拖动到页面上。将此“按钮”组件的 text 属性设置为 Question，并将其 id 属性设置为 questionBtn。
   
   
4. 将一个“标签”组件拖动到页面上，并将其放置在 "Question" 按钮的右侧。将其 text 属性设置为 Render a Question Page Alert。
   
   
5. 再将三个“按钮”组件及其对应的“标签”组件拖动到可视设计器中，并对它们进行如下配置：
   
   
   1. 将第二个“按钮”组件的 text 属性设置为 Error，并将其 id 属性设置为 errorBtn。将其对应的“标签”组件的 text 属性设置为 Render an Error Page Alert。
   2. 将第三个“按钮”组件的 text 属性设置为 Warning，并将其 id 属性设置为 warningBtn。将其对应的“标签”组件的 text 属性设置为 Render a Warning Page Alert。
   3. 将第四个“按钮”组件的 text 属性设置为 Information，并将其 id 属性设置为 infoBtn。将其对应的“标签”组件的 text 属性设置为 Render an Information Page Alert。
   
   
6. 将一个“消息组”组件从组件面板的“基本”类别拖动到页面上，并将其放置在这些“按钮”组件的下方。

将属性添加到会话 Bean

1. 在“项目”窗口中，右键单击“会话 Bean”> "SessionBean1"，然后选择“添加”>“属性”。
   
   
2. 在“新建属性模式”对话框中，将“名称”设置为 userPageAlert，将“类型”设置为 com.sun.rave.web.ui.component.PageAlert，然后单击“确定”。
   
   
3. 重复步骤 1 以创建另一个属性。在“新建属性模式”对话框中，将“名称”设置为 userMessage，将“类型”设置为 String，然后单击“确定”。
   
   
4. 创建第三个属性。在“新建属性模式”对话框中，将“名称”设置为 userVisible，将“类型”设置为 boolean，然后单击“确定”。
   
   注意：类型是区分大小写的。请确保选择了 boolean 而不是 Boolean。

配置起始页按钮

1. 在可视设计器中，双击 "Question" 按钮以查看该按钮的 action() 方法。添加以下用粗体标记的代码：
   
   

   代码样例 1：定义问题类型的页面警报

   public String questionBtn_action() { PageAlert questionAlert = new PageAlert(); questionAlert.setType("question"); questionAlert.setDetail("Please press Next to begin machine upgrade."); questionAlert.setSummary("Information Lab Maintenance - Machine Upgrade"); questionAlert.setTitle(" " + "Machine Upgrade - Install"); getSessionBean1().setUserPageAlert(questionAlert); getSessionBean1().setUserVisible(true); return null; }

   
   
2. 按 Alt-Shift-F 组合键以修复 import 语句。您也可以通过按 CTRL-Shift-F 组合键，重新设置此代码片段以及添加到项目的其他代码片段中的代码格式。
   
   
3. 按“设计”按钮以返回到可视设计器。
   
   
4. 双击 "Error" 按钮并将以下事件处理程序代码添加到 errorBtn_action() 方法中：
   
   

   代码样例 2：定义错误类型的页面警报

   public String errorBtn_action() { PageAlert errorAlert = new PageAlert(); errorAlert.setType("error"); errorAlert.setDetail("Installation failed: Insufficient Privileges!"); errorAlert.setSummary("An Error has Occurred!"); errorAlert.setTitle(" " + "Machine Upgrade - Error"); getSessionBean1().setUserPageAlert(errorAlert); getSessionBean1().setUserVisible(false); return null; }

   
   
5. 返回到可视设计器，然后双击 "Warning" 按钮。将以下源代码添加到 warningBtn_action() 方法中：
   
   

   代码样例 3：定义警告类型的页面警报

   public String warningBtn_action() { PageAlert warningAlert = new PageAlert(); warningAlert.setType("warning"); warningAlert.setDetail("Warning: Patch 12345-01 is missing." + " Press Next to install patch prior to upgrade"); warningAlert.setSummary("Missing Patch is required"); warningAlert.setTitle(" " + "Machine Upgrade - Warning"); getSessionBean1().setUserPageAlert(warningAlert); getSessionBean1().setUserVisible(true); return null; }

   
   
6. 返回到可视设计器，双击 "Information" 按钮，然后将以下源代码添加到 infoBtn_action() 方法中：
   
   

   代码样例 4：定义信息类型的页面警报

   public String infoBtn_action() { PageAlert informationAlert = new PageAlert(); informationAlert.setType("information"); informationAlert.setDetail("Installation has completed successfully."); informationAlert.setSummary("Install complete"); informationAlert.setTitle(" " + "Machine Upgrade - Completed"); getSessionBean1().setUserPageAlert(informationAlert); getSessionBean1().setUserVisible(true); return null; }

   
   
7. 按 CTRL-Shift-S 组合键保存代码，然后返回到可视设计器。

创建显示页面警报的页

图 2：已完成的起始页

1. 在“项目”窗口中，右键单击“Web 页”节点，然后选择“新建”>“页”。将新页命名为 UserAlert，然后单击“完成”。
   
   
2. 将一个“页面警报”组件从组件面板的“布局”类别拖动到 UserAlert 页上。
   
   
3. 右键单击“页面警报”组件，然后从弹出式菜单中选择“属性绑定”。
   
   
4. 在“选择绑定目标”列中，展开 "SessionBean1" > "userPageAlert"。
   
   
5. 绑定以下属性与目标。通过选择绑定目标来对其进行设置，如下图所示。
   
   
   1. 将 type 属性绑定到目标属性：type String。单击“应用”。
   2. 将 detail 属性绑定到目标属性：detail String。单击“应用”。
   3. 将 summary 属性绑定到目标 #{SessionBean1.userPageAlert.summary}。单击“应用”。
   4. 将 title 属性绑定到目标 #{SessionBean1.userPageAlert.title}。单击“应用”。
      
   
   单击“应用”后，属性即被绑定并变为粗体，以表明它具有值。此外，“新建绑定表达式”字段将显示绑定目标。
   
   

   图 3：pageAlert1 的属性绑定

    
   
6. 单击“关闭”按钮。

将组面板组件添加到页面警报组件

1. 将一个“组面板”组件从组件面板的“布局”类别拖动到“页面警报”组件上。
   
   “页面警报”组件将立即显示一个蓝色突出区域，以指示此“组面板”组件是效的子组件。
   
   
2. 单击 "JSP" 按钮并在 groupPanel 的 ui:panelGroup 标记周围添加用粗体标记的以下标记，然后保存更改。
   
   

   代码样例 5：手动创建 pageAlertButtons Facet

   <ui:pageAlert binding="#{UserAlert.pageAlert1}" detail="#{SessionBean1.myPageAlert.detail}" id="pageAlert1" style="left: 24px; top: 24px; position: absolute" summary="#{SessionBean1.myPageAlert.summary}" title="#{SessionBean1.myPageAlert.title}" type="#{SessionBean1.myPageAlert.type}"> <f:facet name="pageAlertButtons"> <ui:panelGroup binding="#{UserAlert.groupPanel1}" id="groupPanel1"/> </f:facet> </ui:pageAlert>

   
   
3. 返回到可视设计器。请注意，组面板组件在页面警报组件中是右对齐的。此对齐方式由 pageAlertButtons facet 定义。
   
   
4. 将一个“按钮”组件从组件面板的“基本”类别拖动到“组面板”组件上。在放置该“按钮”组件之前，请确保只有“组面板”组件以蓝色突出显示。在“属性”窗口中，将其 text 属性更改为 Back，并将其 id 属性更改为 backBtn。
   
   
5. 将第二个“按钮”组件拖动到“组面板”组件上。这一次，请确保在放置该“按钮”组件之前，只有 "Back" 按钮以蓝色突出显示。将此“按钮”组件的 text 属性更改为 Next，并将其 id 属性更改为 nextBtn。在“属性”窗口的“行为”类别下，单击 visible 属性的省略号按钮 (...)。
   
   
6. 在“属性”对话框中，选择“使用绑定”选项。在“绑定到对象”标签上，选择 "SessionBean1" > "userVisible"（如图 4 所示），然后单击“确定”。
   
   

   图 4：对象绑定

    
   
   注意：绑定 "Next" 按钮后，它将从可视设计器中消失，因为其 primary 属性的缺省值为 False。这是预期的行为。要选择此按钮，请在“概要”窗口中选择它。
    
   
7. 将第三个“按钮”组件拖动到“组面板”组件上，同样确保在放置该“按钮”组件之前只有 "Back" 按钮以蓝色突出显示。将其 text 属性更改为 Cancel。将此“按钮”组件的 id 属性更改为 cancelBtn，并选中与其 primary 属性关联的复选框。这会将其 primary 属性的值设置为 True。
   
   选择 primary 属性会将 "Cancel" 按钮设置为缺省按钮，在呈现页面时将激活该按钮。
   
   
8. 返回到 JSP 视图。在 <f:facet> 标记内，您可以看到在其中定义了 "Back"、"Next" 和 "Cancel" 导航按钮的操作的代码：
   
   

   代码样例 6：已完成的 pageAlertButtons Facet 的视图

   ... <ui:pageAlert binding="#{UserAlert.pageAlert1}" detail="#{SessionBean1.myPageAlert.detail}" id="pageAlert1" style="left: 24px; top: 24px; position: absolute" summary="#{SessionBean1.myPageAlert.summary}" title="#{SessionBean1.myPageAlert.title}" type="#{SessionBean1.userPageAlert.type}"> <f:facet name="pageAlertButtons"> <ui:panelGroup binding="#{UserAlert.groupPanel1}" id="groupPanel1"> <ui:button action="back" binding="#{UserAlert.backBtn}" id="backBtn" text="Back"/> <ui:button action="#{UserAlert.nextBtn_action}" binding="#{UserAlert.nextBtn}" id="nextBtn" text="Next" visible="#{SessionBean1.userVisible}"/> <ui:button action="cancel" binding="#{UserAlert.cancelBtn}" id="cancelBtn" primary="true" text="Cancel"/> </ui:panelGroup> </f:facet> </ui:pageAlert> ...

   
   
9. 返回到可视设计器，然后双击 "Cancel" 按钮。将以下源代码添加到该按钮的 cancelBtn_action() 方法中：
   
   

   代码样例 7：添加 "Cancel" 按钮的源代码

   public String cancelBtn_action() { info("Installation has been cancelled by the user."); return null; }

   
   单击 "Cancel" 按钮时，将生成由 Page1 上的“消息组”组件提取的信息性 FacesMessage。
   
   
10. 返回到可视设计器。在“概要”窗口中，右键单击 "nextBtn" 节点，然后选择“编辑 action 事件处理程序”。这将打开 Java 编辑器，且光标位于 "Next" 按钮的 nextBtn_action() 方法中。添加以下源代码。请注意将 return null; 一行替换为 return "next";。
    
    

    代码样例 8：添加 "Next" 按钮的源代码

    public String nextBtn_action() { PageAlert pa = getSessionBean1().getUserPageAlert(); String type = pa.getType(); /*Note that type error should never occur since the *next button does not render when type is set to error.*/ if (type != null) { if (type == "question") { getSessionBean1().setUserMessage ("Your machine has been successfully upgraded."); } if (type == "error") { getSessionBean1().setUserMessage ("Please correct the permissions and restart."); } if (type == "warning") { getSessionBean1().setUserMessage("Patch installed successfully. " + "Installation has completed."); } if (type == "information") { getSessionBean1().setUserMessage("Please fill our our survey!"); } } else { getSessionBean1().setUserMessage("Application Error!"); } return "next"; }

    
    当用户单击 "Next" 按钮时，会将 userMessage 设置为一个适合于在浏览器会话中使用的警报类型的值。
    
    
11. 重新设置代码格式，按 Ctrl-S 组合键保存更改，然后返回到可视设计器。

创建警报状态页

在此部分中，您将创建状态页，该页是在对页面警报进行处理后所生成的。此外，您还将添加一个按钮以使用户可以轻松地访问应用程序的起始页。

下图显示了将在以下步骤中创建的页。

图 5：已完成的警报状态页

1. 创建一个新的 Web 页，并将其命名为 AlertStatus。
   
   
2. 将一个“标签”组件拖动到页面上，
   
   
3. 右键单击此“标签”组件，然后从弹出式菜单中选择“属性绑定”。
   
   
4. 在“选择可绑定的属性”列中，选择 text。在“选择绑定目标”列中，选择 "SessionBean1" > "userMessage"。单击“应用”设置其值，然后单击“关闭”。
   
   在可视设计器中“标签”组件的文本显示 abc，以表明它已被绑定。
   
   
5. 选择“标签”组件。在“属性”窗口中，通过单击 style 属性的省略号按钮 (...) 打开该属性。将字体大小设置为 18，然后单击“确定”。
   
   
6. 将一个“按钮”组件拖动到页面上。将其 id 属性设置为 returnBtn，并将其 text 属性设置为 Return to Start Page。

定义页面导航

1. 在可视设计器中单击鼠标右键，从弹出式菜单中选择“页面导航”，然后选择 "Page1.jsp"。
   
   
   1. 将 Page1.questionBtn 链接到 UserAlert 页，并将该链接命名为 question。
   2. 将 Page1.errorBtn 链接到 UserAlert 页，并将该链接命名为 error。
   3. 将 Page1.warningBtn 链接到 UserAlert 页，并将该链接命名为 warning。
   4. 将 Page1.infoBtn 链接到 UserAlert 页，并将该链接命名为 information。
   
   
2. 选择 "UserAlert.jsp"。
   
   
   1. 将 UserAlert.backBtn 链接到 Page1，并将该链接命名为 back。
   2. 将 UserAlert.nextBtn 链接到 AlertStatus 页，并将该链接命名为 next。
      
   3. 将 UserAlert.cancelBtn 链接到 Page1，并将该链接命名为 cancel。
   
   
3. 选择 "AlertStatus.jsp"，然后将 AlertStatus.returnBtn 链接到 Page1。将该链接命名为 start。执行完这些链接操作后的结果如下图所示。
    
   

   图 6：已完成的页面导航

运行并测试应用程序

1. 单击“运行主项目”按钮以部署并运行应用程序。将呈现 Page1，如下面的图 7 所示。
   
   

   图 7：已部署的页面警报应用程序

    
   
2. 通过单击按钮浏览应用程序。每个按钮都将呈现不同的页面警报图标和消息。
   
   单击 "Back" 或 "Cancel" 按钮将返回到 Page1。
   
   “消息组”组件将显示安装已被取消的消息，如下图所示。
   
   

   图 8：单击 "Cancel" 按钮后显示的消息

    
   
3. 单击问题、警告或信息类型的警报页上的 "Next" 按钮。将转到状态页。每个状态消息对于警报都是唯一的。错误类型的页面警报没有 "Next" 按钮，正如您在下面的图 9 中所看到的一样。
   
   

   图 9：无 "Next" 按钮的错误类型页面警报

    
   

• 深入研究组件
• 消息组件
• 了解范围和受管 Bean