Post
Ask Question

Creating form based application in Java Server Faces (JSF)


  1. Create the JSP to contain the form tag of JSF with the form field tags.
  2. Create the managed bean to contain values of form field and the validation methods.
  3. Provide information about the managed bean and navigation cases in the faces-config.xml file
  4. Create pages for each navigation cases.

Form field tags in JSF

  • Input Text: - This creates a text field.
  • Input Secret: - This creates a password field.
  • Input Textarea: - This creates a multilane text area.
  • Input Hidden: - This creates a invisible field.
  • Command Button: - This creates a button.
  • Select Many checkbox: - This creates a group of checkbox.
  • Select One checkbox: - This creates a checkbox.
  • Select item: - This creates an item inside a group of checkbox.
  • Select Boolean checkbox: - This creates a radio button.
  • Select Many menu: - This creates a combobox.
  • Seect One menu: - To create a combobox where one item will be visible.
  • Select One listbox: - To create a listbox where one item can be selected.

Common attribute of form field tags

Id: - This contains a name to be treated as the id of the tag.
Value: - This contains the name of a property or variable present inside the managed bean. Whenever the form gets submitted, then the value of the form field gets assigned to the specified property of the managed bean.

Attribute of command button

Action: - This contains the name of the validation method present in the managed bean. Whenever the button gets pressed, the specified method gets called for validation of input and to return the navigation case.

Creation process of a managed bean

  1. Create a class in a package as the managed bean.
     
  2. Provide variables as the properties of the bean. Name of these variables must match with the value attribute present in the form field tags.
     
  3. Provide setter and getter methods for each of the variables.
     
  4. Provide the validation method to validate input of users and to return appropriate navigation cases. Name of this method must match with the action attribute present in command button tag. This method must return a string to contain the navigation case.
     
  5. Store the package folder inside classes folder. Compile the file as any ordinary java file.

Providing information in faces-config.xml

  1. Provide information about managed bean by using following tags in faces-config.xml file

    <managed-bean>
    <managed-bean-name>
    This contains object name of managed bean
    </managed-bean-name>
    <managed-bean-class>
    This contains class name of managed bean
    </managed-bean-class>
    <managed-bean-scope>
    This contains value as request, response, session, application as the scope of bean
    </managed-bean-scope>
    </managed-bean>
     
  2. Provide information about navigation case by using following tags as

    <navigation-rule>
    <from-view-id>
    This contains the name of the jsp from where the request will be generated
    </from-view-id>
    <navigation-case>
    <from-outcome>
    This contain name of the navigation case
    </from-outcome>
    <to-view-id>
    This contains name of the page for the navigation case
    </to-view-id>
    </navigation-case>
    <navigation-case>
    </navigation-rule>

Creating a login form using JSF

Here we use Type-1 driver (JDBC-ODBC bridge)

Creation of dsn(database source name) for Oracle

Start-Control panel- Administrative Tools- Data Sources (ODBC)-go to system dsn tab-click add button-select a driver for which you want to set up data source (for Oracle- Oracle in XE)-select it and click finish-give any name in data source name textbox-then click ok button.

Note: - Here Username=system, Password=pintu and Dsn name=dsn1

Table Creation with data

create table userinfo(userid varchar(50),pass varchar(50))

insert into userinfo values('Raj','raj123')
insert into userinfo values('Ravi','ravi123')
insert into userinfo values('Rahul','rahul123')

Creation of managed bean for login

Create a package folder (pack1) inside the classes folder of the context (E:\jsf\WEB-INF\classes). Store all the managed bean files inside the package folder (pack1).

Logbean.java file

//managed bean
package pack1;
import java.sql.*;
public class logbean
{
String userid;
String password;
public logbean()
{
}
public String getUserid()
{
return userid;
}
public void setUserid(String userid)
{
this.userid = userid;
}
public String getPassword()
{
return password;
}
public void setPassword(String password)
{
this.password = password;
}
public String CheckValidUser()
{
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:dsn1","system","pintu");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from userinfo where userid='"+userid+"' and pass='"+password+"'");

if(rs.next())
return "success";
}
catch(Exception e)
{
}
return "fail";
}
}

Compile the managed bean file.

Javac logbean.java




Creating the JSP form field tags and respective forward JSP pages

Store all the jsp pages inside the context folder (E:\jsf)

Here there are three jsp pages they are login.jsp, success.jsp and fail.jsp.

login.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%--
This file is an entry point for JavaServer Faces application.
--%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="javascript">
function check()
{
var uid=document.getElementById("f1:uid1").value
var pass=document.getElementById("f1:pass").value
if(uid=="")
{
alert("Please Enter Userid")
return false
}
if(pass=="")
{
alert(" Please Enter Password")
return false
}
}
</script>
</head>
<body>
<f:view>
<h1><h:outputText value="JavaServer Faces Login form" /></h1>
<h:form id="f1" onsubmit="return check()">
<table>
<tr>
<td><h:outputText value="USER ID:" /></td>
<td><h:inputText id="uid1" value="#{logbean.userid}" /></td><br>
</tr>
<tr>
<td><h:outputText value="PASSWORD:" /></td>
<td><h:inputSecret id="pass" value="#{logbean.password}" /></td>
</tr>
<br>
<tr>
<td><h:commandButton value="Login" action="#{logbean.CheckValidUser}" /></td>
</tr>
</table>
</h:form>
</f:view>
</body>
</html>

success.jsp

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<f:view>
<html>
<body>
<h1>Welcome::: <h:outputText value="#{logbean.userid}" /></h1>
</body>
</html>
</f:view>

fail.jsp

<html>
<body>
<h1 align="center">Incorrect uid/passwords</h1>
</body>
</html>

Note: - Place two files named as web.xml file and faces-config files inside WEB-INF folder of the context (E:\jsf\WEB-INF). In web.xml file we provide the servlet name and url pattern. In faces-config.xml there are two sections they are managed-bean section and the other one is navigation-rule section.

Managed-bean section: - Here we provide bean name, bean class and bean scope.

Navigation-rule section: - Here we provide the respective forward jsps according to the cases, that we already mentioned in the managed bean.

Web.xml settings

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app 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"
version="2.5">
<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<servlet>
<servlet-name>x</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>x</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

</web-app>

faces-config settings

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>

<managed-bean>
<managed-bean-name>logbean</managed-bean-name>
<managed-bean-class>pack1.logbean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>success.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>fail</from-outcome>
<to-view-id>fail.jsp</to-view-id>
</navigation-case>
</navigation-rule>

</faces-config>

Running the application

Run the tomcat then write the below line in the URL
http://localhost:8081/javajsf/login.jsf

Here javajsf is the Context path, which we mentioned in the server.xml file, which is present in (E:\Program Files\Apache Software Foundation\Tomcat 6.0\conf) directory.

JSF.gif



Similar Articles