JSF 1.2 Simple Example

This section contains simple example using JSF 1.2. This is a startup tutorial for JSF beginners.

EXAMPLE

First create a project in eclipse as "HelloWorldJSF" & Select JavaServerFaces v1.2 Project under configuration as given below :

Click next and then again click next, following screen will appear :

If you already downloaded JSF 1.2 library , then select JSF 1.2 as above. But if you are doing it first time, click download library in the above window(right corner second icon) and select JSF 1.2 for Apache as given below :

After downloading /selecting library click Finish.

Create a package name net.roseindia.jsf and create a class HelloBean.java . The code of this managed bean is given below

package net.roseindia.jsf;

public class HelloBean {
private int id;
private String name;

//Action method to add user
public String addUser() {

return "success";
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

Create the following JSP files under WebContent as follows :

AddUser.jsp

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

<html>
<head>
<title>Add New User Form</title>
</head>
<body>
<f:view>
<p>
<h:message id="errors" for="User_ID" style="color:red"/>
</p>
<h:form>
<h:panelGrid border="1" columns="1">
<h:outputText value="Name"></h:outputText>
<h:inputText value="#{helloBean.name}"></h:inputText>
<h:commandButton action="#{helloBean.addUser}"
value="Add Customer"></h:commandButton>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>

ListUser.jsp

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

<html>
<head>
<title>Hello Users</title>
</head>
<body>
<f:view>
<h:messages>
<h:outputText value="HELLO !! #{helloBean.name}" style="font-size:22px;"></h:outputText>
<h3> Welcome to Roseindia !!</h3>
</h:messages>
</f:view>
</body>
</html>

The configuration of faces-config.xml as given below :

<?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_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>helloBean</managed-bean-name>
<managed-bean-class>
net.roseindia.jsf.HelloBean
</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<display-name>AddUser</display-name>
<from-view-id>/AddUser.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/ListUser.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

OUTPUT

When you execute application using the following URL : http://localhost:8080/JSFHelloWorld/faces/AddUser.jsp you will get the following output :

When you supply some name for example Roseindia, you will get the following output :

Download Source Code

JSF 1.2 Simple Example