JSF Quick Guide

Advertisements


What is JSF?

JavaServer Faces (JSF) is a MVC web framework that simplifies the construction of user interfaces (UI) for server-based applications by using reusable UI components in a page.JSF provides facility to connect UI widgets with data sources and to server-side event handlers. The JSF specification defines a set of standard UI components and provides an Application Programming Interface (API) for developing components.JSF enables the reuse and extension of the existing standard UI components.

Benefits

JSF reduces the effort in creating and maintaining applications which will run on a Java application server and will render application UI on to a target client.JSF facilitates Web application development by

  • proving reusable UI components

  • making easy data transfer between UI components

  • managing UI state across multiple server requests

  • enabling implementation of custom components

  • wiring client side event to server side application code

JSF UI component model

JSF provides developers capability to create Web application from collections of UI components that can render themselves in different ways for multiple client types (for example HTML browser, wireless or WAP devise).

JSF provides

  • Core library

  • A set of base UI components - standard HTML input elements

  • Extension of the base UI components to create additional UI component libraries or to extend existing components.

  • Multiple rendering capabilities that enable JSF UI components to render themselves differently depending on the client types

JSF - Environment Setup

This section will guide you on how to prepare a development environment to start your work with JSF Framework. This tutorial will also teach you how to setup JDK, Eclipse, Maven, and Tomcat on your machine before you setup JSF Framework:

System Requirement

JSF requires JDK 1.5 or higher so the very first requirement is to have JDK installed in your machine.

JDK1.5 or above.
Memoryno minimum requirement.
Disk Spaceno minimum requirement.
Operating Systemno minimum requirement.

Follow the given steps to setup your environment to start with JSF application development.

Step 1 - Verify Java installation on your machine

Now open console and execute the following java command.

OSTaskCommand
WindowsOpen Command Consolec:\> java -version
LinuxOpen Command Terminal$ java -version
MacOpen Terminalmachine:~ joseph$ java -version

Let's verify the output for all the operating systems:

OSGenerated Output
Windows java version "1.6.0_21"
Java(TM) SE Runtime Environment (build 1.6.0_21-b07)
Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)
Linux java version "1.6.0_21"
Java(TM) SE Runtime Environment (build 1.6.0_21-b07)
Java HotSpot(TM) Client VM (build 17.0-b17, mixed mode, sharing)
Mac java version "1.6.0_21"
Java(TM) SE Runtime Environment (build 1.6.0_21-b07)
Java HotSpot(TM)64-Bit Server VM (build 17.0-b17, mixed mode, sharing)

Step 2 - Setup Java Development Kit (JDK):

If you do not have Java installed then you can install the Java Software Development Kit (SDK) from Oracle's Java site: Java SE Downloads. You will find instructions for installing JDK in downloaded files, follow the given instructions to install and configure the setup. Finally set PATH and JAVA_HOME environment variables to refer to the directory that contains java and javac, typically java_install_dir/bin and java_install_dir respectively.

Set the JAVA_HOME environment variable to point to the base directory location where Java is installed on your machine. For example

OSOutput
WindowsSet the environment variable JAVA_HOME to C:\Program Files\Java\jdk1.6.0_21
Linuxexport JAVA_HOME=/usr/local/java-current
Macexport JAVA_HOME=/Library/Java/Home

Append Java compiler location to System Path.

OSOutput
WindowsAppend the string ;%JAVA_HOME%\bin to the end of the system variable, Path.
Linuxexport PATH=$PATH:$JAVA_HOME/bin/
Macnot required

Alternatively, if you use an Integrated Development Environment (IDE) like Borland JBuilder, Eclipse, IntelliJ IDEA, or Sun ONE Studio, compile and run a simple program to confirm that the IDE knows where you installed Java, otherwise do proper setup as given document of the IDE.

Step 3 - Setup Eclipse IDE

All the examples in this tutorial have been written using Eclipse IDE. So I would suggest you should have latest version of Eclipse installed on your machine based on your operating system.

To install Eclipse IDE, download the latest Eclipse binaries with WTP support from http://www.eclipse.org/downloads/. Once you downloaded the installation, unpack the binary distribution into a convenient location. For example in C:\eclipse on windows, or /usr/local/eclipse on Linux/Unix and finally set PATH variable appropriately.

Eclipse can be started by executing the following commands on windows machine, or you can simply double click on eclipse.exe

 %C:\eclipse\eclipse.exe

Eclipse can be started by executing the following commands on Unix (Solaris, Linux, etc.) machine:

