HOME / Docs & Support / NetBeans 6.1 / Web Application Documentation

JSF 框架简介

本文档是本系列中的第一篇，向您介绍使用 JavaServer Faces (JSF) 框架在 NetBeans IDE 中编写 Web 应用程序代码的基础知识。在此系列教程中，创建一个名为 jAstrologer 的 Web 应用程序，该应用程序带有用户的名字和生日并且返回诸如用户的星座、诞生石和八字之类的信息。

JavaServer Faces 框架是标准的 Java API，用于在 Web 应用程序中构建用户界面组件。JSF 框架可以被视为装满可用组件的工具箱，这些组件可以在您的 Web 应用程序中轻松快速地重用。这些组件可能非常简单，如获取和存储用户数据的文本输入字段，也可能非常复杂，如具有弹出日历的格式化日期字段。将这些组件嵌入到 JSP 页面中并使用该框架处理不同 JSP 页面之间的导航。

此页面上的内容适用于 NetBeans IDE 6.0/6.1

使用 JSF 框架创建 Web 应用程序
创建 JSP 页面
设置页面导航
配置和运行应用程序
钩住 Backing Bean
更多信息

要学习本教程，需要使用以下软件和资源。

软件或资源	所需版本
NetBeans IDE	Web 和 Java EE 安装版本 6.1 或版本 6.0
Java Development Kit (JDK)	版本 6 或版本 5
GlassFish	V2

注意：可以选择将 GlassFish 应用服务器版本 V2 更新版本 1 包含在 NetBeans IDE 的 Web 和 Java EE 安装中。

使用 JSF 框架创建 Web 应用程序

NetBeans IDE 允许您在创建新项目时向 Web 应用程序中添加 JSF 支持以及向在 IDE 中打开的任何现有 Web 应用程序中添加 JSF 支持。GlassFish 服务器已经包含 JSF 库，因此您不需要下载或在应用服务器中安装它们。在本示例中，创建新的 Web 应用程序项目时添加 JSF 支持。

选择“文件”>“新建项目”(Ctrl-Shift-N) 以打开“新建项目”向导。在“类别”下选择“Web”；在“项目”下选择“Web 应用程序”。单击“下一步”。
将项目命名为 jAstrologer，在您的计算机上为该项目指定一个位置，然后单击“下一步”。
在“服务器和设置”向导的第三步将服务器设置为 GlassFish V2 中，将 Java EE 版本设置为 Java EE 5，然后单击“下一步”。
选择“JavaServer Faces”选项并单击“完成”。

IDE 为整个应用程序创建一个项目模板，并在“源编辑器”中打开一个空的 JSP 页面 (welcomeJSF.jsp)。可以在“项目”窗口中查看新项目的逻辑结构 (Ctrl-1)。展开项目的“库”>“GlassFish V2”节点。注意，JSF 库（如 jsf-impl.jar）已添加到类路径中。展开“配置文件”并注意 IDE 已经创建了一个 faces-config.xml 文件，该文件控制 Web 应用程序中 JSF 组件的行为。IDE 还在 Web.xml 部署描述符中注册了 Faces Servlet。此 Faces Servlet 处理由 JSF 框架控制的 JSP 页面之间的导航。

“项目”窗口中显示的新的 jAstrologer 项目

创建 JSP 页面

创建一个名为 greeting.jsp 的新 JSP 页面，该页面的作用是欢迎用户并收集他或她的信息。然后创建一个 success.jsp 页面，该页面祝贺用户从表单中收到数据。

创建问候页面

在“项目”窗口中，右键单击项目节点并选择“新建”>“JSP”。将该文件命名为 greeting。确保选择“JSP 文件(标准语法)”选项并单击“完成”。IDE 将创建一个新的 JSP 文件并在“源编辑器”中打开该文件。另外，请注意将该文件添加到“项目”窗口中的“Web 页”节点下。
在“源编辑器”中，在 greeting.jsp 中声明 JSF 标记库。通过向文件顶部添加以下代码来执行该操作：
```
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>

<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
```
请注意，您可以利用 IDE 内置的代码完成支持。键入时，按 Ctrl-空格键可根据上下文列出建议。采用这种方式，代码完成可以帮助您添加标记名称和属性，如选项卡库的 URI。
将 title 和 h2 标记的内容更改为 Welcome to jAstrologer。
现在，向该文件添加一个 JSF 表单。在“组件面板”(Ctrl-Shift-8) 中，展开 JSF 类别。可以将“组件面板”中的项目直接拖放到“源编辑器”中。单击“JSF 表单”按钮，将项目拖动到 h2 标记下面的某个点，然后释放鼠标按钮。在显示的对话框中，保持“空表单”处于选中状态并单击“确定”。IDE 填充以下代码（以粗体显示）：
```
<h2>Welcome to jAstrologer</h2>



<f:view>

<h:form>

</h:form>

</f:view>
```
可以使用 inputText 组件获取用户输入，使用 commandButton 组件提交表单。在“源编辑器”中，对 <h:form> 标记的内容做出以下更改（更改以粗体显示）：
```
<f:view>

<h:form>

<p>Enter your name:<h:inputText value="name" /></p>

<p>Enter your birthday:<h:inputText value="birthday" /></p>

<h:commandButton value="Submit" action="submit" />

</h:form>

</f:view>
```
要格式化您的代码，请在“源编辑器”中右键单击，然后选择“格式化”(Alt-Shift-F)。

创建成功页面

现在创建一个内容只为“Congratulations”的 JSP 页面。

如上所述，创建一个新的 JSP 文件。将该文件命名为 success。

对该文件的内容做出以下更改：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Congratulations</title>

</head>

<body>

<h2>Congratulations</h2>



