Saturday, 18 June 2011

Understanding Java Server Faces 2.0 Part 1





Update : I put new post for Why should I learn JSF 
                I put new post for Understanding Java Server Faces 2.0  Part 2 


JavaServer Faces (JSF) is a Java-based Web application framework intended to simplify development integration of web-based user interfaces. Java Server Faces (JSF) 2.0 is a improved component of Java EE 6 Specification.  Its Component based model. Its is alternative technology for Struts, JSP, Spring. Its MVC (Model-View-Controller) based architecture.


If JSF 2.0 is compared to its previous version JSF 1.2,  there are more functionality are added

  •      Facelets is a default View Declartion Language (VDL)
  •      Full spport for AJAX
  •      Composite components
  •      Beans Validation
  •      Implicit navigation
Facelets
Facelets used to describe the UI in tag styled format. Its extension is .xhtml and application usually accessed in .jsf, .faces, .xhtml . we can configure in web.xml.

Lifecycle of JSF





The above diagram is JSF life cycle. we explain this life cycle with sample JSF Application

we have 2 JSF pages and one bean java class



index.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>Sample JSF Application</title>
    </h:head>
    <h:body>
        <h:form>
            Enter your Name 
            <h:inputText value="#{demoBean.name}" required="true" />
            <h:commandButton value="Submit" action="welcome" />
            
        </h:form>
    </h:body>
</html>

welcome.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>Welcome Page</title>
    </h:head>
    <h:body>
        Hello #{demoBean.name}
    </h:body>
</html>

DemoBean.java
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package org.ramki.bean;

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

/**
 *
 * @author ramki
 */
@ManagedBean()
@SessionScoped
public class DemoBean {
    private String name;

    public String getName() {
        return name;
    }

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

}

here each web page uses the facelet tag library

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
so, we need to add the tag library in html with prefix 'h' by default.

each HTML UI elements like text field, button, checkbox, etc... Facelets has equal tags to fullfill the standard UI like <h:inputText>, <h:commandButton>,etc...

when we execute this application index.xhtml page is translated into views. View is collection of UI components arranged paricular manner. for example our index.xhtml page turns into View
View Tree of index.xhtml page


UIViewRoot is Top level components add HtmlOutputHead and  HtmlOutputBody. These 2 components translated in <head> and <body> tag in Render phase. In body component has input text field and command button components.


If browser request index.html first time the Phase 1 & 6 only executed all other phases are bypassed

Phase 1 : Create / Restore View
Every JSf page is create the view. the that view is cached for future use. for example index.html page is requested by browser then container search index.xhtml view tree. Above diagram is view tree of index.xhtml page.If found in cache the restore the view, otherwise create the view tree.


Phase 6 : Render the View
     JSF have Render Kit to render the view to generate appropriate format. for example HTML render kit generate html code from view. Render kit knows how to render the UI components.

now user fill some details in index.xhtml the click some action the same page is requested to server now this time index.xhtml tree view is restored and run all remaining phases.

Phase 3: Apply values from User to View
   if user sends some data like POST or GET form values, this phases apply this values to the Tree View like fooling diagram


Phase 4: Validate the values
   This is optional phase. if any validations is mentioned then this phases is executed. otherwise it simply bypassed. for example in index.xhtml input text field we mentioned required=true its one of the validation. so if submit the form without filling values this phases reporting exception and forward to directly render phase. all other phaes are bypassed. if this phases execute without exception the phase 5 is executed

Phase 5: Fetch New View
   In this phases is responsible for find the next view to render and displayed to user. for example our example in command button has action property to mentioned welcome value. in this phase find the welcome.xhtml page and gives to render phase. here we used implicit navigation its one of the features of JSF 2.0

When we run the above example




Update : I put new post for Why should I learn JSF
                 I put new post for Understanding Java Server Faces 2.0  Part 2 


Watch the you tube with 480p or 720p




Comments are welcomed 



By
Related Posts Plugin for WordPress, Blogger...