$/usr/local/eclipse/eclipse

After a successful startup, if everything is fine then it should display following result:

Eclipse Home page

Step 4: Download Maven archive

Download Maven 2.2.1 from http://maven.apache.org/download.html

OSArchive name
Windowsapache-maven-2.0.11-bin.zip
Linuxapache-maven-2.0.11-bin.tar.gz
Macapache-maven-2.0.11-bin.tar.gz

Step 5: Extract the Maven archive

Extract the archive, to the directory you wish to install Maven 2.2.1. The subdirectory apache-maven-2.2.1 will be created from the archive.

OSLocation (can be different based on your installation)
WindowsC:\Program Files\Apache Software Foundation\apache-maven-2.2.1
Linux /usr/local/apache-maven
Mac/usr/local/apache-maven

Step 6: Set Maven environment variables

Add M2_HOME, M2, MAVEN_OPTS to environment variables.

OSOutput
WindowsSet the environment variables using system properties.

M2_HOME=C:\Program Files\Apache Software Foundation\apache-maven-2.2.1

M2=%M2_HOME%\bin

MAVEN_OPTS=-Xms256m -Xmx512m

LinuxOpen command terminal and set environment variables.

export M2_HOME=/usr/local/apache-maven/apache-maven-2.2.1

export M2=%M2_HOME%\bin

export MAVEN_OPTS=-Xms256m -Xmx512m

MacOpen command terminal and set environment variables.

export M2_HOME=/usr/local/apache-maven/apache-maven-2.2.1

export M2=%M2_HOME%\bin

export MAVEN_OPTS=-Xms256m -Xmx512m

Step 7: Add Maven bin directory location to system path

Now append M2 variable to System Path

OSOutput
WindowsAppend the string ;%M2% to the end of the system variable, Path.
Linuxexport PATH=$M2:$PATH
Macexport PATH=$M2:$PATH

Step 8: Verify Maven installation

Now open console, execute the following mvn command.

OSTaskCommand
WindowsOpen Command Consolec:\> mvn --version
LinuxOpen Command Terminal$ mvn --version
MacOpen Terminalmachine:~ joseph$ mvn --version

Finally, verify the output of the above commands, which should be something as follows:

OSOutput
Windows Apache Maven 2.2.1 (r801777; 2009-08-07 00:46:01+0530)
Java version: 1.6.0_21
Java home: C:\Program Files\Java\jdk1.6.0_21\jre
Linux Apache Maven 2.2.1 (r801777; 2009-08-07 00:46:01+0530)
Java version: 1.6.0_21
Java home: C:\Program Files\Java\jdk1.6.0_21\jre
Mac Apache Maven 2.2.1 (r801777; 2009-08-07 00:46:01+0530)
Java version: 1.6.0_21
Java home: C:\Program Files\Java\jdk1.6.0_21\jre

Step 9: Setup Apache Tomcat:

You can download the latest version of Tomcat from http://tomcat.apache.org/. Once you downloaded the installation, unpack the binary distribution into a convenient location. For example in C:\apache-tomcat-6.0.33 on windows, or /usr/local/apache-tomcat-6.0.33 on Linux/Unix and set CATALINA_HOME environment variable pointing to the installation locations.

Tomcat can be started by executing the following commands on windows machine, or you can simply double click on startup.bat

 %CATALINA_HOME%\bin\startup.bat
 
 or
 
 C:\apache-tomcat-6.0.33\bin\startup.bat

Tomcat can be started by executing the following commands on Unix (Solaris, Linux, etc.) machine:

$CATALINA_HOME/bin/startup.sh
 
or
 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

After a successful startup, the default web applications included with Tomcat will be available by visiting http://localhost:8080/. If everything is fine then it should display following result:

Tomcat Home page

Further information about configuring and running Tomcat can be found in the documentation included here, as well as on the Tomcat web site: http://tomcat.apache.org

Tomcat can be stopped by executing the following commands on windows machine:

%CATALINA_HOME%\bin\shutdown

or

C:\apache-tomcat-5.5.29\bin\shutdown

Tomcat can be stopped by executing the following commands on Unix (Solaris, Linux, etc.) machine:

$CATALINA_HOME/bin/shutdown.sh

or

/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

JSF - Architecture

JSF technology is a framework for developing, building server side User Interface Components and using them in a web application.JSF technology is based on the Model View Controller (MVC) architecture for separating logic from presentation.

What is MVC Design Pattern?

