使用 JDeveloper 的 JavaServer Faces 简介

目的

本教程将向您介绍使用 JavaServer Faces (JSF) 构建客户端应用程序的基础知识。

所需时间：

大约 20 分钟

主题

本教程包括下列主题：

	概述
	前提条件
	构建 JavaServer Faces 项目
	构建 JavaServer Faces 页面
	设计应用程序页面流和 Login 页面
	构建 Hello 页面
	运行应用程序
	定义条件导航
	总结

查看屏幕截图

将鼠标置于此图标上以加载和查看本教程的所有屏幕截图。（警告：因为此操作会同时加载所有屏幕截图，所以网速较慢时，响应时间可能会比较长。）

注：此外，您还可以在下列步骤中将鼠标放在每个单独的图标上，从而仅加载和查看与该步骤相关的屏幕截图。可以通过单击各个屏幕截图来将其隐藏。

概述

JavaServer Faces (JSF) 是用于构建 Web 应用程序的标准 Java 框架。它通过提供以组件为中心的方法开发 Java Web 用户界面来简化开发。 通过将构建良好的模型-视图-控制器 (MVC) 设计模式集成到体系结构中，JSF 还可以确保设计的应用程序具有更好的可维护性。 JavaServer Faces 真正的功能依赖于它的用户界面组件模型，其中的应用程序由组件集合构建，可以使用多种方式针对多个客户端类型呈现。

在本教程中，您将创建三个 JSF 页面。第一个页面是 Welcome 页面，该页面将充当应用程序的起点。第二个页面是 Login 页面，有两个域；一个用于用户名，一个用于口令。该页面使用 Java bean 使这两个值可用于应用程序的其他页面。第三个页面将返回一条 Hello 消息，并显示存储在辅助 Bean 中的用户名。您还将定义从 Welcome 页面到 Login 页面、再到 Hello 页面的 JSF 导航链接。

返回主题列表

前提条件

开始本教程之前，您应该：

返回主题列表

构建 JavaServer Faces 项目

该主题将引导您逐步创建一个使用 JavaServer Faces 的 Web 应用程序。要为 JSF 视图创建一个新的应用程序和项目，执行以下步骤：

1.	要创建新的应用程序，在 Applications Navigator 中右键单击 Applications 节点，并选择 New Application... 选项。
2.	将该应用程序命名为 JSFIntro。保留 Application Template 域的默认值 No Template，单击 OK 创建应用程序。
3.	在 Create Project 对话框中，输入 view 作为项目名，然后单击 OK。项目是关联文件的逻辑分组。该项目包含的文件表示基于 JSF 的视图。
4.	单击 Save All 保存您的工作。

返回主题列表

构建 JavaServer Faces 页面

该子主题将引导您完成创建 JSF 页面的基本步骤。首先，您将创建页面，然后为其添加详细信息。

	创建 Welcome 页面
	在 Welcome 页面中添加详细信息

返回主题列表

创建 Welcome 页面

要为应用程序创建 Welcome JSF 页面，执行以下步骤：

1.	右键单击 view 项目，从上下文菜单中选择 New...
2.	在 New Gallery 中，展开 Web Tier 节点。在 Categories 列表中选择 JSF，并在 Items 列表中选择 JSF JSP。单击 OK。
3.	如果显示了 Create JSF JSP 向导的 Welcome 页面，单击 Next 继续。（如果不希望在以后看到该页面，可以选择 Skip this Page Next TIme 复选框，然后再继续。）
4.	在向导的 Web Application 页面中，选择 Servlet 2.4\JSP 2.0 (J2EE 1.4) 选项。单击 Next 继续。
5.	在向导的 JSP File 页面中， 将该页面命名为 welcome.jsp 。对于 Type，选择 JSP Page 选项，然后单击 Next。 注意，Add Mobile Support 复选框允许您为移动应用程序创建 JSF 页面，但本教程不需要这样做。
6.	在向导的 Component Binding 页面中，选择 Do Not Automatically Expose UI components in a Managed Bean 选项。单击 Next。
7.	在向导的 Tag Libraries 页面中，您将看到为该 JSP 页面启用的标记库。因为这将是一个支持 JSF 的页面，因此预先选中了 JSF Core 和 JSF HTML 库。 选择标记库只是将必要的 JSF taglib 指令插入页面。JDeveloper 还附带有 JSF 组件的其他 ADF Faces 集。您可以通过 Tools 菜单的 Manage Libraries 选项添加其他 JSF 组件。 您只需要默认的 taglib 指令，因此单击 Nex t 继续。
8.	在向导的 HTML Options 页面中，接受所有默认值。单击 Finish。
9.	您现在将在可视化编辑器中看到该支持 JSF 的 JSP ( welcome.jsp ) 的框架。
10.	在 Applications Navigator 中展开 view 项目节点，并查看其内容。您可以看到 welcome.jsp 。在 WEB-INF 文件夹中，有一个名为 faces-config.xml 的新文件。
11.	单击 Save All 保存您的工作。

