INTRODUCING JAVA SERVER FACES

In attempting to understand a new technology, beginning with an overall perspective, what Bill McCarty would call 'Upper Management Perspective' is more important than the technical details.

INTRODUCING JAVA SERVER FACES

INTRODUCING JAVA SERVER FACES

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

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

In this third part of tutorial on JSF, the author deals with important topics like 'backing beans', event-handling, validation etc.

In attempting to understand a new technology, beginning with an overall perspective, what Bill McCarty would call 'Upper Management Perspective' is more important than the technical details. Next comes' hands-on experimentation'. And finally, we go into the details of practical implementation.

While the first part of this tutorial dealt with the overall perspective and the need for JSF,the second part gave the practical steps required for installation, preliminary testing and basic trial for our own example.In this third part , we will have a deeper study of the essential ingredients of the JSF architecture ,backed up with simple illustration for each of those ingredients. In a nice but bulky book 'JSF IN ACTION', (Manning/DreamTech) published in Jan 2005, KITO MANN, has given an outline of the various component parts of the JSF, as follows.

  1. UI components & JSF Tag library
  2. Navigation
  3. Event-handling
  4. BackingBeans & ManagedBeans config
  5. value-binding
  6. method-binding
  7. validation
  8. converters

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

These will be the preliminary topics, followed by:

  1.  Security
  2. tabular data
  3.  business layer & data tier
  4. Internationalization

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

We have already seen the basics of JSF tags.In our next demo, we will study the details about 'Navigation'.
This requires some suitable entries in faces-config.xml file.

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

//jsfevent.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:commandButton value="mathew" action="success" /> 
<h:commandButton value="amy" action="failure" /> 
</h:form> 
</body> 
</html> 
</f:view> 

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

//  e:\tomcat5\webapps\ourdemo\mathew.jsp ( already available)

<html> 
<body> 
I AM MATHEW 
</body> 
</html> 

-------------------------------------------- //e:\tomcat5\webapps\ourdemo\amy.jsp

<html>
<body> 
I AM AMY 
<br>
</body>
</html> 

--------------
Now, we have to make the following entries in faces-config.xml
// e:\tomcat5\webapps\ourdemo\WEB-INF\faces-config.xml ( this is to be added to existing entries)

<navigation-rule> 
<from-view-id> 
/jsfevent.jsp 
</from-view-id> 
<navigation-case> 
<from-outcome>success</from-outcome> 
<to-view-id>/mathew.jsp</to-view-id> 
 </navigation-case> 
<navigation-case> 
<from-outcome>failure</from-outcome> 
<to-view-id>/amy.jsp</to-view-id> 
</navigation-case> 
</navigation-rule> 

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

and restart tomcat server

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

Now, open IE and type the URL as 'http://localhost:8080/ourdemo/faces/jsfgui.jsp'
We will get just two buttons.One button will have the caption as 'mathew' and the other button's caption will be 'amy'. If we click button1,we will be taken to mathew.jsp and if we click button2 , we will be taken to amy.jsp, with corresponding displays. Thus, we have given a demo for action event as well as 'Declarative navigation'.

We say,this is declarative navigation, because, the outcome of clicking 'button1' has not been hard-coded but simply mentioned as a string "success" in the button's action attribute.
What this 'string' should do, has been indicated in the jsf-config.xml under navigation rule attributes., as shown below.
-----------------------------------------------------------------

<navigation-case> 
	<from-outcome>success</from-outcome> 
	<to-view-id>/mathew.jsp</to-view-id> 
</navigation-case>

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

This is very much similar to the practice in Struts. Similarly, for button2 ( with caption 'amy'), the action attribute is 'failuree' and in the faces-config.xml, we have mapped it to 'amy.jsp'.

Hopefully, this illustration explains the method of action event, navigation rule syntax and princople of declarative navigation.

******************************************

 Now, we take up the MOST IMPORTANT topic of BackingBean. Though the name is unique, it is just nothing but the standard javabean.

Let us first create a bean 'player'. The procedure is as follows:

f:\>md jsfexample

f:\>cd jsfexample

f:\jsfexample>md demo

f:\jsfexample\demo\>edit player.java
( it may be noted that the name of the working folder NEED NOT BE the same name as the package name! Our working folder is 'demo' but the package name is ourdemo).

( The package name has nothing to do with the Application context name either, though it is followed by Sun demos.)

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

// f:\jsfexample\demo\>player.java

package ourdemo; 
import javax.faces.context.*; 
import javax.faces.component.*; 
import javax.faces.validator.*; 
public class player 
{ 
String firstname; 
String lastname; 
public void setfirstname(String a) 
{ 
firstname=a; 
} 
public String getfirstname() 
{ 
return firstname; 
} 
//---------- 
public void setlastname(String b) 
{ 
lastname=b; 
} 
public String  getlastname() 
{ 
return lastname; 
} 
//-------------------
public void changeName() 
{ 
lastname= firstname+" "+lastname; 
} 
}

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

Now set path for the current folder.

f:\jsfexample\demo>

set path=c:\windows\command;e:=\jdk1.4.2\bin

set classpath for the folder as:

demo>set

classpath=j:\jsfexample;

f:\jsf11\lib\jsf-api.jar ( to be typed in a continuous line).
---------
Now, we will be able to compile without any problem.

\demo>javac player.java