MVC design pattern designs an application using three separate modules:
ModuleDescription
ModelCarries Data and login
ViewShows User Interface
ControllerHandles processing of an application.

Purpose of MVC design pattern is to separate model and presentation to enable developers to set focus on their core skills and collaborate more clearly.

Web Designers have to concentrate only on view layer rather than model and controller layer. Developers can change the code for model and typically need not to change view layer.Controllers are used to process user actions. In this process layer model and views may be changed.

JSF Architecture

A JSF application is similar to any other Java technology-based web application; it runs in a Java servlet container, and contains

  • JavaBeans components as models containing application-specific functionality and data

  • A custom tag library for representing event handlers and validators

  • A custom tag library for rendering UI components

  • UI components represented as stateful objects on the server

  • Server-side helper classes

  • Validators, event handlers, and navigation handlers

  • Application configuration resource file for configuring application resources

JSF Architecture

There are controllers which can be used to perform user actions.UI can be created by web page authors and the business logic can be utilized by managed beans.

JSF provides several mechanisms for rendering an individual component. It is upto the web page designer to pick the desired representation, and the application developer doesn't need to know which mechanism was used to render a JSF UI component.

JSF - Life Cycle

JSF application lifecycle consist of six phases which are as follows

  • Restore view phase

  • Apply request values phase; process events

  • Process validations phase; process events

  • Update model values phase; process events

  • Invoke application phase; process events

  • Render response phase

JSF Life Cycle

The six phases show the order in which JSF processes a form. The list shows the phases in their likely order of execution with event processing at each phase.

Phase 1: Restore view

JSF begins the restore view phase as soon as a link or a button is clicked and JSF receives a request.

During this phase, the JSF builds the view, wires event handlers and validators to UI components and saves the view in the FacesContext instance. The FacesContext instance will now contains all the information required to process a request.

Phase 2: Apply request values

After the component tree is created/restored, each component in component tree uses decode method to extract its new value from the request parameters. Component stores this value. If the conversion fails, an error message is generated and queued on FacesContext. This message will be displayed during the render response phase, along with any validation errors.

If any decode methods / event listeners called renderResponse on the current FacesContext instance, the JSF moves to the render response phase.

Phase 3: Process validation

During this phase, the JSF processes all validators registered on component tree. It examines the component attribute rules for the validation and compares these rules to the local value stored for the component.

If the local value is invalid, the JSF adds an error message to the FacesContext instance, and the life cycle advances to the render response phase and display the same page again with the error message.

Phase 4: Update model values

After the JSF checks that the data is valid, it walks over the component tree and set the corresponding server-side object properties to the components' local values. The JSF will update the bean properties corresponding to input component's value attribute.

If any updateModels methods called renderResponse on the current FacesContext instance, the JSF moves to the render response phase.

Phase 5: Invoke application

During this phase, the JSF handles any application-level events, such as submitting a form / linking to another page.

Phase 6: Render response

During this phase, the JSF asks container/application server to render the page if the application is using JSP pages. For initial request, the components represented on the page will be added to the component tree as the JSP container executes the page. If this is not an initial request, the component tree is already built so components need not to be added again. In either case, the components will render themselves as the JSP container/Application server traverses the tags in the page.

After the content of the view is rendered, the response state is saved so that subsequent requests can access it and it is available to the restore view phase.

JSF - First Application

To create a simple JSF application, we'll use maven-archetype-webapp plugin. In example below, We'll create a maven based web application project in C:\JSF folder.

Create Project

Let's open command console, go the C:\ > JSF directory and execute the following mvn command.

C:\JSF>mvn archetype:create 
-DgroupId=com.tutorialspoint.test 
-DartifactId=helloworld 
-DarchetypeArtifactId=maven-archetype-webapp

Maven will start processing and will create the complete java web application project structure.

