inicio mail me! sindicaci;ón


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

Tutorial >> Running and Facelets Support in Netbeans (with JPA, Glassfish and MySQL 5)

June 2, 2007 at 14:09

I will give you a short overview on the NBFaceletsSupportPlugin (NBFS) for the Netbeans IDE. The Plugin is developed by Petr Pisl. He has already written a very good installation and usage guide (click here). I would like to make an addon to this by writing a small WebApplication. The WebApplication uses Facelets and Java Persistence Technology with Glassfish and a MySQL Database to store the data. To get started you need a few things:

First things to do are:

  1. Install Netbeans on your computer
  2. Install the NBFaceletsSupport Plugin (I will call it NBFS from now on)
  3. Install the Glassfish Server and make it available in Netbeans
  4. Throw the Connector Jar in the lib folder of your glassfish installation
  5. Install MySQL 5 and create a new Database called “persistencedb“. Add a user named “persistence” and create a password “persistence“. The user needs rights to use the schema/database “persistencedb“. A very easy way to do that is to use MySQL GUI Tools

I always wanted to store the results of my everyday running in a database, list them, edit or delete them and make some small statistics (perhaps in a future tutorial). A small JSF Appalication is a nice way to do this, using facelets and jpa makes it even better and having NBFS at hand it’s just a few minutes to finish that task.

Open Netbeans and create a new project.

create project

Let’s call it running, select your installed Glassfish Server and chose JEE 5 as your Java Technology, hit the next button. In the following window choose facelets as your Framework.

Choose Facelets as Framework

Hit the Finish button.
NBFS did some nice work for you, your Project Structure should look as follows.

Project Structure of your freshly created running application

We already have a template file and a template-client and everything else you would need to develop with facelets. If you like just right-click on the project and choose “Run Project”. You won’t find any real content, but the Application is already working and we are now going to add some interesting content to it.
Let’s start from the bottom by creating a connection to the database and then defining our table name and the columns we need.

Glassfish and Netbeans make it easy for us to integrate JPA and MySQL in our projects. I assume you already installed Glassfish and added it into Netbeans, you already installed a MySQL Database and have username an password at hand.
Start the glassfish Server inside Netbeans and navigate to http://localhost:4848 - log into the Administration area and navigate to Resources -> JDBC -> Connection Pools. Hit the “New” button and fill in the following data:

Create Connection Pool Step 1

Create Connection Pool Step 2

Hit the finish button. Next we need to create a JDBC Resource, to be able to connect our Persistence Unit with a Database. Navigate to JDBC Resources and click on “New”. Fill in the following data:

Create a JDBC Resource (JNDI)

The Persistence Unit handles the communication with the database and makes it easy for us to store, edit, delete data. To get that kind of help for our project Right-Click on your project, choose New -> File/Folder -> Persistence and select “Persistence Unit” on the right side. Next fill in the data shown on the picture below:

Create Java Persistence Unit

Click finish. Netbeans creates the necessary files for us. With JPA using a table in a database is different, all you have to do is create an entity class with all the variables you need; the name of the class stands for the table name and the variables are the column names of the table. Storage of this data will be managed by the persistence unit defined above. So just create an Entity called

Create the Run Entity

This will generate a normal java class, but this class is extended by several @definitions and “implements Serializable” for JPA to work correctly. In this Entity we will define our variables we need for our application. Let’s keep it simple; so we need

  • a location where we did run
  • the totalHours our run took
  • the totalMinutes
  • and totalSeconds
  • the avgHr thats the average HeartRate
  • the distance we ran
  • the kind of environment (was it flat or hilly, etc.)

Variables in the Class

Don’t forget to generate getters and setters by right-clicking in the class -> Refactor -> Encapsulate Fields! The get and set methods are important for our next steps.

So what have we done so far? We have database connected to our glassfish server. The server is providing a connection pool for our persistence unit, which is ready to store all the data transmitted by our generated entity class. Thats quite a lot of things we have done so far with not much typing.
The next task should be to generate the view and combine it with facelets using NBFS. Do a right-click on the project, select New -> File/Folder then choose Persistence -> JSF Page from Entity Class and hit Next. Select “Run” and hit Add>, click on next. Put a “/” in the JSF Pages Folder field and leave the rest. Now hit the finish Button.
The “Web Pages” Folder will be extended by an extra folder with some jsp pages. You could click on “Run Project” now, but it won’t work, because we have a Facelets Project and therefore need xhtml files and syntax. NBFS will help us to migrate these freshly generated jsp files to some nice xhtml files with facelets functionality inside.
Let’s begin with our template. Facelets makes it easy to build complex web applications with less code repetition. NBFS already generated a template.xhtml file for us. We will expand that now. We need a navigationbar and a content section on our page. While our navigationbar needs to look the same on every page (rather static), the content will change on every click.
First we’ll give the navigation some flavor. To do that create a new File -> Web and File Type “Facelets Simple File“, name it “navigation” and replace the content with the following. Use the Palette or NBFS Code Completion mechanism to replace the content of the following pages. NBFS helps you to change the content easily:

Navigation xhtml File

Template xhtml File

Default CSS File

Change the content of the jsp pages. Start by creating a new “Facelets Simple File” and give it a name similar to the jsp page (like New.xhtml), then integrate facelets and define the content for the template file. It’s easy because you can just drag and drop the important components from the palette on the right side of the netbeans IDE. The core structure of each page should look as follows:

First Drag and drop the core Components, then Copy and Paste the rest.

Create the files below like mentioned above. Then add the specific content of the jsp pages to the new xhtml files. New.xhtml will look like this:

Structure of New.xhtml

1. create List.xhtml
2. create New.xhtml
3. create Edit.xhtml
4. create Details.xhtml
If you need help just download the necessary files from here - All Files for the view.

New Project Structure

Open the faces-config.xml, replace all file links ending with .jsp to .jsf and then we are ready to run the project….

Right-Click on your project -> choose Run Project. Netbeans will start the glassfish server, deploy our running application and start your favorite browser. Now you can start adding, editing or deleting your running data.

By the time I will extend this tutorial by some statistic pages, some more data fields and maybe with jMaki or IceFaces or Ajax4JSF. If you have any questions or there is missing something in this tutorial let me know. Tips on improving my English are also very welcome!


  Brian Leonard wrote @ June 13th, 2007 at 14:57

Hi Daniel,

Thanks for taking the time to put this tutorial together. Some comments:

Above you state:

“Start by creating a new specific *.xhtml (like New.xhtml) file, then integrate facelets and define the content for the template file. It’s easy because you can just drag and drop the important components from the palette on the right side of the netbeans IDE.”

If you create a new .XHTML file, it’s not yet aware of facelets so there’s no facelets componets yet available on the palette. Wouldn’t it be better to start with a Facelets Simple File?

Above you state: “List.xhtml will look like this:”, but you’re actually showing New.xhtml.

In my List.xhtml, I’m getting the error “The value of attribute “rendered” associated with an element type “null” must not contain the ‘

Why doesn’t this complaint appear in the JSP?

Removing the navigation links to temporarily get past the error above, I get a 404 - /running/run/List.jsf, when selecting List of Run from index.jsp. I’m not sure why as the Facelets Example Page loads fine. I’ll keep investigating, but any pointers you have would be appreciated.


  dboek wrote @ June 13th, 2007 at 17:53

Hey Brian, thanks a lot for reading and using my tutorial and of course for writing your comment!
1) My fault, I just corrected the tutorial on my page and will do that also on the netbeans wiki page
2) Not very good by me, just fixed it.
3) In the List.xhtml of my tutorial I didn’t use the render part and the command links, I’m sorry I didn’t mention that. I just tried it with the commandLinks and got the same error, but turning the “>” around to “>=” it just works. For it seems to be that something in the plugin validating the xhtml code isn’t working correctly, what do you think?
4) Did you define the place of the template.xhtml file correctly? If yes please give me some more hints about the error messages you get, that would be great!

