[JSF step by step] The simplest JSF application

.
JSF step by step
.

The simplest JSF application. ver 0.1

Download the zip archive for current lesson here - SimplestJSFApplication.zip
JavaServer Faces v1.1.01 Reference Implementation is required for this application..
To build the war file ,you should set path to catalog with TomCat in build.properties file. And in the same file you should set the path to all needed JSF jar files(jsf-api.jar, jsf-impl.jar,...).

So, purpose of this lesson is to write the simplest JSF application.
As usual it will be "Hello, world!" application.

For a start you should create next structure of directories and files :

Directories and files for the simplest application

SimplestJSFApplication
	index.jsp
	WEB-INF
		web.xml
		faces-config.xml
		lib
			commons-beanutils.jar
			commons-collections.jar
			commons-digester.jar
			commons-logging.jar
			jsf-api.jar
			jsf-impl.jar
			jstl.jar
			standard.jar

As you can see, our application will consist of one jsp file index.jsp, two config files in the directory WEB-INF - web.xml and faces-config.xml, and also we need all jar files from JSF installation.

Let's look at that part of application which will be visible for the end user - index.jsp:

index.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"%>
<html>
   <body>
      <f:view>
         <h:outputText value="Hello, world!!!"/>
      </f:view>
   </body>
</html>

First of all we imported 2 libraries of JSF tags:

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

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

The core JavaServer Faces tag library was assigned to prefix f.
This library provides custom actions that are independent of any particular RenderKit (converters, validators, actions for event handling).
And library of HTML tags was assigned to prefix h. This tag library contains JavaServer Faces component tags for all UIComponent + HTML RenderKit Renderer combinations defined in the JavaServer Faces Specification.
Although you can use your own prefixes.

Next we can see our first JSF tag - <f:view>.
Tag <f:view> is a container for all JavaServer Faces tags on the page.
In this case <f:view> is the container for <h:outputText> tag.

The tag <h:outputText> just display a value, wich is stored in its attribute value.

It is enough the jsp code for the first example.

Now let's look at the simplest config file web.xml:

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>

	<!--The name of JSF application.
	This name will be used by various tools.
	For example Tomcat Web Application Manager will be display
	this name in the table of installed applications-->

	<display-name>The simplest JSF application.</display-name>


	<!--FacesServlet it is controller of our JSF application.
	It will process all requests to our application.-->

	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
	</servlet>


	<!--In this case tag <url-pattern> indicate to container
	redirect all requests wich ends with /faces/* to the Faces Servlet.
	For example next URLs will match this pattern:
	http://www.mydomain.com/SimplestJSFApplication/faces/index.jsp
	http://www.mydomain.com/SimplestJSFApplication/faces/greeting.jsp-->

	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>

</web-app>

As you can see it is usual standard config file web.xml.

Now it's the time to look inside the main config file of the JSF application - faces-config.xml:

faces-config.xml

<?xml version="1.0"?>
<!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>
   <!--Now this config file is empty-->
</faces-config>

In this case config file is empty.
But in more sophisticated applications it will consist of many tags, wich will describe structure of JSF application, wich will describe interaction parts of the application and so on...

It is all. We viewed all parts of the simplest JSF application.
And now you can create WAR archive and deploy it to your Servlet/JSP container.
I use Apache Tomcat 5.0.1.

After you deploy application you can try to run it.
To do so enter next url in your browser - http://localhost:8080/SimplestJSFApplication/faces/index.jsp
And if you did all right, then you should see next page in your browser:

Hello, world!!!

If you look at source of the page you can see next HTML:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
   <BODY>
      Hello, world!!!
   </BODY>
</HTML>

Tag <h:outputText value="Hello, world!!!"/> was transformed in the text "Hello, world!!!".

My congratulations!!! You have done the first JSF application by yourself.

Vladimir Bezugliy · vladimirbezugliy@gmail.com · JSF step by step