|
INTRODUCING
JAVA SERVER FACES
 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.
i) UI components & JSF Tag library
ii) Navigation
iii)
Event-handling
iv) BackingBeans & ManagedBeans config
v) value-binding
vi) method-binding
vii)
validation
viii) 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.
---------------------------------------
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
<!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.
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.
*******************************************
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)
***************************************
JSF Home | PART-1
| PART-2 | PART-3
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
