当前页面: 开发资料首页 → Netbeans 专题 → Introduction to the JSF Framework
摘要: This document is the first in a series that will take you through the basics of using the JavaServer Faces framework to code web applications in NetBeans IDE. Over the series of tutorials, we will create a web application called jAstrologer that takes a user's name and birthday and returns information like the user's zodiac sign, birthstone, and horoscope
The JavaServer Faces (JSF) framework is the standard Java API for building user interface components in web applications. Think of the JSF framework as a toolbox full of ready-to-use components that you can quickly and easily reuse in your web application. These components can be simple, like text input fields that get and store user data, to more complex components, like a formatted date field with a pop-up calendar. You embed the components into JSP pages and use the framework to handle navigation between different JSP pages.
In this section, you will learn to do the following:
This document assumes you have some basic knowledge of, or programming experience with, the following technologies:
For this tutorial you need to have the following software installed on your computer:
For this tutorial you need to register a local instance of Sun Java System Application Server with the IDE.
The IDE lets you add JSF support to a web application when you create the application or add support to an existing application. The Sun Java System Application Server 9 already includes the JSF libraries so you do not need to download them or install them in the application server. In this example, we will add JSF support when creating the application.
The IDE creates the web application. Expand the project's Libraries > Sun Java System Application Server node. Notice that the JSF libraries, like jsf-impl.jar, are added to the classpath. Expand Configuration Files and you will notice that the IDE has created a faces-config.xml file, which controls the behavior of JSF components in the web application. The IDE has also registered the Faces servlet in the web.xml deployment descriptor. The Faces servlet handles navigation between JSP pages that are controlled by the JSF framework.
We will create a new JSP page, called greeting.jsp, that welcomes the user and collects their information. We will then create a success.jsp page that congratulates the user on registering.
<%-- <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> --%>
To the following:
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
Notice that you can use the code completion to help add the tag name and attributes. The code completion can also help you add the URIs of the tab libraries.
<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>
Now we are going to create a page that simply says "Congratulations".
<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>
Notice that we are using plain HTML here, so there is no need to declare the JSF tag libraries yet.
Page navigation in the JSF framework is controlled by the faces-config.xml file, which is located under the Configuration Files node in the Projects window. For each page you set up a navigation rule which contains one or more navigation cases. For now, we will just map the submit action from the commandButton to success.jsp, so that the user sees a success message no matter what is entered in the fields.
The following code is entered in faces-config.xml:
<navigation-rule> <description> handle user input </description> <from-view-id>/greeting.jsp</from-view-id> </navigation-rule>
Click Add. The IDE enters the following code in 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>
Now let's set the IDE to display greeting.jsp when it runs the application and, finally, test the application.
When you click the Submit button, you see the following:
In the previous section we created a simple web application with JSF components. However, our web application does not really do anything interesting right now. In order to add rich functionality to your JSF web applications, you can associate your UI components with backing beans. A backing bean, also called a JSF managed bean, is a regular JavaBeans component whose bean properties and methods are available to the JSF components.
In our example, we will create a UserBean managed bean that will expose two bean properties: name and birthday.
<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>
public class UserBean { String name; String birthday;
<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>
<h1>Congratulations</h1> <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>
When you enter values and click Submit, success.jsp also displays the values you entered, as shown in the following diagram:
That is all for this introductory guide to the JSF framework in web applications. You can learn more by continuing with the jAstrologer series of JSF tutorials: