JaiswalTraining

Get the online training



Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com




Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven







JavaServer Faces

Overview

JavaServer Faces is a Java-based Web application framework intended to simplify development of user interfaces for Java EE applications.
  • JSF is a framework for building user interfaces for web applications.
  • It brings component-based model to web application development.
  • It focuses only on user interface details and is not concerned about how the rest of the application is implemented.
  • It includes:
    •  A set of APIs for representing UI components and managing their state, handling events and input validation, page navigation, and supporting internationalization and accessibility.
    • A Java Server Pages custom tag library for expressing a JavaServer Faces interface within a JSP page.
  • It supports different renderers and not restricted to HTML only like other frameworks.
  • It supports MVC architecture
Features
  • Page navigation specification
  • Standard user interface components like input fields, buttons, and links
  • Type conversion
  • User input validation
  • Easy error handling
  • Java bean management
  • Event handling
  • Internationalization support
WHY JSF?

  • Ease/Simplify development
  • Support from/by tools
    • Eclipse, JBuilder, WSAD
  • Events easily tied to server side code
  • Ease of extension
  • Manage UI state
  • A device-independent GUI control framework
    • JSF can be used to generate graphics in formats other than HTML



Benefits of using JSF:

  • JSF provides standard, reusable components for creating user interfaces for web applications.
  •  JSF provides many tag libraries for accessing and manipulating the components.
  • It automatically saves the form data and repopulates the form when it is displayed at client side.
  • JSF encapsulates the event handling and component rendering logic from
    programmers, programmers just use the custom components.
  • JSF is a specification and vendors can develop the implementations for JSF.
JSF provides Web MVC

  • Controller
    • FacesServlet
    • Lifecycle
    • Application
    • NavigationHandler
    • ActionListener
    • Conversion and Validation
  • View
    • RenderKit
    • Renderers
  • Model
    • JavaBeans
    • EJB
Installing JSF
  • What we need?
    • JDK 1.5 or above
    • Tomcat 6.0 or above for JSF 1.2
    • Download JSF 1.2 from java web site
  • Create a web project
  • Copy the following files in project’s lib folder
    • jsf-api.jar, 
    • jsf-impl.jar, 
    • jsf_core.tld, 
    • html_basic.tld, 
    • jstl.jar, 
    • standard.jar

Navigation
  • To complete our JSF application, we need to specify the navigation rules.
  •  A navigation rule tells the JSF implementation which page to send back to the
    browser after a form has been submitted.
<navigation-rule>
   <from-view-id>/index.jsp</from-view-id>
   <navigation-case>
     <from-outcome>login</from-outcome>
     <to-view-id>/welcome.jsp</to-view-id>
    </navigation-case>
</navigation-rule>

The <from-view-id> tag identifies the source page, and the <to-view-id> tag
identifies the destination page.

In addition to the navigation rules, the faces-config.xml file contains the bean
definitions
<managed-bean>
 <managed-bean-name>user</managed-bean-name>
  <managed-bean-class>
     myjsf.UserBean
     </managed-bean-class>
     <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

The managed-bean-class tag simply specifies the bean class

FacesServlet Configuration

When you deploy a JSF application inside an application server, you need to
supply a configuration file named web.xml.

<web-app>
8. <servlet>
9. <servlet-name>Faces Servlet</servlet-name>
10. <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
11. <load-on-startup>1</load-on-startup>
12. </servlet>
<servlet-mapping>
15. <servlet-name>Faces Servlet</servlet-name>
16. <url-pattern>*.faces</url-pattern>
17. </servlet-mapping>
</web-app>
  • All JSF pages are processed by a special servlet that is a part of the JSF implementation code

Managed Beans
  • The bean simply captures the data entered by a user after the user clicks the submit button.
  • This way the bean provides a bridge between the JSP page and the application logic.
  • In JSF, the Java Beans are sometimes called "backing beans“ or  “Managed Beans”
  • Beans that represent the form
  • form parameters
  • action controller methods
  • event handling methods
  • placeholders for results data.
  • Beans represent request parameters
  • Declare beans in faces-config.xml
Create a Bean

package myjsf;

public class UserBean {
   private String name;
   
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
 }

Configuring Managed Bean

   <managed-bean> 
      <managed-bean-name>user</managed-bean-name>
      <managed-bean-class>myjsf.UserBean</managed-bean-class
      <managed-bean-scope>session</managed-bean-scope> 
   </managed-bean>



A Simple JSF example with Eclipse
  • Create a new Dynamic project as shown below.
    • New-->Dynamic Web Project



  • Give any Name as we give it SimpleJSFWebApplication




Adding all needed jar files.






  • Click on Add External JARs... tab...



  • Add All Neccessary Jar files of JSF.



  • Create a bean file in myjsf package with name UserBean as shown below.
  • Clcik on finish




UserBean.java
package myjsf;

public class UserBean {
   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;
  }

     

}

  • Create a index.jsp as shown below

index.jsp



  • Create another jsp file welcome.jsp as shown below.. 

welcome.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>A Simple JavaServer Faces Application</title>
      </head>
      <body>
         <h:form>
            <h3>
               Welcome to JavaServer Faces, 
               <h:outputText value="#{user.name}"/>!
            </h3>
         </h:form>
      </body>      
   </f:view>
</html>

  • Now create faces-config.xml file in WEB-INF folder as shown below.
  • Defined navigation rule and configured bean class here.

faces-config.xml
<?xml version="1.0"?>
<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">
   <navigation-rule>
      <from-view-id>/index.jsp</from-view-id>
      <navigation-case>
         <from-outcome>login</from-outcome>
         <to-view-id>/welcome.jsp</to-view-id>
      </navigation-case>
   </navigation-rule>

   <managed-bean> 
      <managed-bean-name>user</managed-bean-name>
      <managed-bean-class>myjsf.UserBean</managed-bean-class
      <managed-bean-scope>session</managed-bean-scope> 
   </managed-bean>
</faces-config>

  • Now configured FacesServlet in web.xml file as shown below.
 
web.xml
<?xml version="1.0"?>
<web-app 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-app_2_5.xsd"
  version="2.5">
   <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>*.jsf</url-pattern>
   </servlet-mapping>  

   <welcome-file-list>
      <welcome-file>index.jsp</welcome-file>
   </welcome-file-list>
</web-app>


Directory Structure of the Project



  • Now Deploy the project
  • Run as----->Run on Server
Output:- When we deploy the project and run index.jsf the following page will be displayed.



On clicking the login button the request trasfer to welcome.jsp page where a Greeting message will be shown.



Download Source with lib
Download War without lib