INTRODUCING JAVA SERVER FACES (JSF)

In this second part of the tutorial, the author explains the practical steps to get our first few demos in JSF, running. Basic theory behind the steps also are given.

INTRODUCING JAVA SERVER FACES (JSF)

INTRODUCING JAVA  SERVER  FACES (JSF)

 ------------------------------
Installation & Simple Trials
-----------------------------------

JSF Home | PART-1 | PART-2 | PART-3

In this second part of the tutorial, the author explains the practical steps to get our first few demos in JSF, running. Basic theory behind the steps also are given.

We are using Tomcat-5 as the Web-server,along with  JDK 1.4.2, for the following experimental work.

First of all , we have to instal JSF package in our system.We downloaded JSF1.1 , from :

http://java.sun.com/j2ee/javaserverfaces/download.html

The jsf1_1.zip is round 10 MB and it takes about an hour to get downloaded .

We unzip the file into f:\jsf

 Inside the jsf folder we will get 7 sub-folders:

    a) docs  

  b) javadocs

  c) lib

  d) metadata

  e) renderkitdocs

  f) samples

  g) tlddocs

 The samples folder is useful to get started. There are four sample demos in that folder as   *.war  files.

    i)  jsf-cardemo.war

  ii)   jsf-components.war

  iii)  jsf-guessNumber.war

  iv)   jsf-nonjsp.war

Of these four, jsf-gueessNumber demo has minimum features , and is best suited for getting a feel for the technology.So, we copied jsf-guessNumber.war to :

'e:\tomcat5\webapps'  folder and restarted the Tomcat5 server.

----------------------------

  >e:\tomcat5\bin

  >set JAVA_HOME=e:\jdk1.4.2

  >startup

----------------------------

 The war file gets expanded automatically and we get the standard j2ee  directory structure, inside the

jsf-guessNumber folder in e:\tomcat5\webapps folder.

..\webapps\jsf-gussNumber\WEB-INF\classes

..\webapps\jsf-guessNumber\WEB-INF\lib

All the jar files needed for running the jsf program are present in ,

lib folder of WEB-INF.

They are listed below:

  i) commons-beanutils.jar

 ii) commons-collections.jar

 iii) commons-digester.jar

 iv) commons-logging.jar

 v) jsf-api.jar

 vi) jsf-impl.jar

 vii) jstl.jar

viii) standard.jar

It is useful to note down these details so that we can easily follow the documentation , articles and books, later.

Let us see the significance of these jar files now. ( refer to page: 118 of JSF by Dudney).

1)jsf-api.jar : contains the standard JSF API classes and interfaces that all JSF implementations must satisfy.

2) jsf-ri.jar : represents the Sun Reference implementation of JSF API.

3) jstl.jar & standard.jar  contain the JSTL files. The Reference implementation is based on JSTL.

4) The commons*.jar files are used by the Sun Reference implemenation.

'commons'  utilities are being mentioned by many experts as invaluable library for fast software development. It will be dealt with in detail in a forthcoming tutorial.

We can now start the browser and type the URL as :

'http://localhost:8080/jsf-guessNumber/index.jsp'

we will get textbox and a button along with the image of Sun's mascot, the 'Duke'..We will be asked to type a number between 0 & 10.If we type a character like 'a' and submit , we will get validation error message in red. If we type a 'wrong' guess, we are informed so. After a few trials, we get correct result. Nothing much. But,it shows that  JSF is working in our system and we get ready to begin our experimenation.!

The Struts application comes with struts-blank.war  and it is renamed  to our application name . It would have been better if the JSF distribution also came with such a skeleton application. But , there is no such demo and that is why we are using the guessNumber folder , so that we get the standard xml files, required for our application. If we type it from scratch, there will be typing errors and difficulties. The best thing is to rename  jsf-guessNumber folder as  ,(say) 'ourdemo'.

