本文是介绍在 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 支持。
1. 选择 File > New Project (Ctrl-Shift-N),从 Web 类别中选择 Web Application,然后单击 Next。
2. 将项目命名为 jAstrologer,指定项目位置,将服务器设置为 Sun Java System Application Server,将 Java EE 版本设置为 Java EE 5,然后单击 Next。
3. 选中 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 页面。
创建欢迎页面
1. 右键单击项目节点,然后选择 New > JSP。将文件命名为 greeting,然后单击 Finish。确保已选择 JSP File (Standard Syntax) 选项。
2. 现在需要在 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。
3. 将 title 和 h1 标记的内容更改为 Welcome to jAstrologer。
4. 现在向文件添加 JSF 窗体。在 Palette 中,单击 JSF Form 按钮,将其拖动到 h1 标记下面,然后松开鼠标按键。在对话框中,选择 Empty Form 并单击 OK。IDE 将填写以下以粗体显示的代码:
<h1>Welcome to jAstrologer</h1>
<f:view>
<h:form>
</h:form>
</f:view>
</body>
5. 我们将使用 inputText 组件获取用户输入信息并使用 commandButton 组件提交该窗体。在 Source Editor 中,将 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>
现在我们将创建内容只显示“Congratulations”的页面。
1. 如上所述,创建新 JSP 文件。将此文件命名为 success。
2. 将此文件的内容更改为以下内容:
<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 即可,以使用户不管在字段中输入什么内容都能看见成功信息。
1. 双击 faces-config.xml,在 Source Editor 中打开该文件。
2. 在文件中右键单击任何位置,并选择 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>
3. 右键单击 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>