Java Server Faces 2.0
JSF 2.0 is a MVC framework, which provide very rich reusable UI components for Java Web Applications.
In JSF 2.0 for navigation in between pages we use annotations. but for complex navigation, suggested to configure the navigation in faces-config.xml.
Below tutorial will help you in step by step implementation of simple JSF application.
The required tools and Technologies for building the applicatoin are as below.
a) Create a Dynamic web project.
b) Select target environment as Apache Tomcat 7.0 and Configuration is JavaServer Faces v2.0 project .
c)Check generate web.xml deployment descriptor .
Check the JSF librarys above and click on finish button.
Create the package for managed bean and create a Java class by name HelloBean.java in that package.
Below tutorial will help you in step by step implementation of simple JSF application.
The required tools and Technologies for building the applicatoin are as below.
- JDK 1.6
- Eclipse 3.7
- JSF 2.1.7
- Tomcat 7.0
a) Create a Dynamic web project.
b) Select target environment as Apache Tomcat 7.0 and Configuration is JavaServer Faces v2.0 project .
c)Check generate web.xml deployment descriptor .
Create the package for managed bean and create a Java class by name HelloBean.java in that package.
Managed Beans
- Managed Bean is simple java bean class managed by the JSF framework. This class contains getter and setter methods of the attributes of the form, business logic or baking bean too.
- Managed bean is nothing but Model for UI component and can be accessed from JSF page.
- In JSF1.2 version , Managed Bean is configured in the faces-config.xml.
<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>
4. JSF 2.0 on words, Managed beans can be registered using annotations.
package com.managedbean;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class HelloBean implements Serializable{
private static final long serialVersionUID = -3312527179446303127L;
private String message;
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
JSF 2.0 Pages
In JSF 2.0, jsf pages are created by XHTML file format. A file with .xhtml extension.
To import JSF 2.0 components in to jsf pages, declare the JSF namespace in the jsf pages at the top of the page.
<html xmlns="http://www.w3.org/1999/xhtml"This tutorial contains two JSF pages, hello.xhtml and message.xtml. When user inputs message on hello.xtml page and submit the page. The message will be displayed on the message.xhtml page.
xmlns:c="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
hello.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:c="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Hello World</title>
</h:head>
<h:body>
<h3>Hello World Example</h3>
<h:form>
<h:inputText value="#{helloBean.message}"></h:inputText>
<h:commandButton value="Welcome Message" action="welcome"></h:commandButton>
</h:form>
</h:body>
</html>
message.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">
<h:head>
<title>Message Page</title>
</h:head>
<h:body bgcolor="white">
<h3>Hello World Example</h3>
<h4>Welcome #{helloBean.message}</h4>
</h:body>
</html>
JSF Expression Language
In the above xhtml pages, #{..} this is the JSF expression language. #{helloBean.message}, when page is submitted from hello.xhtml, container will find the corresponding Managed bean helloBean and set the value entered in the text box via setMessage() method. When message.xhtml page is displayed, container will find the same helloBean session and display the submitted text in message.xhtml page via getMessage() method.
web.xml
<?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_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>sampleJSF</display-name>
<welcome-file-list>
<welcome-file>faces/hello.xhtml</welcome-file>
</welcome-file-list>
<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>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<description>
This parameter tells MyFaces if javascript code should be allowed in
the rendered HTML output.
If javascript is allowed, command_link anchors will have javascript code
that submits the corresponding form.
If javascript is not allowed, the state saving info and nested parameters
will be added as url parameters.
Default is 'true'</description>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>
If true, rendered HTML code will be formatted, so that it is 'human-readable'
i.e. additional line separators and whitespace will be written, that do not
influence the HTML code.
Default is 'true'</description>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>
If true, a javascript function will be rendered that is able to restore the
former vertical scroll on every request. Convenient feature if you have pages
with long lists and you do not want the browser page to always jump to the top
if you trigger a link or button action that stays on the same page.
Default is 'false'
</description>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
</web-app>
Now deploy the code in tomcat server, when code is published it open the hello.xhtml page.
On entering message and submitting the page, message.xhtml page will be displayed with entered message.
Posts
