Pages

Wednesday 16 October 2013

Sample JSF (Java Server Faces) Application Example with Action class and bean

This blog is for all JSF web developers. I could not find any example on net about simple JSF application which work with action class. Then I come to know how to use JSF application with MVC model. This is the simple JSF application with action class which uses the bean's properties.

Below are the required files:

Required Jar files:

jsf-api.jar
jsf-impl.jar
jstl.jar
commons-beanutils.jar
commons-collections.jar
commons-digester.jar
commons-logging.jar



Index.jsp :

<%--
    Document   : Login
    Created on : Sep 24, 2013, 6:21:32 PM
    Author     : Arun Singh--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<f:view>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
            <h:form>
            <p>Enter your username:
                <h:inputText id="username" label="usernm" value="#{loginBean.userName}" />
            </p>
            <p>Enter your password:
                <h:inputSecret id="pass" value="#{loginBean.password}" />
            </p>
            <h:commandButton value="Submit Values" action="#{Login.loginAction}">
            </h:commandButton>
            </h:form>  
       
   </body>

</html>
</f:view>



Welcome.jsp:

 <%--
    Document   : Welcome
    Created on : Sep 24, 2013, 6:46:32 PM
    Author     : Arun Singh
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello </h1> <h:outputText value="#{loginBean.userName}"></h:outputText>
        <h1>You are logged in. </h1>
    </body>
</html>
</f:view>


Failure.jsp: 

<%--
    Document   : Failure
    Created on : Sep 24, 2013, 6:49:58 PM
    Author     : Arun Singh--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<f:view>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello </h1> <h:outputText value="#{loginBean.userName}"></h:outputText>
        <h1>You are not logged in. </h1>
    </body>
</html>
</f:view>



web.xml:

 <?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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_2_5.xsd">
 
    <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>
   <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>/index.jsp</welcome-file>
    </welcome-file-list>
</web-app>


faces-config.xml:

<?xml version='1.0' encoding='UTF-8'?>

<faces-config version="1.2"
    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_1_2.xsd">

<managed-bean>
    <managed-bean-name>loginBean</managed-bean-name>
    <managed-bean-class>beans.LoginBean</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<managed-bean>
    <managed-bean-name>Login</managed-bean-name>
    <managed-bean-class>beans.LoginAction</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

<navigation-rule>
<!-- <from-view-id>/index.jsp</from-view-id>-->
  <navigation-case>
    <from-action>#{Login.loginAction}</from-action>
    <from-outcome>success</from-outcome>
    <to-view-id>/Welcome.jsp</to-view-id>
  </navigation-case>
  <navigation-case>
   <from-action>#{Login.loginAction}</from-action>
   <from-outcome>failure</from-outcome>
   <to-view-id>/Failure.jsp</to-view-id>
  </navigation-case>
</navigation-rule>

</faces-config>



LoginAction:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package beans;

import java.io.Serializable;
import javax.el.ELContext;
import javax.faces.context.FacesContext;

/**
 *
 * @author  */


 
   String userId;
   String pass;
   
public String loginAction()
{
  
    ELContext elContext = FacesContext.getCurrentInstance().getELContext();
    LoginBean neededBean  = (LoginBean) FacesContext.getCurrentInstance().getApplication()
                                .getELResolver().getValue(elContext, null, "loginBean");
    userId=neededBean.getUserName();
    pass=neededBean.getPassword();
   
    System.out.println("Userid in LoginAction is : "+userId+" and also pass is : "+pass);
    if (userId.equals("guest") && pass.equals("guest"))
            return "success";
    else
          return "failure";
    }
}



LoginBean:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package beans;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
/**
 *
 * @author  */
public class LoginBean {
    private String userName;
    private String password;

    public LoginBean() {
    }
   
    public LoginBean(String userName, String password) {
        this.userName = userName;
        this.password = password;
    }

   
    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }
}








7 comments:

  1. Thanks a lot Arun. Nice Work. It is very useful as I was looking for it :)

    ReplyDelete
  2. Nice demo. Thank you.

    Jeetan Patel

    ReplyDelete
  3. Thanks! working fine for me.

    ReplyDelete
  4. Not working :( Giving exception: Faces Context not found. Please help.

    ReplyDelete
  5. Thank you. Nice example.

    ReplyDelete
  6. Really good example to start with JSF. Thanks.

    ReplyDelete