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.
- UI components & JSF Tag library
- Navigation
- Event-handling
- BackingBeans & ManagedBeans config
- value-binding
- method-binding
- validation
- converters
-----------------------------------
These will be the preliminary topics, followed by:
- Security
- tabular data
- business layer & data tier
- 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)
***************************************