<p>You've successfully registered with jAstrologer.</p>

</body>

请注意，到目前为止该文件只包含纯 HTML，因此尚不需要声明 JSF 标记库。

设置页面导航

JSF 框架中的页面导航由 faces-config.xml 控制。对于项目中的每个 JSP 页面，在 faces-config.xml 中设置一个导航规则，该规则包含一个或多个导航案例。此处，您只需将 commandButton 中的提交操作映射到 success.jsp，以便无论在字段中输入什么内容，用户都能看到一个成功消息。

在“项目”窗口中，双击 faces-config.xml 以在“源编辑器”中打开该文件。在该文件上面的工具栏中，单击 XML 以显示纯 XML 形式的文件。
右键单击该文件中的任意位置并选择“Java ServerFaces”>“添加导航规则”。在“视图的规则”字段中键入 /greeting.jsp，可以选择输入规则的描述。

单击“添加”。以下代码便输入到 faces-config.xml 中：
```
<navigation-rule>

<description>

handle user input

</description>

<from-view-id>/greeting.jsp</from-view-id>

</navigation-rule>
```
再次在 faces-config.xml 中右键单击并选择“Java ServerFaces”>“添加导航案例”。在显示的对话框中，设置以下内容：
- 从视图：/greeting.jsp
- 从结果：submit
- 到视图：/success.jsp
单击“添加”。IDE 会向 faces-config.xml 中输入以下代码（更改以粗体显示）：
```
<navigation-rule>

<description>

handle user input

</description>

<from-view-id>/greeting.jsp</from-view-id>

<navigation-case>

<from-outcome>submit</from-outcome>

<to-view-id>/success.jsp</to-view-id>

</navigation-case>

</navigation-rule>
```

配置和运行应用程序

将 IDE 设置为运行应用程序时显示 greeting.jsp 并在最后测试应用程序。

在“项目”窗口中，右键单击项目节点并选择“属性”。
单击“运行”节点并在“相对 URL”字段中键入 /faces/greeting.jsp。这将允许您在 IDE 中为应用程序指定入口点。单击“确定”。
右键单击项目节点并选择“运行”(F6)。IDE 构建项目、启动应用服务器、部署应用程序并在默认的外部浏览器中显示以下页面：

单击“提交”按钮时，会看到以下内容：

钩住 Backing Bean

在上一部分中您创建了一个具有 JSF 组件的简单 Web 应用程序。但是，此 Web 应用程序并没有执行什么真正让人感兴趣的操作。为了向您的 JSF Web 应用程序中添加丰富的功能，您可以将您的 UI 组件与 backing bean 关联。backing bean 也称为 JSF 托管 bean，它是一个普通的 JavaBeans 组件，其 bean 属性和方法可用于 JSF 组件。

在此部分中，创建一个 UserBean 托管 bean，它将显示两个 bean 属性：name 和 birthday。

在“项目”窗口中，右键单击项目节点并选择“新建”>“其他”(Ctrl-N)。在“JavaServer Faces”类别下，选择“JSF 托管 Bean”模板并单击“下一步”。
将该 bean 命名为 UserBean 并创建一个名为 astrologer.user 的新包以在其中放置该 bean。保留其余设置为其默认值并单击“完成”。

IDE 在“源编辑器”中打开 UserBean.java 并向 faces-config.xml 中添加以下 bean 声明：
```
<managed-bean>

<managed-bean-name>UserBean</managed-bean-name>

<managed-bean-class>astrologer.user.UserBean</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>
```
将以下字段声明（以粗体显示）添加到 UserBean.java 中：
```
public class UserBean {



String name;

String birthday;
```
为字段生成 getter 和 setter：右键单击文件中的任意位置并选择“重构”>“封装字段”。在显示的对话框中，选择 name 和 birthday 的 getter 和 setter 选项，然后单击“重构”。

IDE 将字段的访问级别切换为 private 并直接在该文件中创建 getter 和 setter 方法。

在 greeting.jsp 中，进行以下更改（以粗体显示）。

<f:view>

<h:form>

<p>Enter your name:<h:inputText value="#{UserBean.name}" /></p>

<p>Enter your birthday:<h:inputText value="#{UserBean.birthday}" /></p>

<h:commandButton value="Submit" action="submit" />

</h:form>

</f:view>

当您输入更改时，可以通过按 Ctrl-空格键并选择可用的选项利用 IDE 对 UserBeans.java 及其属性的代码完成支持。

将 JSF taglib 声明添加到 success.jsp 中。可以从 greeting.jsp 中复制并粘贴它们。
通过单击“组件面板”窗口中的“JSF 表单”按钮 (Ctrl-Shift-8) 并将其拖动到“源编辑器”中 <h2> 标记下面的某个点来向 success.jsp 中添加一个空的 JSF 表单。

对 success.jsp 进行以下更改（以粗体显示）：

<h2>Congratulations</h2>



<f:view>

<h:form>

<p>You've successfully registered with jAstrologer.</p>

<p>Your name is <h:outputText value="#{UserBean.name}" /></p>

<p>Your birthday is <h:outputText value="#{UserBean.birthday}" /></p>

</h:form>

</f:view>

在“项目”窗口中，右键单击该项目节点并选择“运行”。当重新部署和运行应用程序时，会在浏览器中显示相同的 greeting.jsp 页面。当您输入值并单击“提交”时，success.jsp 现在会显示您输入的值，如下所示：

将反馈发送给我们

JSF 框架简介

使用 JSF 框架创建 Web 应用程序

创建 JSP 页面

创建问候页面

创建成功页面

设置页面导航

配置和运行应用程序

钩住 Backing Bean

更多信息

Training

Support

Documentation

More