I uploaded the xhtml files of my project, so you can compare them with yours….



  Turgay Zengin wrote @ June 21st, 2007 at 08:53

Thank you very much, this is a very good example to use JPA, JSF and Facelets together! Very good example of using all these technologies together.
Only thing missing is the help of a visual editor for web pages. Is it possible to use Netbeans for this purpose also?
I also need a “TreeMenu” component for my template, which will present the menu structure to the user on the left side of the page, and the content will be presented on the right side (just like the Glassfish admin console). Do you know of a component which is easy to use together with JSF and Facelets? I am going to look at the Glassfish admin console code, but will be happy if I can find an easier way for doing this.
Thanks & Regards,

  dboek wrote @ June 21st, 2007 at 09:12

Hey Turgay,
thanks very much for your comment, I am happy this was helpful for you.
It is possible to work with a visual editor in Netbeans, it’s called “Visual Web Pack” and can be downloaded for free on the website of the netbeans IDE. It looks nice, but I never used it so far.
I made a small post about some nice Javascript and Ajax features with JSF and Facelets - you can find the post on my main page. I listed some free projects there, ICEFaces for example integrates Facelets and has some nice additional components like your “TreeMenu”, that are easy to work with and are very good-looking!
ICEFaces, RichFaces and Ajax4JSF have some live demos of their features online, so you can take a look at them before you use these technologies.



  Mohd Marzuq Ikram wrote @ July 6th, 2007 at 13:50

How can I integrate my Visual Web Application with Facelets in Netbeans? Sorry coz I’m still a beginner and have a tough time figuring it out..Thanks.

  dboek wrote @ July 6th, 2007 at 16:53

Hey Mohd, sorry, I haver never worked with the Visual Web Pack so far, I think it only works with jsp pages at the moment. Unfortunately you have to change your pages to work with facelets manually. Facelets needs xhtml syntax of the pages…… perhaps you should post ypur question on the facelets user mailing list. There are a lot of Sun people and others who might have worked with the Visual Web Pack…… Greets, Daniel

  Sihan wrote @ August 13th, 2007 at 12:44

Thanks for nice tutorial. My server runs on Sun Java Application Server 9.
Is there any way to do all these stuffs in Sun Java Application Server 9 instead of Glassfish server?
Thanks in advance.

  dboek wrote @ August 13th, 2007 at 13:45

Hey Sihan,
as far as I know Netbeans 5.5.1 comes with Sun Application Server 9 and thats another
name for the glassfish server V1.
Sun gives their Production Releases another name, but its the same. I wrote my tutorial
using Glassfish V2, that will be the next Version of the Sun Application Server, but my
simple tutorial should also work on SAS 9.


  Konrad wrote @ December 21st, 2007 at 13:13

Thanks for the interesting tutorial.

I had to find out that with the 0.6 snapshot of the facelet plugin in netbeans 6.0 it is not possible anymore to “Do a right-click on the project, select New -> Other then choose Persistence -> JSF Page from Entity Class”, since this option is not displayed in the dialog anymore. Is there a work around to trigger that functionality (other than using nb 5.5)?
This has also been reported at

  dboek wrote @ December 23rd, 2007 at 22:01

Hey Konrad,

thanks for your comment! So far I haven’t used the nbfaceletsplugin with Netbeans 6. I will try it out in the next days and if I find a work around I will send you an email!



  pradeep wrote @ February 10th, 2009 at 12:22

i am developing a j2me application in netBeans…i want to use a css ..but problem is that i don’t know where to put the css file…as we put in resource folder in eclipse…..

thanx in advance

  SAUMYA DIXIT wrote @ April 5th, 2010 at 15:40

i wan’t to know where to keep css file in netbeans5.5….its very important please reply soon…..thanx

Your comment

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>