[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'archetype'.
[INFO] -------------------------------------------------------------
[INFO] Building Maven Default Project
[INFO]    task-segment: [archetype:create] (aggregator-style)
[INFO] -------------------------------------------------------------
[INFO] [archetype:create {execution: default-cli}]
[INFO] Defaulting package to group ID: com.tutorialspoint.test
[INFO] artifact org.apache.maven.archetypes:maven-archetype-webapp: 
checking for updates from central
[INFO] -------------------------------------------------------------
[INFO] Using following parameters for creating project 
from Old (1.x) Archetype: maven-archetype-webapp:RELEASE
[INFO] -------------------------------------------------------------
[INFO] Parameter: groupId, Value: com.tutorialspoint.test
[INFO] Parameter: packageName, Value: com.tutorialspoint.test
[INFO] Parameter: package, Value: com.tutorialspoint.test
[INFO] Parameter: artifactId, Value: helloworld
[INFO] Parameter: basedir, Value: C:\JSF
[INFO] Parameter: version, Value: 1.0-SNAPSHOT
[INFO] project created from Old (1.x) Archetype in dir: 
C:\JSF\helloworld
[INFO] -------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] -------------------------------------------------------------
[INFO] Total time: 7 seconds
[INFO] Finished at: Mon Nov 05 16:05:04 IST 2012
[INFO] Final Memory: 12M/84M
[INFO] -------------------------------------------------------------

Now go to C:/JSF directory. You'll see a java web application project created named helloworld (as specified in artifactId). Maven uses a standard directory layout as shown below:

Java web application project structure

Using above example, we can understand following key concepts

Folder StructureDescription
helloworldcontains src folder and pom.xml
src/main/wepappcontains WEB-INF folder and index.jsp page
src/main/resourcesit contains images/properties files (In above example, we need to create this structure manually).

Add JSF capability to Project

Add the JSF dependencies as shown below.

<dependencies>
  <dependency>
	 <groupId>com.sun.faces</groupId>
	 <artifactId>jsf-api</artifactId>
	 <version>2.1.7</version>
  </dependency>
  <dependency>
	 <groupId>com.sun.faces</groupId>
	 <artifactId>jsf-impl</artifactId>
	 <version>2.1.7</version>
  </dependency>
</dependencies>  

Complete POM.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
   http://maven.apache.org/maven-v4_0_0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.tutorialspoint.test</groupId>
   <artifactId>helloworld</artifactId>
   <packaging>war</packaging>
   <version>1.0-SNAPSHOT</version>
   <name>helloworld Maven Webapp</name>
   <url>http://maven.apache.org</url>
   <dependencies>
      <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>3.8.1</version>
         <scope>test</scope>
      </dependency>
      <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-api</artifactId>
         <version>2.1.7</version>
      </dependency>
      <dependency>
         <groupId>com.sun.faces</groupId>
         <artifactId>jsf-impl</artifactId>
         <version>2.1.7</version>
      </dependency>
   </dependencies>
   <build>
      <finalName>helloworld</finalName>
      <plugins>
         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>2.3.1</version>
            <configuration>
               <source>1.6</source>
               <target>1.6</target>
            </configuration>
         </plugin>
      </plugins>
   </build>		
</project>

Prepare Eclipse project

Let's open command console, go the C:\ > JSF > helloworld directory and execute the following mvn command.

C:\JSF\helloworld>mvn eclipse:eclipse -Dwtpversion=2.0

Maven will start processing and will create the eclipse ready project and will add wtp capability.

Downloading: http://repo.maven.apache.org/org/apache/maven/plugins/
maven-compiler-plugin/2.3.1/maven-compiler-plugin-2.3.1.pom
5K downloaded  (maven-compiler-plugin-2.3.1.pom)
Downloading: http://repo.maven.apache.org/org/apache/maven/plugins/
maven-compiler-plugin/2.3.1/maven-compiler-plugin-2.3.1.jar
29K downloaded  (maven-compiler-plugin-2.3.1.jar)
[INFO] Searching repository for plugin with prefix: 'eclipse'.
[INFO] ------------------------------------------------------------
[INFO] Building helloworld Maven Webapp
[INFO]    task-segment: [eclipse:eclipse]
[INFO] ------------------------------------------------------------
[INFO] Preparing eclipse:eclipse
[INFO] No goals needed for project - skipping
[INFO] [eclipse:eclipse {execution: default-cli}]
[INFO] Adding support for WTP version 2.0.
[INFO] Using Eclipse Workspace: null
[INFO] Adding default classpath container: org.eclipse.jdt.
launching.JRE_CONTAINER
Downloading: http://repo.maven.apache.org/
com/sun/faces/jsf-api/2.1.7/jsf-api-2.1.7.pom
12K downloaded  (jsf-api-2.1.7.pom)
Downloading: http://repo.maven.apache.org/
com/sun/faces/jsf-impl/2.1.7/jsf-impl-2.1.7.pom
10K downloaded  (jsf-impl-2.1.7.pom)
Downloading: http://repo.maven.apache.org/
com/sun/faces/jsf-api/2.1.7/jsf-api-2.1.7.jar
619K downloaded  (jsf-api-2.1.7.jar)
Downloading: http://repo.maven.apache.org/
com/sun/faces/jsf-impl/2.1.7/jsf-impl-2.1.7.jar
1916K downloaded  (jsf-impl-2.1.7.jar)
[INFO] Wrote settings to C:\JSF\helloworld\.settings\
org.eclipse.jdt.core.prefs
[INFO] Wrote Eclipse project for "helloworld" to C:\JSF\helloworld.
[INFO]
[INFO] -----------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] -----------------------------------------------------------
[INFO] Total time: 6 minutes 7 seconds
[INFO] Finished at: Mon Nov 05 16:16:25 IST 2012
[INFO] Final Memory: 10M/89M
[INFO] -----------------------------------------------------------