We now delete all the jsp files directly under 'ourdemo' folder.We delete all the class files under 'WEB-INF\classes' of 'ourdemo', because they are applicable to guessNumber app only.Retain all the jar files in lib folder under WEB-INF.

 There will be two jar files in WEB-INF folder.

   a)  web.xml

   b) faces-config.xml

We need not touch anything in web.xml file

but we can modify the existing faces-config.xml as follows:

----------------------------------------

//  \webapps\ourdemo\WEB-INF\faces-config.xml

 

<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE faces-config PUBLIC

  "-//Sun Microsystems, Inc.//DTD

   JavaServer Faces Config 1.1//EN"

  "http://java.sun.com/dtd/

   web-facesconfig_1_1.dtd">

<faces-config>

  <application>

  <locale-config>

  <default-locale>en</default-locale>  

  </locale-config>

  </application>

  <navigation-rule>

  <description> 

  </description> 

   </navigation-rule>

</faces-config>

---------------------------------------------

We should remember to restart the Tomcat server.

Now we edit a simple jsp file and test.

-----------------------------------

//..tomcat5\weebapps\ourdemo\mathew.jsp

<html>

<body>

I  AM MATHEW

<br>

</body>

</html>

--------------------------------------

If we type the  URL as http://localhost:8080/ourdemo/mathew.jsp,

we should get the result as :

'I AM MATHEW'.

Thus 'ourdemo' app is working.

----

We now create a simple JSF program to learn about the tag library of JSF.

-----------------------

// tomcat5\webapps\ourdemo\jsfgui.jsp

 

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN">

<%@ taglib  uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<f:view>

<html>

 <body  bgcolor="cyan">

 <h:form  id="form1" >  

 <h:outputText  value="how are you?"/>

 <h:graphicImage  url="/nathan.gif" />

  </h:form> 

  </body>

</html> 

</f:view>

--------------

When we type the URL as :

'http://localhost:8080/ourdemo/jsfgui.jsp', we should get  label 'how are you?' &  nathan.gif .

================================

But , we should learn something about two important  xml files, before we proceed further.

The first file that we have to  study,  is 'web.xml'  file in  :

'webapps\ourdemo\WEB-INF'  folder.As we got this file from an already running example (ie)guessNumber, everything required to test our jsf will be in place.The web.xml file is given below. We need not type this. It would be already available. The file is given here, just to point out the  important entries.

This file was obtained by deleting comments and descriptions from the original web.xml file of guessNumber application, to serve as a model, to make it less cluttered. This basic model file can then be used for other applications. In all the applications, the web.xml file will be same! (just as the web.xml file was same in all the Struts examples). But we should carefully note that the name of the central controller servlet and its URL-pattern. 

---------------------------------------

// ..\webapps\ourdemo\WEB-INF\web.xml

 

