在 Welcome 页面中添加一个标题。

在页面的顶部输入一些文本：Welcome to the HR JSF Application。

通过单击 Visual Editor 顶部左侧下拉列表并选择 Heading 2 来将文本格式化为 H2。

对页面应用 CSS 样式表。

要执行这一操作，确保在右侧可以看到组件选项板 (component palette)。（否则，使用 View->Component Palette）。在屏幕右上角的 Components 中，选择 CSS 库。

然后将 JDeveloper 样式表拖到新的 JSP 上。您将看到页面外观立即改变。

接下来，将一个 JSF 命令按钮 (commandButton) 组件拖放到该页面上。

在组件选项板中，选择 JSF HTML 组件列表，然后将 Command Button 项拖放到页面的标题文本下。
注意，当您把鼠标放在组件选项板中的组件上方时会显示帮助文本。

在右下方的 Property Inspector (View | Property Inspector) 中，将 CommandButton 的 Value 属性更改为 Proceed to Login。

将 Action 属性更改为 login。当在运行时单击时，这将使用户可以前进到另一页。

在 Visual Editor 中工作时，请注意 JSF 组件的样子就是它们运行时的样子。例如，作为一个按钮。

单击 Visual Editor 底部的 Source 选项卡，转至页面的源代码视图。
在靠近源代码页面的顶部，有两个用于标准或基本 JSF 组件库的 taglib 指令。这些库是指定事项的一部分，与 JSF 引用实现一同提供。具体的库是 Core 库和 HTML 库。

向下滚动页面的主体可以看到以下标记：

这是 JSP 标记，该标记提供了到 JSF commandButton 用户界面组件 (UIComponent) 的钩子。当该标记执行时，它将提供一个可点击的按钮，该按钮可以执行诸如调用 Java 方法或执行 Faces 导航之类的任务。

在本例中，它将执行到第二个页面的简单导航。这是通过在 Property Inspector 中设置 commandButton 的 Action 属性，然后在稍后定义与动作的值对应的导航规则来实现的。在本例中，您已经将 Action 属性的值设为 login。稍后您将定义一个导航规则来使用同一个值导航至第二个登录页面。

在 Application Navigator（Web Content | WEB-INF 文件夹）中找到 faces-config.xml 文件。双击该文件调用页面流编辑器。

Visual Editor 将显示一个空白屏幕。

在继续之前，请注意编辑器在屏幕底部有 4 个选项卡：Diagram、Overview、Source 和 History。默认视图是 faces-config 编辑器的 Diagram 视图，该视图允许您直观地编辑 faces-config 的导航规则。

