右键单击 model 项目，并从上下文菜单中选择 New...

在 New Gallery 中，展开 Business Tier 节点，并在 Categories 面板中选择 TopLink，在 Items 面板中选择 Java Objects from Tables。单击 OK。

"Create Java Objects from Tables" 向导将被调用。单击 Next 继续。

在向导的 Step 1 中，您需要创建 TopLink 映射，并选择您希望映射哪个数据库的对象。

要创建 TopLink 映射，请单击 TopLink Map 域右边的 New... 按钮。

在 Create Object-Relational Map 对话框中，接受默认的映射名 tlMap1。

要创建到 HR 模式的数据库连接，请单击 Connection 域右边的 New... 按钮。

"Create Database Connection" 向导将被调用。单击 Next。

在向导的 Step 1 中，输入 hrconn 作为连接名。单击 Next。

在 Step 2 中，输入 hr 作为用户名，hr 作为口令。 保留 Role 域为空白，但选中 Deploy Password 框。单击 Next。

在 Step 3 中，输入 localhost 作为主机名，1521 作为 JDBC 端口，ORCL 作为 SID。单击 Next。

在 Step 4 中，单击 Test Connection。
如果数据库可用并且连接的详细信息正确，那么您将在 Status 窗口中看到 Success!。

如果出现错误，那么请验证设置，单击 Back，进行任何必要的修改，然后重新测试连接。 如果您仍然无法建立连接，那么数据库可能存在问题，您可能需要向管理员进行确认。

单击 Finish，然后单击 OK，返回至 "Create Java Objects from Tables" 向导。 完成映射的对话框应如下图所示。

单击 Next 继续。

在 TopLink 向导的 Step 2 中，单击 Query 按钮，显示可用的数据库表列表。 双击 EMPLOYEES 表，将其选中。 之后，该表将出现在右侧。 （或者您可以单击 > 将其切换过去）。单击 Next 继续。

在 Step 3 中，指定程序包名为 hr.model。单击 Next。

查看最终屏幕上的信息，并单击 Finish。

Log 窗口将显示 Java 对象生成的结果。

右键单击导航器中的 Employees.java 节点，并选择 New Sample Java Client。

已创建 EmployeesClient.java，并将其添加到了 hr.model 程序包中。

将一个新的方法 getEmployees() 添加到 EmployeesClient.java 文件中。 该方法将返回一个 java.util.List 的对象，该对象包含来自数据库的员工记录。

要创建新的方法，您需要复制 main 方法并对其进行略微修改。 选择 main 方法，并从上下文菜单中选择 Copy。

将复制的代码粘贴到 main 方法之下。

要执行这一操作，请在 main 方法后按 Enter 键创建一个新行，并按 Tab 键缩进您打算粘贴的代码，然后从上下文菜单中选择 Paste。

对粘贴的代码进行修改。

首先将返回类型更改为 List。 您需要导入 List(java.util)；当 JDeveloper 提示时请选择它。

将方法重命名为 getEmployees()，并删除参数。

删除 for.... 语句：

