ArticlesTutorialsInterview Questions & AnswersCertificationsFree Books & Sample ChaptersTechnical Discussions  Your Account | Advertise with us | Feedback |
Few pages of this site are under construction and we are constantly trying to improve it. If you have any suggestions or ideas about how to improve the site, please Let us know.
JavaServer Faces (JSF) Tutorial

Contents
JSF Introduction
JSF Lifecycle
Getting started
JSF Example
Resources
JSF Standard Components
JSF Tomahawk Components

JavaServer Faces (JSF) Tutorial

                     By Anand , developersBOOK.COM , 03/01/08

Page 2 of 3




JSF- Getting started

JSF Cartoon

Now that we have a general overview of JavaServer Faces and a basic understanding of the JSF lifecycle, let's get started with some code.

There are more than one JSF implementations available in market. Some of them are:

  • Sun (RI) (default)
  • Apache MyFaces
  • IBM
  • Simplica (based on Apache MyFaces)
  • Additionally, there are several 3rd party UI components that should run with any implementation.

For our simple application we use Sun (RI) default implementation.


Before you can dive into a full-fledged example, you must lay some groundwork. i.e., configuring your environment to work with JSF. First, you need to get the JSF library files.

  • jsf-api.jar
  • jsf-impl.jar

You should place these two JSF JAR files (jsf-api.jar and jsf-impl.jar) in the application's classpath, either in the Web app's lib directory or in the server's classpath. The next thing we'll need to do is download the dependencies our simple project will have. Here are the jar files (apart from above two jars) you will need in your WEB-INF/lib:

  • jstl.jar
  • standard.jar
  • commons-beanutils.jar
  • commons-collections.jar
  • commons-digester.jar
  • commons-logging.jar

Alternatively, use Ant or Maven to only include these jars when you are testing.

Note: Even though, JSF applications typically use JSP tags implemented by the JSF implementation, there are no separate tag library descriptor (TLD) files because that information is contained in the jar files.


Figure 2: JSF Helloworld directory structure
JSF-Directory-Structure

More advanced JSF applications have the same structure, but they can contain additional Java classes, such as event handlers, validators, and custom components. And optional additional configuration files.


JSF Basic Example

Now that you know the basic configuration steps, you just need to look at a working example. Let’s start with Java bean class called PersonBean.java (Code Listing 1) . This class has only one property, name

Code Listing 1: PersonBean.java

package com.developersBook.jsf.bean;

public class PersonBean {
     
private String name;

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

      public String getName() {
           
return this.name;
      }
}

In JSF applications, you use beans for all data that needs to be accessible from a page.
Next you need is JSF page (index.jsp). This JSP is essentially an HTML file with few additional tags (JSF tags).

Code Listing 2: index.jsp

<html>

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

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

   <f:view>

     <head><title>JSF Hello World</title></head>

     <body>

      <h:form id="helloForm">

        <h:outputLabel for="promptName"value="Please enter your name" />

        <h:panelGrid columns="2">

           <h:outputLabel for ="name" value="Name:"/>

           <h:inputTextid ="name" value="#{person.name}"/>

           <h:commandButton value="Say Hello"action="sayHello"/>

           <h:commandButton value="Say Bye" action="sayBye"/>

        </h:panelGrid>

       </h:form>

     </body>

   </f:view>

</html>


To use any of the JavaServer Faces tags, you need to include these taglib directives at the top of each page containing the tags defined by these tag libraries:

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


The uri attribute value uniquely identifies the TLD. The prefix attribute value is used to distinguish tags belonging to the tag library. You can use other prefixes rather than the h or f prefixes. However, you must use the prefix you have chosen when including the tag in the page. For example, the form tag must be referenced in the page using the h prefix because the preceding tag library directive uses the h prefix to distinguish the tags defined in html_basic.tld:

<h:form....>

Much of the page is similar to regular an HTML form, except few differences:

  • All JSF tags are contained in an f:view tag.
  • All JSF components are enclosed in h:form tag, instead of using HTML form tag.
  • Use h:inputText, h:commandButton, instead of regular HTML input tags.

You can find the all the standard JSF tags and their attributes with examples here.


The value of action attribute (sayHello or sayBye) of h:commandButton shapes the outcome of request. As in our example this action attribute can be literal string or EL method expression, i.e, specific method on a specific bean can be called as part of the request/response cycle.


In this case , the return value from the method will be the outcome .



Figure 3: index.jsp
index.jsp

As the above view (index.jsp) will prompt for your name, and populate the person bean with the value you enter. The others will say hello or goodbye, depending on which action the user chooses.

Code Listing 3: Hello.jsp

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

<html>

  <f:view>
     
<head><title>Hello World!</title></head>
     
<body>
       
<h:form>
           
<h3>Hello,<h:outputText value="#{person.name}" /></h3>

            <h:commandLink id="Cancel"action="index"immediate="true">
                 
<h:outputText value="Cancel"/>
             
</h:commandLink>
       
</h:form>
   
</body>
 
</f:view>

</html>



Code Listing 3: Bye.jsp

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

<html>

  <f:view>
     
<head><title>GoodBye World!</title></head>
     
<body>
       
<h:form>
           
<h3>GoodBye,<h:outputText value="#{person.name}" /></h3>

            <h:commandLink id="Cancel"action="index"immediate="true">
                 
<h:outputText value="Cancel"/>
             
</h:commandLink>
       
</h:form>
   
</body>
 
</f:view>

</html>


Next » JSF Example contd....

Test

  ALSO SEE :

About Us | Our Mission | Terms of use | Author Terms |    Search        | Contact Us | Advertise With Us | Link to Us | Sitemap
Copyright © 2008 developersBOOK.COM. All rights reserved.