Import project in Eclipse

  • Now import project in eclipse using Import wizard

  • Go to File > Import... > Existing project into workspace

  • Select root directory to helloworld

  • Keep Copy projects into workspace to be checked.

  • Click Finish button.

  • Eclipse will import and copy the project in its workspace C:\ > Projects > Data > WorkSpace

Eclipse project structure

Configure Faces Servlet in web.xml

Locate web.xml in webapp > WEB-INF folder and update it as shown below.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns="http://java.sun.com/xml/ns/javaee" 
   xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
   id="WebApp_ID" version="2.5">
   <welcome-file-list>
      <welcome-file>faces/home.xhtml</welcome-file>
   </welcome-file-list>
   <!-- 
      FacesServlet is main servlet responsible to handle all request. 
      It acts as central controller.
      This servlet initializes the JSF components before the JSP is displayed.
   -->
   <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>
   <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.jsf</url-pattern>
   </servlet-mapping>
   <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.faces</url-pattern>
   </servlet-mapping>
   <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.xhtml</url-pattern>
   </servlet-mapping>
</web-app>

Create a Managed Bean

Create a package structure under src > main > java as com > tutorialspoint > test . Create HelloWorld.java class in this package. Update the code of HelloWorld.java as shown below.

package com.tutorialspoint.test;

import javax.faces.bean.ManagedBean;

@ManagedBean(name = "helloWorld", eager = true)
public class HelloWorld {
   public HelloWorld() {
      System.out.println("HelloWorld started!");
   }
   public String getMessage() {
      return "Hello World!";
   }
}

Create a JSF page

Create a page home.xhtml under webapp folder. Update the code of home.xhtml as shown below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>JSF Tutorial!</title>
</head>
<body>
   #{helloWorld.message}
</body>
</html>

Build the project

  • Select helloworld project in eclipse

  • Use Run As wizard

  • Select Run As > Maven package

  • Maven will start building the project and will create helloworld.war under C:\ > Projects > Data > WorkSpace > helloworld > target folder

[INFO] Scanning for projects...
[INFO] -----------------------------------------------------
[INFO] Building helloworld Maven Webapp
[INFO] 
[INFO] Id: com.tutorialspoint.test:helloworld:war:1.0-SNAPSHOT
[INFO] task-segment: [package]
[INFO] -----------------------------------------------------
[INFO] [resources:resources]
[INFO] Using default encoding to copy filtered resources.
[INFO] [compiler:compile]
[INFO] Nothing to compile - all classes are up to date
[INFO] [resources:testResources]
[INFO] Using default encoding to copy filtered resources.
[INFO] [compiler:testCompile]
[INFO] No sources to compile
[INFO] [surefire:test]
[INFO] Surefire report directory: 
C:\Projects\Data\WorkSpace\helloworld\target\surefire-reports

-------------------------------------------------------
 T E S T S
-------------------------------------------------------
There are no tests to run.

Results :

Tests run: 0, Failures: 0, Errors: 0, Skipped: 0

[INFO] [war:war]
[INFO] Packaging webapp
[INFO] Assembling webapp[helloworld] in
[C:\Projects\Data\WorkSpace\helloworld\target\helloworld]
[INFO] Processing war project
[INFO] Webapp assembled in[150 msecs]
[INFO] Building war: 
C:\Projects\Data\WorkSpace\helloworld\target\helloworld.war
[INFO] ------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------
[INFO] Total time: 3 seconds
[INFO] Finished at: Mon Nov 05 16:34:46 IST 2012
[INFO] Final Memory: 2M/15M
[INFO] ------------------------------------------------

