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.


1  首先,在git中配置用户名和邮箱。在Git Bash中输入如下: git config --global "xxxxxxx" git config --global user...
  • zyzn1425077119
  • zyzn1425077119
  • 2016年03月07日 15:52
  • 4577

git rebase master First, rewinding head to replay your work on top of it... error: The following unt

git rebase master First, rewinding head to replay your work on top of it... error: The following u...
  • hufeng825
  • hufeng825
  • 2012年11月24日 16:03
  • 6064

First, rewinding head to replay your work on top of it...

今天执行git pull时,碰到如下提示: First, rewinding head to replay your work on top of it... 参考链接:https://stack...
  • sanbingyutuoniao123
  • sanbingyutuoniao123
  • 2017年10月09日 21:52
  • 1701

我是第一个爱你的男人--the men in your life I loved you first

正因为是自己的博客,所以我才随心所欲。也主要是我写东西说话向来比较随性,所以写博客写常常不拘一格 切入正题之前先讲个笑话: 丽沙参加一个舞会,在舞厅里由于没有舞伴,只好干坐着。无聊极了,这时走...
  • 2011年12月27日 00:06
  • 1536

you need to resolve your current index first 解决办法

  • wanmj2
  • wanmj2
  • 2015年01月06日 09:36
  • 5019

error: you need to resolve your current index first

error: you need to resolve your current index first 从一个分支A切换到另一个分支B后,对切换后的B分支进行pull操作,因为pull操作实际上包含...
  • SHJSir
  • SHJSir
  • 2016年09月23日 15:22
  • 1701

JavaServer Faces技术与应用

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

JavaServer Faces(JSF)全面掌握(之扫盲篇)

大家好       这是我在CSDN上的第一篇文章,所以没敢起类似“xxx精通”之类的嚣张名字,只为帮助对JSF还一无所知的朋友了解这项新技术,以后还会不断推出新作品,希望大家多多支持。进入正题…… ...
  • jonkeyjohns
  • jonkeyjohns
  • 2003年12月11日 11:35
  • 1886

JavaServer Faces 2.2 requires Dynamic Web Module 2.5 or newer

统一解决Maven创建动态Web项目后产生的版本不匹配。1:问题如下2:解决方法 Go to project Build Path and change the Java Library versio...
  • github_34889651
  • github_34889651
  • 2016年06月13日 14:09
  • 7628

如何写第一篇研究论文 How to Write Your First Research Paper

How to Write Your First Research Paper Elena D. Kallestinova Author information ► Copyright ...
  • GarfieldEr007
  • GarfieldEr007
  • 2016年01月16日 14:45
  • 1318
您举报文章:Your First JavaServer Faces.