logo
Home Tutorial

How To Create Your Own Java Server Faces Components



Download the initial project here: Step0.zip

The tutorial consists of seven separate steps for building up an example application. Each step adds new code to the previous example. The tutorial includes code representing the result of each step. If you are lost, you can compare these target results with your results. You can find the final version of the project for particular step at the end of each page. Also, you might want to add some extra feature to the code to test how it works. If this messes things up, you can just replace your code with the included code to go on to the next step.

For this tutorial, you can use any tools that allow you to work directly with source code. We recommend you to use Exadel JSF Studio. JSF Studio allows the running of JSF applications without redeployment. This is extremely important when you play with the code by adding new features to test how they work. At the same time, JSF Studio allows you to have full control over the source code. We even recommend turning on the "Use Source Tab as a default for multi-tab editors" option in the Preferences Editor (Exadel->Editors section). You can always use the GUI feature of JSF Studio later to slash the development time when you start to understand enough how things works on the source code level. The provided example is fully adapted to work with Exadel JSF Studio.

Exadel JSF Studio allows debugging Web applications in the same manner in which you can debug a regular Java application within the Eclipse environment. This is an extremely important feature for learning.

To start working with the tutorial example, copy the "ticker" folder to a new place on the disk. If you use JSF Studio, copy this folder to the Eclipse workspace folder (or wherever you usually keep projects) and then import this project using the Eclipse File->Import menu. Leave the server.xml registration option checked on the second screen of wizard. This allows you to change and then run an application without any special redeployment.

Each ticker folder contains four subfolders:

  • ant
  • ExtLib
  • JavaSource
  • WebContent

Ant Folder

The ant folder contains the build.xml file that can be used to compile the example and deploy it to a target servlet container to run. In order to use this script be sure that ant is in your system path. The default Ant target is "deploy", so if you launch Ant without parameters, it create an additional folder named deploy and puts the deployable war file into it. If you want, you can provide another folder as the target for deployment. Open the build.xml file for editing and set the "deploy-dir" Ant property to the different target folder.

ExtLib Folder

The ExtLib folder just contains the servlet.jar file that is required to be in the classpath to have the code compiled. This jar file is added to the classpath only when you use the Ant script. (This file is not used by JSF Studio). If you want, you can any replace it with you own library that contains required classes for compilation. Replace the property with name ‘servlet.path’ for this purpose.

JavaSource Folder

The JavaSource folder contains the java source files and resource bundle files.

WebContent Folder

The WebContent folder contains the pre-deployment structure for a standard J2EE application.

Root Folder

Additionally, the root folder contains three configuration files that start with a dot. The .project and .classpath files are used by Eclipse and the .exadelproject file is just used by JSF Studio.

See Also:

Guidelines for Designing Reusable Custom Components Using JavaServer Faces Technology


This article gives you some basic guidelines for designing
custom components using ChartComponent as an example.

Creating JSF Custom Components by Bill Dudney


This article illustrates how to build custom components for use
in web applications based on JavaServer Faces (JSF).