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

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