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"
<%@
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
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.
----------------------------------------------