Deploy WAR file

  • Stop the tomcat server.

  • Copy the helloworld.war file to tomcat installation directory > webapps folder.

  • Start the tomcat server.

  • Look inside webapps directory, there should be a folder helloworld got created.

  • Now helloworld.war is successfully deployed in Tomcat Webserver root.

Run Application

Enter a url in web browser: http://localhost:8080/helloworld/home.jsf to launch the application

Server name (localhost) and port (8080) may vary as per your tomcat configuration.

JSF Application Result

JSF - Managed Beans

  • Managed Bean is a regular Java Bean class registered with JSF. In other words, Managed Beans is a java bean managed by JSF framework.

  • The managed bean contains the getter and setter methods, business logic or even a backing bean (a bean contains all the HTML form value).

  • Managed beans works as Model for UI component.

  • Managed Bean can be accessed from JSF page.

  • In JSF 1.2,a managed bean had to register it in JSF configuration file such as faces-config.xml.

  • From JSF 2.0 onwards, Managed beans can be easily registered using annotations. This approach keeps beans and there registration at one place and it becomes easier to manage.

Using XML Configuration

<managed-bean>
  <managed-bean-name>helloWorld</managed-bean-name>
  <managed-bean-class>com.tutorialspoint.test.HelloWorld</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
</managed-bean> 
<managed-bean>
  <managed-bean-name>message</managed-bean-name>
  <managed-bean-class>com.tutorialspoint.test.Message</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
</managed-bean> 

Using Annotation

@ManagedBean(name = "helloWorld", eager = true)
@RequestScoped
public class HelloWorld {
	
   @ManagedProperty(value="#{message}")
   private Message message;
   ...
}

@ManagedBean Annotation

@ManagedBean marks a bean to be a managed bean with the name specified in name attribute. If the name attribute is not specified, then the managed bean name will default to class name portion of the fully qualified class name. In our case it would be helloWorld.

Another important attribute is eager. If eager="true" then managed bean is created before it is requested for the first time otherwise "lazy" initialization is used in which bean will be created only when it is requested.

Scope Annotations

Scope annotations set the scope into which the managed bean will be placed. If scope is not specified then bean will default to request scope. Each scope is briefly discussed below

ScopeDescription
@RequestScopedBean lives as long as the HTTP request-response lives. It get created upon a HTTP request and get destroyed when the HTTP response associated with the HTTP request is finished.
@NoneScopedBean lives as long as a single EL evaluation. It get created upon an EL evaluation and get destroyed immediately after the EL evaluation.
@ViewScopedBean lives as long as user is interacting with the same JSF view in the browser window/tab. It get created upon a HTTP request and get destroyed once user postback to a different view.
@SessionScopedBean lives as long as the HTTP session lives. It get created upon the first HTTP request involving this bean in the session and get destroyed when the HTTP session is invalidated.
@ApplicationScopedBean lives as long as the web application lives. It get created upon the first HTTP request involving this bean in the application (or when the web application starts up and the eager=true attribute is set in @ManagedBean) and get destroyed when the web application shuts down.
@CustomScopedBean lives as long as the bean's entry in the custom Map which is created for this scope lives.

@ManagedProperty Annotation

JSF is a simple static Dependency Injection(DI) framework.Using @ManagedProperty annotation a managed bean's property can be injected in another managed bean.

Example Application

Let us create a test JSF application to test the above annotations for managed beans.

StepDescription
1Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - Create Application chapter.
2Modify HelloWorld.java as explained below. Keep rest of the files unchanged.
3Create Message.java under a package com.tutorialspoint.test as explained below.
4Compile and run the application to make sure business logic is working as per the requirements.
5Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
6Launch your web application using appropriate URL as explained below in the last step.

HelloWorld.java

package com.tutorialspoint.test;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "helloWorld", eager = true)
@RequestScoped
public class HelloWorld {

   @ManagedProperty(value="#{message}")
   private Message messageBean;

   private String message;

   public HelloWorld() {
      System.out.println("HelloWorld started!");   
   }
   public String getMessage() {
      if(messageBean != null){
         message = messageBean.getMessage();
      }       
      return message;
   }
   public void setMessageBean(Message message) {
      this.messageBean = message;
   }
}

Message.java

package com.tutorialspoint.test;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "message", eager = true)
@RequestScoped
public class Message {
	
	private String message = "Hello World!";
	
	public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
}

home.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>JSF Tutorial!</title>
</head>
<body>
   #{helloWorld.message}
</body>
</html>

Once you are ready with all the changes done, let us compile and run the application as we did in JSF - Create Application chapter. If everything is fine with your application, this will produce following result:

