本文是介绍在 NetBeans IDE 中使用 JavaServer Faces 框架编码 Web 应用程序系列文章中的第一篇。通过本系列教程的学习,我们将创建名为 jAstrologer 的 Web 应用程序,此程序可获取用户的姓名和生日,然后返回用户的十二宫图、诞生石和星座等信息。
JavaServer Faces (JSF) 框架是标准的 Java API,用于在 Web 应用程序中构建用户界面组件。JSF 框架可被视为一个装满即开即用组件的工具箱,在 Web 应用程序中可轻松快捷地重用这些组件。这些组件可能很简单(如获取和存储用户数据的文本输入字段),也可能较复杂(如具有弹出日历的有格式的日期字段)。您可以将此类组件嵌入 JSP 页面,并且使用此框架处理不同 JSP 页面之间的导航。
在这一部分,我们将学习执行以下操作:
l 创建启用 JSF 框架的 Web 应用程序。
l 创建使用 JSF 组件获取用户输入信息的简单 JSP 页面。
l 配置页面导航。
l 创建 JSF 托管 bean,在 bean 属性中读写用户输入信息。
前提条件
本教程假定您基本了解以下技术,并且有使用这些技术编程的经验:
l Java 编程
l NetBeans IDE
本教程需要的软件
使用本教程,需要在计算机上安装以下软件:
l NetBeans IDE 5.5。
l Java Standard Development Kit (JDK) 5.0 版
l Sun Java System Application Server Platform Edition 9
使用本教程,需要注册使用该 IDE 的 Sun Java System Application Server 的本地实例。
教程练习
l 设置页面导航
使用 JSF 框架创建 Web 应用程序
使用 IDE,可以在创建应用程序或向已有应用程序添加支持时向 Web 应用程序添加 JSF 支持。Sun Java System Application Server 9 已包含 JSF 库,因此无需下载,也无需在应用程序服务器上进行安装。在本示例中,我们将在创建应用程序时添加 JSF 支持。
- 选择 File > New Project (Ctrl-Shift-N),从 Web 类别中选择 Web Application,然后单击 Next。
- 将项目命名为 jAstrologer,指定项目位置,将服务器设置为 Sun Java System Application Server,将 Java EE 版本设置为 Java EE 5,然后单击 Next。
- 选中 JavaServer Faces 复选框并单击 Finish。
IDE 将会创建 Web 应用程序。展开项目的 Libraries > Sun Java System Application Server 节点。注意,JSF 库(如 jsf-impl.jar)已添加到类路径中。展开 Configuration Files,此时显示 IDE 已创建了 faces-config.xml 文件,此文件可控制 JSF 组件在 Web 应用程序中的行为。IDE 也已在 Web.xml 部署描述符中注册了 Faces servlet。Faces servlet 可处理 JSF 框架控制的 JSP 页面之间的导航。
创建 JSP 页面
我们将创建欢迎用户和收集用户信息的新 JSP 页面,名为 greeting.jsp。然后创建祝贺用户注册成功的 success.jsp 页面。
创建欢迎页面
- 右键单击项目节点,然后选择 New > JSP。将文件命名为 greeting,然后单击 Finish。确保已选择 JSP File (Standard Syntax) 选项。
- 现在需要在 JSF 文件中声明 JSF 标记库。将以下代码:
<%--
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
--%>
更改为以下内容:
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
注意,可使用代码完成帮助您添加标记名称和属性。代码完成还可帮助您添加选项卡库的 URI。
- 将 title 和 h1 标记的内容更改为 Welcome to jAstrologer。
- 现在向文件添加 JSF 窗体。在 Palette 中,单击 JSF Form 按钮,将其拖动到 h1 标记下面,然后松开鼠标按键。在对话框中,选择 Empty Form 并单击 OK。IDE 将填写以下以粗体显示的代码:
- 我们将使用 inputText 组件获取用户输入信息并使用 commandButton 组件提交该窗体。在 Source Editor 中,将 h:form 元素的内容更改为以下内容:
<h1>Welcome to jAstrologer</h1>
<f:view>
<h:form>
</h:form>
</f:view>
</body>
<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>
现在我们将创建内容只显示“Congratulations”的页面。
- 如上所述,创建新 JSP 文件。将此文件命名为 success。
- 将此文件的内容更改为以下内容:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Congratulations</title>
</head>
<body>
<h1>Congratulations</h1>
<p>You've successfully registered with jAstrologer.</p>
</body>
</html>
注意,我们在此使用的是纯 HTML 格式,因此还无需声明 JSF 标记库。
设置页面导航
JSF 框架中的页面导航由 faces-config.xml 文件控制,该文件位于 Projects 窗口的 Configuration Files 节点下。设置了导航规则的每一页均包含一个或多个导航用例。现在,我们只需将提交操作从 commandButton 映射到 success.jsp 即可,以使用户不管在字段中输入什么内容都能看见成功信息。
- 双击 faces-config.xml,在 Source Editor 中打开该文件。
- 在文件中右键单击任何位置,并选择 Java ServerFaces > Add Navigation Rule。在 Rule from View 字段中键入 /greeting.jsp,并可选地输入规则描述。然后单击 Add。
此时在 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 > Add Navigation Case。设置以下内容:
m From View: /greeting.jsp
m From Outcome: submit
m To View: /success.jsp
单击 Add。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>