单击 Overview 选项卡将显示一个控制台类型的界面，它允许您将所有类型的配置注册到 faces-config 文件中，包括受管理 bean、导航规则和其他项（如自定义验证器、转换器等）。(注：您可以直观地或使用 Overview 编辑器来定义导航规则。）Source 选项卡使您可以直接利用增强的 XML 编辑功能（包括标记填充）来编辑 XML。History 选项卡是所有编辑器窗口都有的，它显示最近编辑的历史记录。

从 Navigator 中将最初的 welcome.jsp 页面拖放到图中。

在图中直接创建 login.jsp。

要执行这一操作，将一个 JSF Page 项目从 Component Palette 上拖放到页面流图中。将其更名为 /login.jsp。
请注意，页面上有一个黄色的标记，这指示还没有实际创建它，只是存在于图中。

通过单击（不是拖放）该选项板中的 JSF Navigation Case 项，然后单击 welcome.jsp 图标来创建导航规则。您将看到一条连接线开始出现。然后单击 login.jsp 完成连接。

在 Property Inspector 中，将默认的 From Outcome 值从 success 更改为 login，以匹配您为 welcome.jsp 页面上 commandButton 的 Action 属性设置的值。

在图上创建 Hello 页面。将一个 JSF Page 项拖放到页面流图上，并将其命名为 /hello.jsp。

通过单击该选项板中的 JSF Navigation Case 项，然后单击 login.jsp 图标来创建导航规则。单击 hello.jsp 完成连接。

在 Property Inspector 中，将 From Outcome 的默认值 success 更改为 hello。

查看您刚定义的导航规则的真实语法：单击 faces-config.xml 文件的 Source 选项卡，查看指定的新导航规则。

请注意，一些 和 标记由于 login.jsp 和 hello.jsp 页面不存在报告了一个警告。

单击 Diagram 选项卡返回至 Visual Editor，创建 login.jsp 页面。

为此，在 Visual Editor 中双击 login.jsp 页面图标，调用先前用过的 JSF JSP Wizard。

单击 Next 跳过 Create JSF JSP Wizard 的 Welcome 页面。在 Step 1 中，确保为 login.jsp 文件名选中了 JSP Page 选项，然后单击 Next。

在 Step 2 中，指定您希望页面的组件与一个您同时创建的受管理 bean 自动绑定在一起。

为此，确保选中了 Automatically Expose UI Components in a New Managed Bean 单选按钮。接受 Bean 名称、类和包的默认值。单击 Next。

在检查完为该 JSP 页面启用的标记库后，单击 Step 3 中的 Next。在 Step 4 中，保留默认值，单击 Finish。

在设计编辑器中打开新的登录页面。

添加一个标题 Application Login，并像以前一样用 H2 对其进行格式化。然后像以前一样应用 JDeveloper CSS。

注意，您还可以从 Application Navigator 的 Web Content | css 文件夹中访问 jdeveloper.css。

要构建 Login 页面，您将使用在 JSF 规范中提供的一组基本组件：panelGrid、outputlabel、inputText、inputSecret, message 和您先前使用的 commandButton。panelGrid 将用作一个表格结构来安排登录域的布局。
注意，HTML 表也可以用作登录域的容器，但 Panelgrid 代码更紧凑。

当您将 PanelGrid 拖到页面上时，将出现一个向导。单击 Next 跳过 Welcome 页面。指定您想创建一个 3 行的空面板网格 (empty panel grid)。

单击 Finish 将组件添加到页面上。然后您将在页面上看到一个矩形。

将下列组件以下面的顺序从 Palette 中拖放到 panelGrid 中：Output label、Input Text。

使用属性检查器，将 Output Label 的 value 属性更改为 User Name；

将 Input Text 的 Required 值更改为 True。

将 Message 组件从 Palette 拖放到 panelGrid。在 Message Properties 对话框，从 For 域旁边的下拉列表选择 inputText1。单击 OK。

如果没有为 User Name 域指定值，则该消息返回一个错误。

将下列组件以下面的顺序从 Palette 中拖放到 panelGrid 中：Output label、Input Secret。

使用 Property Inspector，将 Output Label value 属性更改为 Password，

将 Input Secret 的 Required 值更改为 True。

选择 JSF Core 库，并从组件选项板中将 Validate Length 组件拖放到 Input Secret 域中。

在 Property Inspector 中，指定 4 为最小长度、8 为最大长度。

将 Message 组件从 Palette 拖放到 panelGrid。在 Message Properties 对话框，从 For 域旁边的下拉列表选择 inputSecret1。单击 OK。

如果没有指定值或字符串的长度少于 4 或多于 8 位，则该消息将返回错误。

将一个 Command Button 拖放到 panelGrid 中。页面现在看起来应与下图类似：

将 Command Button 的 Value 属性更改为 Hello Me。然后在 Action 属性的值内单击，使用向下箭头图标，从下拉列表中选择 hello 值。

单击 Save All 图标保存您的工作。

创建第三个页面 hello.jsp。该页阐释了如何使用一个辅助 bean 显示来自另一页面的信息。

双击图中的 hello.jsp 图标直接创建该页面。显示 Create JSF JSP Wizard - Welcome 屏幕。单击 Next 继续。

在 hello.jsp 页面的 Step 2 中，选择 JSP Page 类型，然后单击 Next。

在 Step 2 中，选择 Do Not Automatically Expose UI components in a Managed Bean 选项。单击 Next。

在 Step 3 中，您将看到为该 JSP 页面启用的标记库。单击 Next。在 Step 4 中，接受所有默认值。单击 Finish。

您现在将在 Visual Editor 中看到该支持 JSF 的 JSP (hello.jsp) 的框架。

将一个 H2 的标题 Hello 添加到页面中，并再次添加 JDeveloper 样式表。

挨着 Hello 文本，添加一个空格，从 JSF HTML 库拖放一个 Output Text 组件。

对于 OutputText，在 Property Inspector 中删除 Value 属性的值，然后单击 Binding to Data 图标。

在 Value 对话框，展开 JSF Managed Beans | backing_login | inputText1，选择 value。按向右箭头按钮将选定项移到 Expression 域。单击 OK。

在 Hello 行下面的新行中，添加新文本 " You've successfully completed this Intro to JSF tutorial"。

在页面流图中的 /welcome.jsp 页面上单击右键，并从上下文菜单中选择 Run。

内嵌的 OC4J 服务器启动。注意在日志窗口中显示的消息。

Welcome 页面显示在您默认的浏览器中。单击 Proceed to Login 按钮。

显示 Login 页面。不要键入任何值，单击 Hello Me 按钮测试 Required 域约束验证是否返回错误。

页面应看起来与下图类似：

通过为 User Name 域指定一个值和一个单字符口令测试登录页面，然后单击 Proceed to Login 按钮。

现在页面应看起来与下图类似：

重新启动登录页面，为 User Name 域指定一个值，为 password 域指定一个有效的字符串（长度介于 4 位和 8 位之间），然后单击 Proceed to Login 按钮。显示 Hello 页面，返回您的用户名。

从 Welcome 页面到 Login 页面、再到 Hello 页面的导航成功！

返回，打开页面流图。

通过单击该选项板中的 JSF Navigation Case 项，然后单击 login.jsp 图标来创建导航规则。单击 welcome.jsp 完成连接。

在 Property Inspector 中，将 From Outcome 的默认值 success 更改为 failed。

单击编辑器的 login.jsp 选项卡，打开该页面的 Design 视图，选择 Hello Me 按钮。

在 Property 窗格中，将 Action 属性的值设为 default，从而移除 hello 值。

在 Structure 窗格中，右键单击与 Hello Me 按钮对应的 h:commandButton，从上下文菜单选择 Create Method Binding for Action 选项。

接受默认值，单击 OK。

在 Source 编辑器中打开 Login.java 类，显示为该 commandButton 添加的新语句。

在 // Add event 代码注释下面，移除 return null 语句，键入 ife

然后使用 CTRL + Enter 组合键自动生成 if - else 语句结构。

由于可以从该 commanButton 访问两个潜在的目标页面，因此您需要通过编程设定导航到 Hello 页面或 Welcome 页面的规则。

更改 if 代码，如下所示：

if (inputSecret1.getValue().toString().equals("welcome")) {
return "hello";

更改 else 代码，如下所示：

} else { String message = "Invalid login";
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
return "failed";

您的代码现在应如下所示：

if (inputSecret1.getValue().toString().equals("welcome")) {
return "hello";
} else {
String message = "Invalid login";
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
return "failed";
}

打开 Welcome 页面的 Design 视图。在 Proceed to Login 按钮的上面，添加一个新的空行。然后，从组件选项板的 JSF HTML 库拖放一个 Messages 组件。

打开页面流图，右键单击 Welcome 页面，从上下文菜单中选择 Run。

单击 Proceed to Login 按钮，提供一个错误的口令值测试 Login 页面。

Welcome 页面现在应与下图类似。