JSF :- Sample web application

//  Sample web application which gives basic information about jsf 

Step 1 :- Cretae a dynamic webproject in eclipse if you have plugin for faces create a faces project

Step 2 :- Download jsf-api-2.0.jar,jsf-impl.jar  these two jars and keep it in the lib folder

Step 3 :- Change the content in the web.xml in the following way

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <display-name>JsfTutorial1</display-name>
    <context-param>
        <description>
        The location where state information is saved.
Valid values are 'server' (typically saved in HttpSession) and 'client' (typically
saved as a hidden field in the form.
Default is server.</description>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param>
    <context-param>
        <description>
        Comma-delimited list of context-relative resource paths under which the JSF implementation
will look for application configuration resources, before loading a configuration resource
named /WEB-INF/faces-config.xml (if such a resource exists).</description>
        <param-name>javax.faces.CONFIG_FILES</param-name>
        <param-value></param-value>
    </context-param>
    <context-param>
        <description>
        The default suffix for extension-mapped resources that contain JSF components.
Default is '.jsp'.</description>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>
    <context-param>
        <description>
        A human readable string describing where this particular JSF application is
in the software development lifecycle.
Valid values are 'Development', 'UnitTest', 'SystemTest' and 'Production'.
Default is 'Production'.
This parameter is not available in JSF 1.x.</description>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <context-param>
        <description>
        Monitors Faces JSP files for modifications and synchronizes a running server with
the changes without restarting the server. If this parameter is set to false or
removed from the deployment descriptor, any changes made to Faces JSP files may
not be seen by the server until it is restarted. This parameter is usually set
to true while the Faces JSP files are being developed and debugged in order to
improve the performance of the development environment.</description>
        <param-name>com.ibm.ws.jsf.JSP_UPDATE_CHECK</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <description>
        Load JSF runtime when the application server starts up. If this parameter is set to false or removed,
JSF runtime will be loaded and initialized when the first JSF request is processed.
This may disable custom JSF extensions, such as factories defined in the project.</description>
        <param-name>com.ibm.ws.jsf.LOAD_FACES_CONFIG_AT_STARTUP</param-name>
        <param-value>true</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>//our main controller servlet
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.faces</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <!-- Welcome page -->
    <welcome-file-list>
        <welcome-file>jsfs/hello.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Step 4 :- Create a faces-config.xml under the web-inf which is the main controller for faces frame work as given bellow








The above is the typical structure of the project
//faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>

<faces-config
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
    version="2.0">
   
</faces-config>

Step 5 :- Under webcontent make folder with name jsfs and create two xhtml as given above picture

//hello.xhtml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h3>JSF 2.0 Hello World Example - hello.xhtml</h3>
    <h:form>
        <h:inputText value="#{helloBean.name}"></h:inputText>
        <h:commandButton value="WelcomeMe" action="welcome"></h:commandButton>
    </h:form>
</h:body>
</html>
        above helloBean is our bean class and name is a property in it the user entered value will be stored there , after clicking button it will go to welcome.xhtml mentioned in the action

//welcome.xhtml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body bgcolor="white">
    <h3>JSF 2.0 Hello World Example - welcome.xhtml</h3>
    <h4>Welcome #{helloBean.name}</h4>
</h:body>
</html>

Step 6 :- Creation of HelloBean

package com.prac.jsfTutorial;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import java.io.Serializable;

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

Step 7 :- Clean build the project and run it.

output :- 







After enterring value






After clicking submit