JSF Managed Beans

JSF - Basic Tags

JSF provides a standard HTML tag library. These tags get rendered into corresponding html output.

For these tags you need to use the following namespaces of URI in html node.

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:h="http://java.sun.com/jsf/html" 
>

Following are important Basic Tags in JSF 2.0:

S.N.Tag & Description
1h:inputText
Renders a HTML input of type="text", text box.
2h:inputSecret
Renders a HTML input of type="password", text box.
3h:inputTextarea
Renders a HTML textarea field.
4h:inputHidden
Renders a HTML input of type="hidden".
5h:selectBooleanCheckbox
Renders a single HTML check box.
6h:selectManyCheckbox
Renders a group of HTML check boxes.
7h:selectOneRadio
Renders a single HTML radio button.
8h:selectOneListbox
Renders a HTML single list box.
9h:selectManyListbox
Renders a HTML multiple list box.
10h:selectOneMenu
Renders a HTML combo box.
11h:outputText
Renders a HTML text.
12h:outputFormat
Renders a HTML text. It accepts parameters.
13h:graphicImage
Renders an image.
14h:outputStylesheet
Includes a CSS style sheet in HTML output.
15h:outputScript
Includes a script in HTML output.
16h:commandButton
Renders a HTML input of type="submit" button.
17h:Link
Renders a HTML anchor.
18h:commandLink
Renders a HTML anchor.
19h:outputLink
Renders a HTML anchor.
20h:panelGrid
Renders an HTML Table in form of grid.
21h:message
Renders message for a JSF UI Component.
22h:messages
Renders all message for JSF UI Components.
23f:param
Pass parameters to JSF UI Component.
24f:attribute
Pass attribute to a JSF UI Component.
25f:setPropertyActionListener
Sets value of a managed bean's property

JSF - Facelets Tags

JSF provides special tags to create common layout for a web application called facelets tags. These tags gives flexibility to manage common parts of a multiple pages at one place.

For these tags you need to use the following namespaces of URI in html node.

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:ui="http://java.sun.com/jsf/facelets" 
>

Following are important Facelets Tags in JSF 2.0:

S.N.Tag & Description
1Templates
We'll demonstrate how to use templates using following tags
  • <ui:insert>

  • <ui:define>

  • <ui:include>

  • <ui:define>

2Parameters
We'll demonstrate how to pass parameters to a template file using following tag
  • <ui:param>

3Custom
We'll demonstrate how to create custom tags.
4Remove
We'll demonstrate capability to remove JSF code from generated HTML page.

JSF - Convertor Tags

JSF provides inbuilt convertors to convert its UI component's data to object used in a managed bean and vice versa.For example, these tags can convert a text into date object and can validate the format of input as well.

For these tags you need to use the following namespaces of URI in html node.

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:f="http://java.sun.com/jsf/core"  
>

Following are important Convertor Tags in JSF 2.0:

S.N.Tag & Description
1f:convertNumber
Converts a String into a Number of desired format
2f:convertDateTime
Converts a String into a Date of desired format
3Custom Convertor
Creating a custom convertor

JSF - Validator Tags

JSF provides inbuilt validators to validate its UI components. These tags can validates length of field, type of input which can be a custom object.

For these tags you need to use the following namespaces of URI in html node.

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:f="http://java.sun.com/jsf/core"  
>

Following are important Validator Tags in JSF 2.0:

S.N.Tag & Description
1f:validateLength
Validates length of a string
2f:validateLongRange
Validates range of numeric value
3f:validateDoubleRange
Validates range of float value
4f:validateRegex
Validate JSF component with a given regular expression.
5Custom Validator
Creating a custom validator

JSF - DataTable

JSF provides a rich control named DataTable to render and format html tables.

  • DataTable can iterate over collection or array of values to display data.

  • DataTable provides attributes to modify its data in easy way.

HTML Header

<html 
   xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html">
</html>

Following are important DataTable operations in JSF 2.0:

S.N.Tag & Description
1Display DataTable
How to display a datatable
2Add data
How to add a new row in a datatable
3Edit data
How to edit a row in a datatable
4Delete data
How to delete a row in datatable
5Using DataModel
Use DataModel to display row numbers in a datatable

JSF - Composite Components

JSF provides developer a powerful capability to define own custom components which can be used to render custom contents.

Define Custom Component

Defining a custom component in JSF is a two step process