返回主题

在 Welcome 页面中添加详细信息

现在，您已经创建了页面，下面执行以下步骤为其添加详细信息：

1.	在 Welcome 页面中添加一个标题。 在页面的顶部输入以下文本： Welcome to the HR JSF Application 。 从编辑器窗口左上角的 Block Format 下拉列表中选择 Heading 2，将文本格式设置为 H2 。
2.	对页面应用样式表。为此，在 Component Palette 下拉列表中选择 CSS 库。（如果没有看到 Component Palette，请选择 View > Component Palette。） 现在，将 JDeveloper 样式表从 Component Palette 拖到您的页面。您应该看到页面外观立即改变（如果没有，选择该页面，然后选择 View > Refresh）。
3.	接下来，将一个 JSF commandButton 组件拖到该页面上。 在 Component Palette 中，选择组件的 JSF HTML 列表。然后，将 Command Button 组件拖到页面的标题文本下。 注意，当您将鼠标放在 Component Palette 中的组件上方时会显示帮助文本。
4.	在 Property Inspector（如果没有显示，请选择 View > Property Inspector）中，将 CommandButton 的 Value 属性更改为 Proceed to Login 。 在可视编辑器中工作时，请注意 JSF 组件的显示就是它们在运行时的显示（例如，作为一个按钮），并且这些组件与 Property Inspector 中的属性同步。
5.	将 Action 属性更改为 login 。根据您在以后创建的导航规则，在运行时单击时，这使用户能够前进到另一页。
6.	单击可视编辑器底部的 Source 选项卡，转至页面的源代码视图。 在靠近源代码页面顶部的位置上，有 2 个针对标准或基本 JSF 组件库的 taglib 指令，向导默认选择这些组件库，您可以使用它们创建页面。这些库是规范的一部分，与 JSF 引用实现一同提供。具体的库是 Core 库和 HTML 库。
7.	向下滚动页面的主体可以看到以下标记： 这是 JSP 标记，该标记提供了到 JSF commandButton 用户界面组件的钩子。当该标记执行时，它将提供一个可点击的按钮，该按钮可以执行诸如调用 Java 方法或执行 JSF 导航规则之类的任务。 在该示例中，该按钮将执行到另一个页面的导航。这是通过在 Property Inspector 中设置 commandButton 的 Action 属性，然后定义与动作的值相对应的导航规则来实现的。在本例中，您已经将 Action 属性的值设为 login。稍后，您将定义一个导航规则，以使用同一个值导航到 Login 页面。
8.	单击 Save All 保存您的工作。

返回主题

返回主题列表

设计应用程序页面流和 Login 页面

该子主题将引导您使用 JSF 页面流编辑器直观地设计应用程序。JSF 页面流编辑器使您能够通过定义导航规则来设计整个应用程序的页面流。

	创建页面流和 Login 页面
	在 Login 页面中添加详细信息

返回主题列表

创建页面流和 Login 页面

您可以在 JSF Navigation Diagram 上控制应用程序的页面流，JSF Navigation Diagram 是 faces-config.xml 文件的直观表示。 faces-config.xml 文件是主要 JSF 应用程序配置文件，其中定义了导航规则和托管 bean。

在 JSF Navigation Diagram 可视编辑器（也称为页面流编辑器）中，您可以通过拖到图中来合并现有页面。还可以使用 Component Palette 直接在图上创建新页面。

