Your First JavaServer Faces.

原创 2005年05月31日 14:24:00


In this article, I’d like to introduce an easy application written by using JSF pages. This application would show a simple form with one text field and submit button. Users enter their name in the text field and submit the form and then they would see a welcome page with their name on it.

First, you should download the “JavaServer Faces Reference Implementation” from It’s a zipped file. After you download it and decompress it, look into the directory “lib”. Copy all the jar files into your web application’s “WEB-INF/lib” directory. You also need jstl.jar and standard.jar files. You could easily get them from the war file in the “samples” directory. Unzip one war file and look for jstl.jar and standard.jar in the “WEB-INF/lib” directory. Copy them into your web application’s “WEB-INF/lib” directory too. In Summary, You need the jar files.


Now you need to define your web application in the “WEB-INF/web.xml” file. All JSF pages requested should be processed by a special servlet “FacesServlet”. You should define it in the “web.xml”.

<?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns=""     xmlns:xsi=""     xsi:schemaLocation=""     version="2.4">      <description>         JSF Demo    </description>     <display-name>JSF Demo</display-name>     <servlet>        <servlet-name>Faces Servlet</servlet-name>        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>        <load-on-startup>1</load-on-startup>    </servlet>        <servlet-mapping>        <servlet-name>Faces Servlet</servlet-name>        <url-pattern>*.faces</url-pattern>    </servlet-mapping>        <welcome-file-list>        <welcome-file>index.html</welcome-file>    </welcome-file-list> </web-app>

In the “web.xml”, we define all requested URL with suffix “.faces” should be processed by FacesServlet. In this first JSF example, I’d like to use JSP for the view technology. The FacesServlet would strip off the suffix “.faces” and load the pages with suffix “.jsp”. For example, if you request “/index.faces”, the “/index.jsp” would be processed in the end.

Now lets’ come out with the first JSF page, named with “pages/index.jsp”.

<%@ taglib uri="" prefix="f" %><%@ taglib uri="" prefix="h" %><html><head><title>JSF Demo</title></head><body>    <f:view>        <h:form>            <h3>Please enter your name.</h3>             name: <h:inputText value="#{}"/><p>            <h:commandButton value="Login" action="login"/>        </h:form>    </f:view></body></html>

If this page, I use two JSF’s standard tag libraries, “core” and html“. The <f:view> tag creates the top-level view. Currently, just know its function is a little like the HTML’s <html> tag. All JSF’s tags are begun with it.
<h:form> creates a HTML form and <h:inputText> provide a text field. Take a look at the “#{}”. It tells the JSF implementation to link the text field with the name property of a user object. We’ll see how to link them soon.

<h:commandButton> provide an submit button. What you should note is the action attribute. It’s used to specify the navigation rule. The navigation rules are defined in the faces-config.xml file. It should be located in “WEB-INF” directory. This application’s faces-config.xml file is shown below.

<?xml version="1.0"?><!DOCTYPE faces-config PUBLIC    "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"    ""><faces-config>    <navigation-rule>        <from-view-id>/pages/index.jsp</from-view-id>        <navigation-case>            <from-outcome>login</from-outcome>            <to-view-id>/pages/welcome.jsp</to-view-id>        </navigation-case>    </navigation-rule>            <managed-bean>        <managed-bean-name>user</managed-bean-name>        <managed-bean-class>onlyfun.caterpillar.UserBean</managed-bean-class>        <managed-bean-scope>session</managed-bean-scope>    </managed-bean></faces-config>

See the <from-view-id>, it’s defined as “/pages/index.jsp”. It tells FacesServlet that while there’s a request from “/pages/index.jsp” with an action attribute “login”, defined in <from-outcome>, it should be navigated to “/pages/welcome.jsp”, defined in <to-view-id>.

You also see the <managed-bean>. It defines the bean used by the JSF pages. The bean is in session scope, defined in <managed-bean-scope>. The UserBean is defined like this.

package onlyfun.caterpillar;public class UserBean {    private String name;        public void setName(String name) { = name;    }        public String getName() {        return name;    }}

The bean’s name “user” is defined in <managed-bean-name>. You could use #{} to get the bean’s name property in JSF pages. Just as you see in the “pages/index.jsp”.

OK! We still have one page “pages/welcome.jsp” not written. It’s shown below.

<%@ taglib uri="" prefix="f" %><%@ taglib uri="" prefix="h" %><html><head><title>JSF Demo</title></head><body>    <f:view>        <h3>Hello! <h:outputText value="#{}"/>!</h3>        <h3>Welcome your JavaServer Faces!</h3>    </f:view></body></html>

The <h:outputText> is used to output the name property of user bean.

Now startup your Servlet container and point your browser to the application’s URL, such as http://localhost:8080/jsfDemo/pages/index.faces. The “pages/index.jsp” would be loaded first. After you enter your name in the text field of “pages/index.jsp” and click the submit button, your name would be stored in the user bean’s name property. Then the FacesServlet navigate from “pages/index.jsp” to “pages/welcome.jsp” according to navigation rules in the faces-config.xml. The “pages/welcome.jsp” would get the name property from the user bean and show it in the page.

JavaServer Faces技术与应用

JavaServer Faces技术与应用  什么是框架(Framework):一堆组件协同运作的机制,该系统更具扩充性、维护性。(J2EE、Struts……)J2EE(EJB,JMS,JavaMai...
  • sjhasp
  • sjhasp
  • 2005年06月20日 14:50
  • 796

【Java】--Javaserver faces(JSF) 03

要创建一个简单的JSF应用程序,我们将使用maven-archetype-webapp插件。在下面的示例中,我们将在C:\ JSF文件夹中创建一个基于maven的Web应用程序项目。创建项目 我们打...

JDeveloper使用EJB,JPA,JavaServer Faces技术开发Web应用程序实例

概要:在JDeveloper 11gR1中,使用EJB, JPA and JavaServer Faces技术开发一个Web应用程序。Data Model,使用EJB diagrammer, EJB ...

JavaServer Faces (JSF)

JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架。

读《JavaServer Faces 核心编程(第3版)》一书的记录—— 第 4 章 标准 JSF 标签——案例 select

读《JavaServer Faces 核心编程(第3版)》一书的记录—— 第 3 章 导航——案例 javaquiz

读《JavaServer Faces 核心编程(第3版)》一书的记录—— 第 5 章 Facelets——案例 planets

介绍JavaServer Faces 表达式语言(JSF EL)

JSF中我们使用各种标签(Tag)来使用内建的或者自定义的组件,比如常用的h:outputText之类,你可以在faces-config.xml等配置文件中声明受管的JavaBean(Managed ...
  • pfyuit
  • pfyuit
  • 2012年09月24日 12:58
  • 749

读《JavaServer Faces 核心编程(第3版)》一书的记录—— 第 4 章 标准 JSF 标签——案例 messages

读《JavaServer Faces 核心编程(第3版)》一书的记录—— 第 4 章 标准 JSF 标签——案例 javascript

您举报文章:Your First JavaServer Faces.