The player.class file thus obtained must be copied to 'ourdemo' folder under :

e:\tomcat5\webapps\ourdemo\WEB-INF\classes
----------------------------======
 edit \webapps\ourdemo\jsfmbean.jsp

//' jsf-managedbean' demo

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

//jsfmbean.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:inputText id="text1" value="#{text2}" />
<h:inputText id="text2" value="#{player.lastname}" />
 <h:commandButton action="success" value="success" />
 <h:commandButton action="#{player.changeName}" value="failure" />
 </h:form>
</body>
</html>
</f:view>

=============================================
 
Add the following entry to faces-config.xml

<navigation-rule> 
<from-view-id>/jsfmbean.jsp</from-view-id> 
<navigation-case> 
<from-outcome>success</from-outcome> 
<to-view-id>/mathew.jsp</to-view-id> 
</navigation-case> 
</navigation-rule> 
<managed-bean> 
<managed-bean-name>player</managed-bean-name> 
<managed-bean-class> 
ourdemo.player 
</managed-bean-class> 
<managed-bean-scope> 
session 
</managed-bean-scope> 
<managed-property> 
<property-name>firstname</property-name> 
<value>Mahathma</value> 
</managed-property> 
<managed-property> 
<property-name>lastname</property-name> 
<value>Gandhiji</value> 
</managed-property> 
</managed-bean>

==============================
Open IE and type the URL as ;
http://localhost:8080/ourdemo/faces/jsfmbean.jsp

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

We will get two textboxes and two buttons. We will get the value 'Gandhiji' bound in the second textbox.There will be no entry in text1; This is known as 'Value Binding'. What do we mean by that? As we know, the player bean class has two attributes namely, 'first name ' and 'last name'.

We have specified in the jsf-config.xml file the init value for these two attributes. In the jsp sheet we have mentioned that the value of text2 is "#{player.lastname}".
This is known as JSF EXPRESSION LANGUAGE . (This is very much similar to JSP EL. But, it is not totally compatible with JST EL).

Thus the value of the bean is bound to text2. This is a two-way process. Hereafter, if either the bean's attribute is changed by code or by the user changing the value in the screen, the inner vvalue is changed, each time the page is submitted. The value is retained ( sticky) so long as the page's session is maintained. This is a very important feature and almost the most important feature in JSF.

---------------------------------------------
There is another method of binding also. This is very unique in JSF, not found in Struts. This is known as 'method binding'. Our player bean has a method known as 'changeName'.

When the button 'success' is clicked we will be transfered to mathew.jsp. When the button 'failure' is clicked we will get 'Mahathma Gandhiji' in textbox2. This is an example for method binding. This result is obtained from the 'changeName' method of the bean. 0

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

Next we will move on to another important part(ie) 'Validation'. JSF provides three standard validator classes
  1.DoubleRange Validator

  JSF Tag : validateDoubleRange
  This tag validates whether the submited value lies in the specified floating point range. A minimum value, a maximum value or both may be specified.
2.Length Validator
  JSF Tag : validateLength
  This tag validates the length of the submitted string value and that its length is within the supplied minimum and maximum values.
3.LongRange Validator
  JSF Tag : validateLongRange
  This tag validates whether the submitted value can be converted to a long and that it is within the supplied minimum and maximum values.
  Now we will see an example for standard validation.
--------------------------------------

//jsfvalidation.jsp 1

<!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="Enter name not more than 5 chars" /> 
 <br> 
<h:inputText id="text1" required="true" value="" > 
<f:validateLength maximum="5" /> 
</h:inputText> 
<h:message style="color:red" for="text1" /><br> 
 <h:outputText value="Enter number between 
1000 and 99999"/><br> 
<h:inputText id="text2" required="true" value="" > 
<f:validateLongRange minimum="1000" maximum="99999" /> 
</h:inputText> 
<h:message style="color:red" for="text2" /> <br> 
 <h:outputText value="Enter number between 1.000 and 9999.999"/><br> 
<h:inputText id="text3" required="true" value="" > 
<f:validateDoubleRange minimum="1.000" maximum="9999.999" /> 
</h:inputText> 
<h:message style="color:red" for="text3" /> <br><br> 
 <h:commandButton value="Click Me" /> 
 </h:form> 
</body> 
</html> 
</f:view>

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

Open IE and type the URL as http://localhost:8080/ourdemo/faces/jspvalidation.jsp

We will get three labels and three textboxes. Type the value 'sam' in textbox1, 10000 in textbox2 and 19.99 in textbox3 and click the button 'Click Me'. We won't get any error message.When the button is clicked, the page is submitted to the server 2

When we leave any textbox empty, we'll get the error message as 'value is required'. Type the value 'thomas' in textbox1 and click submit. We will get the error message 'value is greater than allowable maximum of '5''. When we type some characters in textbox2 and textbox3, we will get the error message as 'value is of the correct type '. When we type the numbers out of range in textbox2 and textbox3, we will get the error message 'Specified attribute is not between the expected values'.

We shall see the other topics of JSF in the next installment.

******************************************* 3

Reference Books:
  1.Java server faces in action
  - Kito D.Mann
  (  Manning/DreamTech (2005 jan).
  2.Java server faces - Hans Bergsten
  (SPD/OReilly/june 2004)
  3.Mastering Java server faces
   - Bill Dudney
  ( Wiley/DreamTech/2004)
  ***************************************