JSF Step by Step

Posted: June 8th, 2009 | Author: admin | Filed under: JSF, Programming | Tags: JSF, Programming, tutorial | 1 Comment »

JSF – Java Server faces

What Is Java Server Faces?

Java Server Faces is a new framework for building Web applications using Java.

All JSF projects need a particular directory structure as mentioned by the JSF framework.

This directory structure can be easily obtained by starting a JSF project in NetBeans.

To start a new JSF project in NetBeans

1. Go to File Menu à New Project
2. New Project Dialog box will open choose categories as web and project as Web Application. Click on the next button.
3. In the next page give the desired Project Name for eg We have given vahanJSF and give the location where you want to save the project.

4. And in the same page select the server as tomcat. Netbeans is shipped with bundled Tomcat but you can choose other version of Tomcat if you desire by selecting the server combobox. To add a new server.
5.In the next page select the framework as JavaServer Faces this will enable the NetBeans to recognise the project as a type of JSF.
Now you can see your project appears in left pane under Projects tab.

6.Expand the new projec to see its directory structure viz. Web Pages, Configuration Files, etc..

To create a new Web Page

1. Right click on the Web Pages à New à JSP.

2. Give the name of the JSP page. We have given login. Click on Finish.

3. JSP pages acts as an interface containing only components like textboxes, comboboxes, radiobutton etc and these components are bound with backend bean where all the business logic is written. Backend bean is nothing but a java class file where we write java coding for our business logic.

To create a backend bean:

1. Right click on the Source Packages à New à Java Class.

2. Give Class name and the name of the Package. We have given Class name as loginbean and Package as vahanPackage. Click on Finish.

Any bean that u create in the project shud be registered in the faces-config.xml file i.e present in the Configuration Files as like

<managed-bean>
<managed-bean-name>loginbean</managed-bean-name>

<managed-bean-class>vahanPackage.loginbean</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope></managed-bean>

Or another way to add a bean is to

1. Right-click the project and choose New à File/Folder. Under the Web category, select the JSF Managed Bean template and click Next.

2. Give the name and Package as you have given earlier. We have given Class name as userbean and Package as vahanPackage. Click on Finish.

3. Now open the Configuration file and see all the lines are added in it that you have added manually.

As we have created JSP page and backend bean so we’ll proceed with the coding part.

1. Open the JSP page. Now we need to declare the JSF tag libraries in the JSF file. Change the following code:

<%–<%@taglib uri=”http://java.sun.com/jsp/jstl/core” prefix=”c”%>–%>

To the following:

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

Examine the prefix given as h and f

h denotes the basic html tags
f denotes the jsf tags

These prefix letters can be changed according to ur choice but not recommended.

2. Change the contents of both the title and h1 tags to Vahan.

3. Now add a JSF form to the file. In the Palette(Window à Palette), click the JSF Form button, drag it to below the h1 tag, and release the mouse button. In the dialog box, leave Empty Form selected and click OK. The IDE fills in the following code in bold:

<f:view><h:form></h:form></f:view>

4. We are going to use inputText components to get the user input and a commandButton component to submit the form. So our code will look like

<%@page contentType=”text/html”%>

<%@page pageEncoding=”UTF-8″%>

<%–

The taglib directive below imports the JSTL library. If you uncomment it,

you must also add the JSTL library to the project. The Add Library… action

on Libraries node in Projects view can be used to add the JSTL 1.1 library.

–%>

<%@ 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”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Vahan</title>

</head>

<body>

<h1>Vahan</h1>

<f:view>

<center>

<h1>

<h:outputText value=”Welcome to Login Page”/>

</h1>

<h:form>

<p>

<h:outputText value=”UserName “/>

<h:inputText value=”#{loginbean.userName}” id=”tf_UserName”/>

</p>

<p>

<h:outputText value=”Password “/>

<h:inputText value=”#{loginbean.password}” id=”tf_Password”/>

</p>

<p>

<h:commandButton action=”#{loginbean.submit}” value=”SUBMIT” />

</p>

</center>

</h:form>

</f:view>

</body>

</html>

Look at the value of inputText is given as {loginbean.userName} this means the value is bind with the userName property of the loginbean. So as to bind the value with a property in the bean we need to create setter and getter methods for that particular value.

5.Now open loginbean.java. Add the following field declarations (shown in bold) to loginbean.java:

public class loginbean { String userName;String password; 6.Now let’s generate getters and setters for the fields.Right-click on fieldname(username) in the file and choose Refactor->Encapsulate Fields. <!–[if !vml]–>

7. A dialog box will open. Select both the check boxes for password also. Click next.

8. Refactoring window will open then click on the DoRefactoring button. The IDE switches the access level for the fields to private and creates the getter and setter methods.

9. Now the code for loginbean.java would look like

public class loginbean {

private String userName;

private String password;

public String getUserName() {

return userName;

}

public void setUserName(String userName) {

this.userName = userName;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

10. Add a new JSP page called welcome.jsp. Add the following lines.

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

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

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<title>Welcome to Vahan</title>

</head>

<body>

<h1>Welcome to Vahan</h1>

<f:view>

<h:form>

<p>You’ve successfully registered with Vahan.</p>

<p>Your name is <h:outputText value=”#{loginbean.userName}” /></p>

</h:form>

</f:view>

</body>

</html>

Setting Page Navigation

Page navigation in the JSF framework is controlled by the faces-config.xml file, which is located under the Configuration Files node in the Projects window. For each page you set up a navigation rule which contains one or more navigation cases. For now, we will just map the submit action from the commandButton to welcome.jsp.

1. Double-click faces-config.xml to open the file in the Source Editor.

2. Right-click anywhere in the file and choose Java ServerFaces à Add Navigation Rule. Type /login.jsp in the Rule from View field and optionally enter a description of the rule. Then click Add.

3. This window will appear.

4.Click on Add.The following code is entered in faces-config.xml:

<navigation-rule>

<description>

login

</description>

<from-view-id>/login.jsp</from-view-id>

</navigation-rule>

5. Right-click inside faces-config.xml and choose Java ServerFaces > Add Navigation Case. Set the following:

• From View: /login.jsp
• From Outcome: submit
• To View: /welcome.jsp
  

6. Click on Add Following lines will appear.

<navigation-case>

<from-outcome>submit</from-outcome>

<to-view-id>/welcome.jsp</to-view-id>

</navigation-case>

How to set/add compiletime (classpath) and runtime libraries for a Project in Netbeans?

1. Right click on Project à Properties.
2. A dialog box will open. Choose libraries under categories on left side. Click on Add Jar/Folder on the right hand side of the dialog box.

1. Select all the jar files from where you have kept it.

2. If Package is checked then they become war files i.e. runtime libraries. So if you want any file to be only compiled not packaged then uncheck it eg (servlet.jar/ servlet-api.jar). Click on ok and jar files will be added under Libraries folder of your project.

Note:

1. servlet.jar/servlet-api.jar should never be packaged as it conflicts with the servlet.jar file of Tomcat.

2. Lib folder of your project should never be inside WEB-INF folder as all the files/folders inside WEB-INF get packaged by default thereby avoiding us to unpackage particular jars of lib. As you can see in the snapshot below, we have removed lib folder.

3. If you want a client to establish a connection to RMI server then you have to add the following line:- permission java.security.AllPermission; in C:j2sdk1.4.2_08jrelibsecurityjava.security. Its not necessary to install j2sdk1.4.2_08 in c: drive.

Configuring and Running the Application

Now let’s set the IDE to display login.jsp when it runs the application and, finally, test the application.

1. Right-click the project and choose Properties.

2. Click the Run node and type /faces/login.jsp in the Relative URL field. Then click OK.

3. Right-click the project and choose Run. The IDE builds the project, starts the application server, deploys the application, and shows the following page in the external browser:

Adding a new Server

1. Download a new server. We have downloaded apache-tomcat-6.0.14.

2. Open D:apache-tomcat-6.0.14conftomcat-users.xml. Its not necessary that you download tomcat in D drive. You open tomcat-users.xml by right clicking on it and choose edit or editplus.

3. Add these lines in it i.e. you have to create role as manager.

<?xml version=’1.0′ encoding=’utf-8′?>

<tomcat-users>

<role rolename=”manager”/>

<user username=”manager” password=”manager” roles=”manager”/>

</tomcat-users>

4. Save the changes. Go to Netbeans and open Window à Runtime.

5. Runtime window will open. Right click on Servers à Add Server.

6. Choose the type of server you want to add. For adding versions higher than Tomcat5.5, select Tomcat5.5.

7. Give the name of the server and click on next.

8. In Catalina Home, Browse and give the location of the apache-tomcat -6.0.14. Give username as password as manager.

9. Click on Finish. You can see apache-tomcat-6.0.14 is added in Servers.

---