Step No.Description
1aCreate a resources folder.
Create a xhtml file in resources folder with a composite namespace.
1bUse composite tags composite:interface, composite:attribute and composite:implementation, to define content of the composite component.
Use cc.attrs in composite:implementation to get variable defined using composite:attribute in composite:interface.

Step 1a: Create custom component : loginComponent.xhtml

Create a folder tutorialspoint in resources folder and create a file loginComponent.xhtml in it

Use composite namespace in html header.

<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:composite="http://java.sun.com/jsf/composite"
      >
...
</html>

Step 1b: Use composite tags : loginComponent.xhtml

Following table describes use of composite tags.

S.N.tag & Description
1composite:interface
Declare configurable values to be used in composite:implementation
2composite:attribute
Configuration values are declared using this tag
3composite:implementation
Declares JSF component. Can access the configurable values defined in composite:interface using #{cc.attrs.attribute-name} expression.
<composite:interface>
   <composite:attribute name="usernameLabel" />
   <composite:attribute name="usernameValue" />
</composite:interface>
<composite:implementation>
<h:form>
   #{cc.attrs.usernameLabel} : 
   <h:inputText id="username" value="#{cc.attrs.usernameValue}" />
</h:form>

Use Custom Component

Using a custom component in JSF is a simple process

Step No.Description
2aCreate a xhtml file and use custom component's namespace.
Namespace will the http://java.sun.com/jsf/<folder-name> where folder-name is folder in resources directory containing the custom compoent
2bUse the custom component as normal JSF tags

Step 2a: Use Custom Namespace: home.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:ui="http://java.sun.com/jsf/facelets">
   xmlns:tp="http://java.sun.com/jsf/composite/tutorialspoint">

Step 2b: Use Custom Tag: home.xhtml and pass values

<h:form>
   <tp:loginComponent 
      usernameLabel="Enter User Name: " 
      usernameValue="#{userData.name}" />
</h:form>

Example Application

Let us create a test JSF application to test the custom component in JSF.

StepDescription
1Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - First Application chapter.
2Create resources folder under src > main folder.
3Create tutorialspoint folder under src > main > resources folder.
4Create loginComponent.xhtml file under src > main > resources > tutorialspoint folder.
5Modify UserData.java file as explained below.
6Modify home.xhtml as explained below. Keep rest of the files unchanged.
7Compile and run the application to make sure business logic is working as per the requirements.
8Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
9Launch your web application using appropriate URL as explained below in the last step.

loginComponent.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:composite="http://java.sun.com/jsf/composite">
   <composite:interface>
      <composite:attribute name="usernameLabel" />
      <composite:attribute name="usernameValue" />
      <composite:attribute name="passwordLabel" />
      <composite:attribute name="passwordValue" />
      <composite:attribute name="loginButtonLabel" />
      <composite:attribute name="loginButtonAction" 
         method-signature="java.lang.String login()" />
   </composite:interface>
   <composite:implementation>
      <h:form>
         <h:message for="loginPanel" style="color:red;" />
         <h:panelGrid columns="2" id="loginPanel">
            #{cc.attrs.usernameLabel} : 
            <h:inputText id="username" value="#{cc.attrs.usernameValue}" />
            #{cc.attrs.passwordLabel} : 
            <h:inputSecret id="password" value="#{cc.attrs.passwordValue}" />
         </h:panelGrid>
         <h:commandButton action="#{cc.attrs.loginButtonAction}" 
            value="#{cc.attrs.loginButtonLabel}"/>
      </h:form>
   </composite:implementation>
</html>

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {

   private static final long serialVersionUID = 1L;

   private String name;
   private String password;
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }
   public String getPassword() {
      return password;
   }
   public void setPassword(String password) {
      this.password = password;
   }	
   public String login(){
      return "result";
   }	
}

home.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:tp="http://java.sun.com/jsf/composite/tutorialspoint">
   <h:head>
      <title>JSF tutorial</title>		     
   </h:head>
   <h:body> 
      <h2>Custom Component Example</h2>
      <h:form>
      <tp:loginComponent 
         usernameLabel="Enter User Name: " 
         usernameValue="#{userData.name}" 
         passwordLabel="Enter Password: " 
         passwordValue="#{userData.password}"
         loginButtonLabel="Login" 
         loginButtonAction="#{userData.login}" />
      </h:form>
   </h:body>
</html>

Once you are ready with all the changes done, let us compile and run the application as we did in JSF - First Application chapter. If everything is fine with your application, this will produce following result:

JSF custom component

Advertisements
Advertisements