faces-config.xml 中还定义了托管 bean，它是 JSF 的关键部分。只要包含无参数构造函数，任何 Java 对象都可以是托管 bean。在创建页面时，您可以自动创建具有您在页面上创建的对象引用的托管 bean。这种类型的托管 bean 称为辅助 bean，它还提供了放置代码的位置。在许多情况下，辅助 bean 只包含操作代码，不包含对 UI 组件的引用或者对一些您需要以编程方式操作的组件的引用。托管 bean 还可以用于保存请求、应用程序或会话的信息。在该应用程序中，您将使用托管 bean 保存用户名的值，并执行验证口令的代码。

要定义页面流并创建 Login 页面，执行以下步骤：

1.	在 Applications Navigator（ Web Content > WEB-INF 文件夹）中，找到 faces-config.xml 文件。双击该文件调用 JSF 导航编辑器。 可视编辑器将显示一个屏幕，其中显示了帮助消息。 注：打开页面流编辑器的另一个方法是，右键单击 view 项目，并从上下文菜单中选择 Open JSF Navigation。
2.	在继续之前，请注意编辑器在屏幕底部有 4 个选项卡： 默认视图是 faces-config 编辑器的 Diagram 视图，该视图允许您直观地编辑应用程序的导航规则。您可以直观地或使用 Overview 控制台来定义导航规则。 单击 Overview 选项卡将显示一个控制台类型的界面，它允许您将所有类型的配置注册到 faces-config.xml 文件中，包括托管 bean、导航规则和其他项（如自定义验证器或转换器）。 Source 选项卡使您可以直接利用增强的 XML 编辑功能（包括标记完成）来编辑 XML。 History 选项卡是所有编辑器窗口通用的，它显示最近编辑的历史记录。
3.	从 Applications Navigator 中将最初的 welcome.jsp 页面拖到图中。
4.	在图中直接创建 login.jsp。 为此，将一个 JSF Page 项目从 Component Palette 拖到图上。 通过在图上单击其名称并改写，将名称更改为 /login.jsp 。您只需键入 login；在您按 [Enter] 时，JDeveloper 会自动添加一个前导斜线和 .jsp 扩展名。 请注意，页面上有一个黄色的标记，这表示还没有实际创建它，只是存在于图中。
5.	通过单击（不是拖动）Component Palette 中的 JSF Navigation Case 项，然后单击图中的 welcome.jsp 来创建导航规则。您将看到一条连接线开始出现。然后，单击 login.jsp 完成连接。
6.	在 Property Inspector 中，将默认的 From Outcome 值从 success 更改为 login ，以匹配您为 welcome.jsp 页面上 commandButton 的 Action 属性设置的值。 重命名导航示例的另一个方法是，在图上单击其名称并改写。您不需要输入前导连字符；JDeveloper 会在您按 [Enter] 时自动添加。
7.	在图上创建 Hello 页面。将一个 JSF Page 项拖放到页面流图上，并将其命名为 /hello.jsp 。
8.	通过单击 Component Palette 中的 JSF Navigation Case 项，然后单击图上的 login.jsp ，来创建导航规则。单击 hello.jsp 完成连接。
9.	在 Property Inspector 中，将 From Outcome 值更改为 hello ，或者通过在图中改写名称来更改。
10.	检查您刚刚定义的导航规则的语法。单击 faces-config.xml 文件的 Source 选项卡，查看指定的新导航规则。 请注意，一些 和 标记由于 login.jsp 和 hello.jsp 不存在报告了一个警告。
11.	单击 Diagram 选项卡返回可视编辑器。 双击图中的 login.jsp 创建 login.jsp 页面，以调用先前使用的 JSF JSP 向导。
12.	单击 Next 跳过 Create JSF JSP 向导的 Welcome 页面。 在向导的 JSP File 页面中，确保选中 JSP Page 选项，然后单击 Next。
13.	在向导的 Component Binding 页面中 ，指定您希望页面的组件能够与您同时创建的托管 bean 自动绑定在一起。 为此，选择 Automatically Expose UI Components in a New Managed Bean 选项。接受 Bean 名称和类的默认值。确保将程序包命名为 view.backing。单击 Finish。
14.	在设计编辑器中打开新的登录页面。
15.	单击 Save All 保存您的工作。

返回主题

在 Login 页面中添加详细信息

该页面使用户在输入有效的用户名和口令时能够导航到 hello.jsp 。

