JSF and Facelets Support in Netbeans (with JPA, Glassfish and MySQL 5)

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:

• Netbeans IDE 5.5.1
• NBFaceletsSupport Plugin
• MySQL 5 or another Database Server (In my tutorial I will work with MySQL 5)
• MySQL 5 Connector for Java
• Glassfish Server V2 ( may be bundled with Netbeans or just load it directly from the glassfish dev page)

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.

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.

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

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 https://localhost:4848 - log into the Administration area and navigate to Resources -> JDBC -> Connection Pools. Hit the “New” button and fill in the following data:

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:

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:

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 Run.java

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.)

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:

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:

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:

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: UsingJSFAndFaceletsInNetbeans/web_xhtml_file.zip

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 feel free to edit the page by yourself or leave a comment under the tutorial on my website.

Attachments

---