<?xml version='1.0' encoding='UTF-8'?>

 <!DOCTYPE web-app PUBLIC

  "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

  "http://java.sun.com/dtd/web-app_2_3.dtd">

 <web-app>

  <display-name>trial</display-name>

    <description> 

  </description>

    <context-param>

   <param-name>javax.faces.STATE_SAVING_METHOD</param-name>

  <param-value>client</param-value>

  </context-param>

    <context-param>

  <param-name>com.sun.faces.validateXml

  </param-name>

  <param-value>true</param-value>

   <description>

   </description>

  </context-param>

    <context-param>

  <param-name>com.sun.faces.verifyObjects</param-name>

  <param-value>true</param-value>

  <description>

  </description>

  </context-param>

    <!-- Faces Servlet -->

  <servlet>

  <servlet-name>Faces Servlet </servlet-name>

   <servlet-class>javax.faces.webapp.FacesServlet

   </servlet-class>

   <load-on-startup> 1 </load-on-startup>

  </servlet>

    <!-- Faces Servlet Mapping -->

  <servlet-mapping>

  <servlet-name>Faces Servlet

  </servlet-name>

   <url-pattern>/faces/*</url-pattern>

  </servlet-mapping>

    <welcome-file-list>

  <welcome-file>

faces/login.jsp

</welcome-file>

  </welcome-file-list>

</web-app>

============================================

In the servlet-mapping tag, we can make use of two styles of url-pattern. The first style is known as 'extension mapping'.

( example: *.jsf). The JSF specification recommends the use of 'faces'  as the extension but we can also use *.jsf.

The Faces Servlet automatically translates this name to a corresponding JSP.

----------------------------------------

 (EX)

 <  http://localhost:8080/demo/index.jsf>

   or

< http://localhost:8080/demo/index.faces>

  would be translated automatically as:

 <http://localhost:8080/demo/index.jsp>

----------------------------------------

The second method of servlet-mapping is known as 'prefix mapping'.

---------------------------------------

(example)

<url-pattern>/faces/*</url-pattern>

  In the web.xml file shown above, we are using 'prefix mapping'.

(ex)

   http://localhost:8080/demo/faces/

   will be  sent to:

   http://localhost:8080/demo/faces/index.jsp

===========================================

Another point to be noted is the detail about the STATE-SAVING-METHOD param.

The state of the various controls can be saved either in the server-side or in the client-side. We have specified 'client' as the option. This is saved as 'viewstate'.

If we have a sense of 'deja vu', it is because , the same technique is used in ASP.net too!

---

Next we should learn the basics of another important xml file .  Just as we had the struts-config.xml file, here too we have faces-config.xml file.

This file has the following child-elements: The order in which these elements occur is important and should be retained.

1) application:

2) factory:

3) component:

4) converter:

5) managed-bean

6) navigation-rule:

7) reference-bean:

8) render-kit:

9) lifecycle:

10) validator:  

----

For the usual applications, it is advisable to accept the defaults for most of these. Since 'zero' entries are permitted for all these child elements, we can just remove many of them.

The items shown in 'bold' such as managed-bean, navigation-rule are the most needed items.

However, for the jsfgui.jsp, these are not needed. So the skeleton faces-config.xml will appear as shown  earlier to begin with.

--------------------------------------------

We are now ready to test jsfgui.jsp.

Start the browser and type the URL as:

'http://localhost:8080/ourdemo/jsfgui.jsp'

We will get , a label 'how are you'  and nathan.gif.

So, we are able to get started with the tags in JSF.   The names of these tags are unfortunately , a bit contrived and confusing.

JSF provides two tag libraries,as mentioned at the beginning of jsfgui.jsp.

--------------------------------------------

<%@  uri="http://java.sun.com/jsf/html" prefix="h"   %>

<%@  uri="http://java.sun.com/jsf/core" prefix="f"  %>

-------------------------------------------

Inside the body tag, we must always provide <view>  tag. This is very important. All jsf

tags are placed inside the <view> tags.

The <view> tag provides a place for saving the state of the components tree before sending the response. If we have configured to save it in client, it is returned as 'hidden' viewstate , just as in ASP.net.

We will now see a few jsf tags and the html equivalents.

------------------------------------------

1) <h:form>   <form>

2) <h:outputText>

is simply a means to output any string to the browser. 

3) <h:inputText>  type=text

4) <h:commandButton>  type=submit

5) <h:inputSecret>  type=password

6) <h:panelGrid>  table

7) <h:graphicImage>   img

8) <h:message>

9)  <h:selectOneRadio>  <radio>

10) <h:selectOneMenu>   <select>

11) <h:selectBooleanCheckbox>   type=checkbox 

12) <h:OutputLabel>a label for input field)  

13) <h:outputLink>  hyperlink

14) <h:panelGroup  a  groupbox

15) <h:message> 

16) <h:selectManyCheckbox>  similar to checkboxlist of asp.net

17) <h:inputTextArea>  <textarea> 

18) <h:inputHidden>  hidden

19) <h:selectManyListBox>   multi-list select

20) <h:commandLink>  an action link.

----------------------------------------------

JSF Home | PART-1 | PART-2 | PART-3