1.	添加一个标题 Application Login ，并像以前一样用 H2 对其进行格式设置。然后像以前一样应用 JDeveloper CSS。 注意，您还可以通过将 jdeveloper.css 从 Applications Navigator（在 Web Content > css 文件夹中）拖到图上来应用 JDeveloper 样式表。
2.	要构建 Login 页面，您将使用在 JSF 规范中提供的一组基本组件： panelGrid、 outputLabel、 inputText、 inputSecret、message 和您先前使用的 commandButton。 panelGrid 将用作一个表结构来安排登录域的布局。（此外，HTML 表也可以用作登录域的容器，但 panelGrid 代码更紧凑。） 在 Component Palette 中，确保显示了 JSF HTML Palette 页面。将 Panel Grid 组件拖到页面标题下，以调用 Create PanelGrid 向导。
3.	单击 Next 跳过向导的 Welcome 页面。 在向导的 PanelGrid Options 页面上，选择 Create empty panel grid 选项，并将 Number of Columns 设置为 3 。单击 Finish 将组件添加到页面上。 然后，您应该在页面上看到一个矩形。
4.	从 Component Palette 中，将以下组件按顺序拖到页面上的 panelGrid 中： Output Label Input Text
5.	在 Output Label 的 Property Inspector 中，将 value 属性更改为 User Name 。 将 Input Text 的 Required 值更改为 true。
6.	将 Message 组件从 Component Palette 拖到页面上的 panelGrid 中。在 Insert Message 对话框中，从 For 域旁边的下拉列表中选择 inputText1。单击 OK。 如果没有为 User Name 域指定值，该消息组件会显示一个错误。
7.	从 Component Palette 中，将以下组件按顺序拖到页面上的 panelGrid 中： Output Label Input Secret
8.	在 Property Inspector 中，将 Output Label 的 Value 属性更改为 Password ， 并将 Input Secret 域的 Required 值设置为 true。
9.	从 Component Palette 下拉列表中选择 JSF Core。将 Validate Length 组件从 Component Palette 拖到页面上的 Input Secret 域中。 在 Property Inspector 中，指定 4 为最小长度、 8 为最大长度。
10.	从 Component Palette 下拉列表中选择 JSF HTML。将 Message 组件从 Component Palette 拖到页面上的 panelGrid 中。在 Insert Message 对话框中，从 For 域旁边的下拉列表中选择 inputSecret1。单击 OK。 如果没有为口令指定值，或者口令字符串的长度少于 4 位或多于 8 位，该消息将返回错误。
11.	将一个 Command Button 拖到 panelGrid 中。页面现在看起来应与下图类似：
12.	将 Command Button 的 Value 属性更改为 Hello Me 。然后，从 Action 属性下拉列表中选择 hello 。 该下拉列表包含页面的所有有效 From Outcomes，正如您在 JSF Navigation Diagram 中指定的那样。
13.	单击 Save All 保存您的工作。

返回主题

返回主题列表

构建 Hello 页面

接下来，创建第三个页面 hello.jsp 。该页阐释了如何使用一个辅助 bean 显示来自另一页面的信息。Hello 页面将显示用户输入 Login 页面的用户名。用户名存储在 Login 页面的辅助 bean 中。

要构建 Hello 页面，执行以下步骤：

1.	单击编辑器中的 faces-config.xml 选项卡转到 JSF Navigation Diagram。双击图面中的 hello.jsp 以调用 Create JSF JSP 向导。
2.	如果显示该向导的 Welcome 页面，请单击 Next 继续。 在向导的 JSP File 页面上，选择 JSP Page 选项，然后单击 Next。
3.	在向导的 Component Binding 页面上，选择 Do Not Automatically Expose UI components in a Managed Bean 选项。单击 Finish。
4.	这将在可视编辑器中打开支持 JSF 的 JSP ( hello.jsp ) 的框架。
5.	将一个 H2 标题 Hello 添加到页面中，并再次添加 JDeveloper 样式表。
6.	在 Hello 文本旁边添加一个空格，然后将 Output Text 组件从 Component Palette 中的 JSF HTML 库拖到页面上空格的右侧，与文本位于同一行。
7.	对于 OutputText，在 Property Inspector 中选择 Value 属性，然后单击 Property Inspector 工具栏中的 Binding to Data 。
8.	在 Value 对话框，展开 JSF Managed Beans > backing_login > inputText1，然后选择 value。单击右箭头 将选定项移入 Expression 域。单击 OK。
9.	在 Hello 行下面的新行中，添加新文本“ You've successfully completed this Intro to JSF tutorial ”。
10.	单击 Save All 保存您的工作。

