inicio mail me! sindicaci;ón


working with Rails 2.0, Ruby on Rails, Flex, Flash and …

Archive for Java Server Faces

Some nice links for ICEFaces, Facelets, Ajax4JSF

During the last month I collected some nice bookmarks. So if you are developing web applications using JSF this might be interesting to you:

General Links:

Tutorials of interest:

Facelets Palette for Netbeans IDE

I contributed my simple facelets and JSF palette to the nbfaceletssupport project initiated by Petr Pisl. You can download it from the following website:



Tutorial >> Facelets Support in Netbeans

So, you have been using JSF for some time and think about Struts and a perfect page structuring mechanism like Tiles already integrated within. So why isn’t something like that integrated with JSF. Well, I don’t know, but there is a technology simple and powerful called Facelets and I would say it’s quite a lot better than Tiles. And there is more: When you use Netbeans to develop your JSF Application, you can get a perfect Plugin, which gives you support to easily develop your Application with Facelets.

This tutorial will be very small and only show some basic parts of the plugin mentioned above. It should give you the needed information to decide, whether it could be interesting for you.

So let’s get started! What you need are only a few things:

  1. Go to the Netbeans project page and download the latest Netbeans IDE, just click here
  2. Go to the NBFaceletsSupport page and get the latest snapshot of the plugin, to get to the download page click here and to get to the “How to install” page click here.
  3. Get yourself the Mysql Connector. Just download it from this place.

Ready? Then let’s move on…..

Start by creating a new project. Choose “Web” and “Web Application”. Name the application “running” and choose the integrated Tomcat Server. In the next section choose “Facelets” as your framework, then click finish.

The nbfaceletssupport plugin generates some additional files, which will help you to get started. One file is the template.xhtml and the other is the template-client.xhtml — Facelets should be used and developed with using xhtml file extension. However Netbeans doesn’t support code completion, jsf support in xhtml files. And here comes the facelets support plugin in action, it extends netbeans to use all this in xhtml files, it has a complete palette for jsf core, html and facelets components, additionally it gives error messages when writing wrong lines of code. — Let’s start developing a small application that my help us control our running every day or week or whenever. The application should do the following:

At the moment your application structure should look like this:

Application Structure JSF

Facelets lets you structure your webpage, the view of your application. So you can easily define a navigation section, content section and footer section in your application view. When you change something in your navigation it will be available for the rest of your application, without changing it in every page you created.
So all you need to do is to define a template how your pages should look like (you can define many templates, but we will keep it simple here). The facelets support plugin did that already for you, its called “template.xhtml”. In this template you can design the layout of your webpage,

template xhtml

in those sections where you would like to put dynamic content you should use facelets. With “<ui:insert/>” you are able to define a place where dynamic content should be placed. I already know how my navigation should look like, it will be rather static and should be available in almost all pages on my site. I’m able to declare a standard navigation page and include it (”<ui:include/>” in the template. The content of my page will be completely dynamic, so I won’t declare a default content for the template. Here comes the plugin to help you - you could add a facelets component to your page by:

  • using the Palette on the right side of the netbeans IDE, just Drag and Drop the component in the right place on the page. The plugin will automatically add xmlns:ui at the head of your page.
  • using code completion, which will help you to write less code

For this small example application I changed the default css file. You can download it here:

  1. default.css
  2. template.xhtml

Let’s fill our application with content. Running is a nice sport to stay healthy, but I would like to track my running every day and see if I’m getting better. I always go out with my pulse meter and have a timer to track my distance. We could build a small application storing the following data:

  • Date of my run
  • distance
  • time
  • heart frequency
  • average heart frequency
  • temperature
  • weather (like rainy, snowy, foggy, clear, etc.)

This will be a simple application, so we’ll use one table to cover all this attributes in the database. MySQL has a nice Administrator to edit schemas, add columns, etc. - you can also use your favourite editor for it. I generated the following table:

Picture of the Database table