for (Iterator itr = results.iterator();itr.hasNext();) {
printObjectAttributes(itr.next(), session);

并添加一条返回语句，返回转换成 List 的结果集合：

return (List) results;

保存、编译并运行项目。

日志窗口显示了员工的详细信息

右键单击 view 项目，并从上下文菜单中选择 New...

在 New Gallery 中，展开 Web Tier 节点，并选择 Categories 面板中的 JSF，以及 Items 面板中的 JSF JSP。单击 OK。

Create JSF JSP Wizard 欢迎屏幕将显示。单击 Next 继续。

在该向导的 Step 1 中，接受默认的 J2EE 版本，并单击 Next 继续。

在 Step 2 中，将页面命名为 welcome.jsp，并单击 Next。

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

要执行这一操作，请务必选中 Auto Bind 复选框，并选中 Create New Managed Bean 单选按钮。 接受 Bean 的名称和类的默认值，但将程序包名改为 view.backing。单击 Next。

在 Step 4 中，接受默认值并单击 Next。

在 Step 5 中，您将看到为该 JSP 页面启用的标记库。 因为这将是一个支持 JSF 的页面，因此预先选择了 JSF Core 和 JSF HTML 库。单击 Finish。

注意选择资料库只是将必需的 JSF 的 taglib 指令插入到了页面中。 您仍然需要将实际的标记拖放到页面上。

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

注意导航器中 view 项目的内容。 您可以在 view.backing 程序包中看到新的 Welcome.java Backing Bean，并且 view 项目已被修改，以便它可以通过新的 faces-config.xml 文件作为一个 JSF 应用程序来运行。

在欢迎页面中添加一个标题。

在页面的顶部输入一些文本： Welcome to the HR JSF Application。 通过单击 Visual Editor 顶部右侧的下拉列表并选择 Heading 2 来将文本格式化为 H2。

在页面中应用 CSS 样式表。

要执行这一操作，首先在屏幕右上的 Components 区域中选择 CSS 页面。 然后将 JDeveloper 样式表拖到新的 JSP 上。 您将看到页面外观立即改变。

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

要执行这一操作，请确保在右侧可以看到组件选项板 (component palette)。 （如果看不到，请用 View->Component Palette），并选择组件的 JSF HTML 列表。然后将 Command Button 项目拖放到页面上的标题文本下面。
请注意，当您将鼠标放在一个组件上时将出现帮助文本。

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

将 Action 属性更改为 login。 这将使用户能够单击它继续转到另一个页面上。

请注意，当您在 Visual Editor 中工作时，JSF 组件将以运行时外观显示（即，例如以一个按钮的形式）。 单击 Visual Editor 底部的 Source 选项卡，转至页面的源代码视图。
注意在接近源代码页面顶部的位置上的 2 条针对标准或基础 JSF 组件库的 taglib 指令，这些组件库是规范的一部分，并且自带了 JSF 的参考实施。 指定的资料库是 Core 资料库和 HTML 资料库。

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

这是 JSP 标记，该标记提供了到 JSF commandButton 用户界面组件 (UIComponent) 的钩子。 当该标记执行时，它将提供一个可点击的按钮，该按钮可以执行诸如调用 Java 方法或执行 Faces 导航之类的任务。 在本例中，它将执行到第二个页面的简单导航。 这是通过在 Property Inspector 中设置 commandButton 的 Action 属性，然后在稍后定义与动作的值对应的导航规则来实现的。 在本例中，您已经将 Action 属性的值设为 login。 稍后您将定义一个导航规则来使用同一个值导航至第二个登录页面。

在导航器中找到 faces-config.xml 文件。 双击该文件调用页面流编辑器。

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

在继续之前，请注意在屏幕底部编辑器有 4 个选项卡： Diagram、Overview、Source 和 History。 默认视图是 faces-config 编辑器的 Diagram 视图，该视图允许您以可视化方式来编辑 faces-config 的导航规则。 单击 Overview 选项卡将显示一个控制台类型的界面，它允许您将所有类型的配置注册到 faces-config 文件中，包括 managed beans、导航规则和其他的项目（例如自定义验证器、转换器等）。（注意： 您可以通过可视化方式或使用 Overview 编辑器来定义导航规则。） Source 选项卡允许您直接利用增强的 XML 编辑功能（包括标记完成功能）来编辑 XML。History 选项卡是所有编辑器窗口通用的，它将显示最近编辑的历史信息。

指定一条从 welcome.jsp 页面到新的 login.jsp 页面的导航规则。

通过在导航器中对最初的 welcome.jsp 页面进行拖放，将其引入到图中。

在图中直接创建 login.jsp。

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

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

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

通过单击 faces-config.xml 文件的 Source 选项卡来查看指定的新导航规则，并了解一下您刚刚指定的导航规则的实际语法。

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

通过在 Visual Editor 中双击它调用您之前使用的 JSF JSP 向导来执行这一操作。

按照向导的步骤，接受所有的默认值来创建登录页面。 一旦创建完成，空白页面将在 Visual Editor 中打开。

在登录页面中添加详细信息。 该页面的用途是使用户能够在输入正确证书 (oracle/welcome) 的情况下转到 employees.jsp 页面上。

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

要构建登录页面，您将使用在 JSF 规范中提供的一组基本组件： panelGrid、outputlabel、inputText、inputSecret 和您之前使用的 commandButton。 panelGrid 将充当登录域的一个格式化容器。
注意 HTML 表也可以用作登录域的容器，但 Panelgrid 代码更紧凑。

在 Component Palette 中，确保显示了 JSF HTML Palette 页面，并从 Component Palette 中选择 Panel Grid。

当您将 PanelGrid 拖到页面上时，将出现一个向导。 指定您想创建一个 2 行的空面板网格 (empty panel grid)。 单击 Finish，将组件添加到页面上。 然后您将在页面上看到一个矩形。

将下列组件以下面的顺序从 Palette 中拖放到 panelGrid 中： Output label、Input Text、Output label、Input Secret 和 Command Button。 按下图中的方式对其进行排列。

将 Output labels' value 属性分别更改为 Userid 和 Password。 （您可以在屏幕上或者通过在 Property Inspector 中修改值属性来编辑标签）。 将 Command Button 的 value 更改为 Login（在 Property Inspector 中进行修改）。

将一个 Messages 组件拖放到页面上（紧挨着 Login 按钮）。 这是显示登录失败消息的地方。

添加代码指定 Login 命令按钮的行为。

双击 Login 按钮。 这将打开 login.java 文件，并将光标定位到注释行
// Add event code here... 之后
输入以下代码：

if (inputText1.getValue().toString().equals("oracle") && inputSecret1.getValue().toString().equals("welcome"))
return "success";
else
{
String message = "Invalid login";
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
return "failure";
}

删除 return null; 语句。

接受 Import Assistance 消息，导入相应的 Faces 程序包。

注意：
当您在运行时输入登录证书并单击登录按钮时，这段代码将执行。 如果证书无效，那么将生成一条 Faces 消息并被放入到队列中。 在提交响应时，导航不会继续进行到之后的页面，因为该方法的结果是 "failure" 而不是 "success"。 而您只能停留在同一个页面上，但将从 组件中显示入队的消息。

在页面流图中创建第三个页面 employees.jsp。该页面将显示从（您在本教程的第一个主题中创建的）TopLink 模型中获取的员工列表。

点击选项卡返回至 faces-config.xml 文件，拖放一个新的页面到页面流图上，并将其命名为 /employees.jsp。

在图中双击新页面直接创建它。 Create JSF JSP Wizard 再次被启动。 按照步骤进行操作，接受所有的默认值并创建页面。 新的空白 Employees 页面将在 Visual Editor 中打开。

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

点击选项卡返回至 faces-config.xml 文件，并创建一个从 /login.jsp 到 /employees.jsp 的 JSF Navigation Case。 接受默认的 From Outcome 值 success。

单击 File | Save All 保存您的工作。

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

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

出现欢迎页面。 单击 Proceed to Login 按钮。

显示 Login 页面。 在 UserId 域中输入 oracle，Password 域中输入您的姓名。 按 Login 按钮。

这将触发一个登录错误，您将停留在登录页面上，并将显示自定义的错误消息 Invalid Login。

这次提供正确的证书，在 UserId 域中输入 oracle，Password 域中输入 welcome。 再次按 Login 按钮。 出现 Employees 页面。

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

打开 faces-config.xml 文件（如果它还没打开），并点击屏幕底部的 Overview 选项卡。

屏幕左侧的 Managed Beans 节点向您显示了当前注册的 Bean 集。 backing_welcome、backing_login 和 backing_employees bean 是在您创建 JSF JSP 页面时利用自动绑定特性自动生成的。
单击 New 按钮创建一个新的 managed bean。

在 Create Managed Bean 对话框中，在 Name 域中输入 Employees，浏览找到 hr.model.EmployeesClient 类，并保留 Scope 为 request。单击 OK。

您现在已经注册了 EmployeesClient 类，它将在 JSF 应用程序中作为 Employees Managed Bean 使用。

接下来将一个 DataTable 添加到 employees.jsp 页面中，并将其与来自该 managed bean 的 getEmployees() 方法绑定在一起。

要执行这一操作，请单击 employees.jsp 选项卡，在 Visual Editor 中打开页面，并在 Component Palette 中选择 JSF HTML 页面。

将 Data Table 组件拖放到空页面上。

Create Data Table 向导将启动。

单击跳过欢迎页面，在第二个页面中，确保选中了 Bind the Data Table Now 单选按钮。单击 Next。

在下一个页面中，单击 Bind... 按钮绑定 Value 域。

在 JSF Expression Builder 对话框中，展开 Employees 节点并双击 employees 来生成表达式：

#{Employees.employees}

单击 OK 接受该值，并返回至 Bind Data Table 屏幕。

在 Bind Data Table 屏幕中，浏览找到 hr.model.Employees 类，并在 Var 域中输入 row。

数据表的标题和行数据将显示。

执行该 DataTable 的一些最后的自定义，如下所示：

将 Employee Id 列重新排序至顶部，将 Email 列的组件更改为 Command Link，并将 Number of rows to display 更改为 10。

单击 Finish，完成数据表的创建。

生成的数据表将显示在 Visual Editor 中。请尝试单击不同的列和单元格。 请注意左下的 Structure Pane 如何与您在 Visual Editor 中点击的内容保持同步。

您可以通过在 Property Inspector 中点击一个属性并更改其值来改变数据表的可视化属性。 或者，您可以选择 Structure Pane 中的元素。 在下面的示例中，在 Structure Pane 中选中 dataTable ，并在 Visual Editor 中高亮显示，其属性显示在 Property Inspector 中，可以在其中修改这些属性。

还可以在 Structure Pane 和 Visual Editor 中重新排序和删除列（和标记）。

在 Visual Editor 或 Sructure Pane 中选择 Commission Pct 列，并按 Delete 键。 对 Employee（代表 Manager）列、Employees Collection 和 Job Id 执行同样的操作。 将 Department Id 列移到表的右端。 您的数据表将看起来与下图类似。

保存 employees.jsp 页面。