返回主题列表

运行应用程序

返回主题列表

定义条件导航

在本部分中，您将代码添加到 Login 页面的辅助 bean，以测试输入的口令是否与预期的值相符。如果相符，则显示一个页面。否则，显示一个错误消息。

1.	单击编辑器中的 faces-config.xml 选项卡，以返回 JDeveloper 并打开 JSF Navigation Diagram。
2.	通过单击 Component Palette 中的 JSF Navigation Case 项，然后单击图中的 login.jsp ，来创建导航规则。单击 welcome.jsp 完成连接（单击希望线条转向的转折点）。 注：要为现有连接器添加拐点，可以按住 Shift 键单击您希望创建新拐点的行。要删除拐点，可以按住 Shift 键单击要删除的拐点。
3.	在 Property Inspector 中，将 From Outcome 的默认值更改为 failed ，或者通过在图中改写名称来更改。
4.	单击编辑器的 login.jsp 选项卡，打开该页面的 Design 视图，选择 Hello Me 按钮。 在 Property Inspector 中，通过从下拉列表中选择 来删除 Action 属性的 hello 值。
5.	在 Structure 窗口（默认显示在 Applications Navigator 下方）中，右键单击与 Hello Me 按钮对应的 h:commandButton，并从上下文菜单中选择 Create Method Binding for Action 选项。（如果 Structure 窗口没有出现，则选择 View > Structure。）
6.	在 Bind Action Property 对话框中，接受默认值并单击 OK。
7.	Login.java 类（Login 页面的辅助 bean）将在 Source 编辑器中打开，并显示为 commandButton 添加的新语句。
8.	在 // Add event code here 注释下面，删除 return null 语句，并键入 ife ... ...然后按 [Ctrl] + [Enter] 以自动生成 if - else 语句的结构。
9.	由于 Login 页面有两个导航示例，因此您可以从 commanButton 访问两个可能的目标页面。您需要根据条件以编程方式导航到 Hello 页面或 Welcome 页面。为此，返回一个与 Login 页面的一个 From Outcomes 相符的字符串： hello 或 failed 。 按如下方式更改 if 语句代码： if (inputSecret1.getValue().toString().equals("welcome")) { return "hello";
10.	按如下方式更改 else 语句代码： } else { String message = "Invalid login"; FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message)); return "failed"; 按 [Alt]+[Enter] 两次，接受导入 javax.faces.context.FacesContext 和 javax.faces.application.FacesMessage 的建议。
11.	您的代码现在应如下所示： if (inputSecret1.getValue().toString().equals("welcome")) { return "hello"; } else { String message = "Invalid login"; FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message)); return "failed"; }
12.	单击编辑器中的 welcome.jsp 选项卡，然后单击 Design 选项卡打开 Welcome 页面的设计视图。在 Proceed to Login 按钮的上面，添加一个新的空行。然后，从 Component Palette 的 JSF HTML 库中，将一个 Messages 组件拖到空白行。 在运行时，Messages 组件会显示可能为页面返回的任何错误消息。
13.	打开 JSF Navigation Diagram，右键单击 Welcome 页面，并从上下文菜单中选择 Run。
14.	单击 Proceed to Login，并通过提供名称和错误的口令值来测试 Login 页面。然后单击 Hello Me。
15.	Welcome 页面现在应显示登录错误。
16.	单击 Proceed to Login，这次输入您的名称和 welcome 口令。单击 Hello Me。 Hello 页面应显示您的名称。

总结

在本教程中，您学习了如何使用 JavaServer Faces 构建 Web 界面。

您已学会了如何：

	构建 JavaServer Faces 页面
	添加导航示例以控制页面间的导航
	使用辅助 Bean 在页面间传递信息
	对数据输入域应用基本验证规则
	添加辅助 bean 代码以根据条件确定显示哪个页面

返回主题列表

将鼠标置于该图标上可以隐藏所有的屏幕截图。