Many people have asked in the nbusers mailing list about how to use Hibernate with the Netbeans Visual Web Pack(VWP). I know that the existing Hibernate tutorial for Sun Java Studio Creator is in the process of being updated for use with VWP, however in the interest of time, here is a list of changes that have to be made when using the existing tutorial with VWP.

Once the new Tutorial comes out, this blog entry will be of no use, so keep an eye on the Tutorials page for the latest and greatest from the Tutorial Divas

To use this information properly, go to, and follow the existing Java Studio Creator tutorial for using Hibernate and just make the changes listed below when necessary.

-- When adding the Hibernate library to the POJO project, a dialog box pops up telling you it needs to upgrade the project because it was made in an earlier version of NetBeans. After upgrading, it will not work in older versions again.

-- derbyclient.jar file is located in <app Server install>/javadb/lib
(This is the same for both Sun App Server and Glassfish)

-- Default port number for the JavaDB used by Visual Web Pack is 1527

-- The travel database in VWP is called "travel" and not "sample". You have to change both 'port' and 'databasename' in the hibernate.cfg.xml file

-- When creating the Tutorial Application, select Java EE 1.4 as the platform type.

-- Select "connect" in the Travel database connection to start the DB

-- server.policy is located by default at: <app server install dir>\domains\domain1\config\

-- Instead of right clicking on the Projects window to add a new Property, for personOptions, to the SessionBean, right click on the Outline windows SessionBean node.

-- Instead of right clicking on the Projects window to add a new Property, for tripDataProvider, to the SessionBean, right click on the Outline windows SessionBean node.

-- F11 to build the project instead of Ctrl-Shift-B

-- If you add the Getter and Setter code, you don't have to Close and re-open the project to get the new dataprovider to appear.

-- F6 to run main project. F5 will run the project in Debug mode.

Last weekend we arrived a half hour early for our daughters soccer match, as we do every weekend. However this time, as it grew closer to the actual game time, there wasn't an opposing team on the field and there wasn't a referee.

Having checked the Soccer Associations website earlier in the week, I knew that we had a Ref. assigned to the match, so it was a little worrisome to not see them at the field.

Normally, this would have ended as a story of miscommunication and a forfeited match. However, one of the parents pulled out their PDA and surfed over to the association website and found that they had changed the field for the match just the night before. We were supposed to be on another field 10 miles away, in 5 minutes, to play the match.

We all piled into our cars and raced on over to the field, while the same parent continued to surf the website and retrieved the other coaches cell phone number to let them know that we were on our way. We arrived on the field with one minute left before we would have had to forfeit the match.

I can't think of a better example of how the Internet has affected our daily lives. A cell phone alone wouldn't have been able to save us on this day.

Oh, and we did play the match. It ended in a 0-0 draw unfortunately.

The Setup

You will need to have Netbeans 5.5 and Visual Web Pack already installed and working. You will also want to make sure the Ajax components library is installed and available from the Palette selections (see above for instructions on getting the Ajax components installed).

We are going to be connecting to a web service called DictionaryService. You will need to have this deployed on the App Server that you are going to be running this project against in Netbeans. I'm using the glassfish application server myself. The .war file and other files needed for this project can be found here. Download the .zip file and extract it to a location on your local machine for use later in this project.

Deploy the web service into your application server of choice.

On with the Show

-- Start a new Visual Web Project in NB with the following options set

Project name: wstest

Java EE Version: J2EE 1.4

Leave all of the other settings at there defaults. The dialog should look like this when completed.

Figure 1: creating the visual web project

-- Click the Finish button and you should be taken back to the IDE with Page1.jsp displayed in the center window and shown in design mode.

This is what we are going to be creating over the next few steps...

Figure 2: what this should look like when its done

-- Start by dragging an Image object from the pallet and placing on the page. While the image object is still selected, look at the properties window and click on the ellipsis (...) button to bring up the binding dialog. Click “Add File” and navigate to the location that you saved the original project files that you downloaded at the beginning. Select the “open-book.jpg” file and then click the Add File button and then OK button.

You can resize the image to better fit the screen if you like. I have mine set so that the width is 600 and the height is at 417.

-- Next, drag a static text object onto the right page of the book. Resize it to fit nicely in the page.

-- While the static text object is selected, click on the (...) ellipsis to the right of the “Style” property and then set the background color to white.

-- Drag a message group object to the right page and place it under the static text object. This will normally not display on the page. It will only show up if an error is thrown at runtime.

-- Now drag a button to the left page. Set the buttons text to “Get definition”

-- For the last object, look in the “AJAX Blueprints Components” section of the palette. Drag and drop the Auto Complete Text Field object onto the left page of the book, right above the button that you place earlier.

NOTE: The first time you select a component from the AJAX list, it will take a few seconds for the IDE to copy the required libraries over to your project space. You may see the Project Scanning window display at the bottom of the IDE screen while this is happening. If it doesn't look like the object is dragging onto the design window, just be patient and it will come across. I've seen it take up to about 30 seconds for the file transfers to happen in the background. (This will be different in the Final release. This is only for the Technology Preview)

Hopefully, your design page now looks like the image above. Let's get to the coding side of things and the connection to the Web Service

Setting up the Web Service Client

-- Double-click on the Auto Complete Text Field and the IDE will switch automatically to the javasource view and insert an event handler for this object.

Figure 3: auto generation of event handler

-- In the Project window, right-click on the “Web Pages” node of your project and then select “New -> Web Service Client”

Figure 4: adding the web service client

-- In the dialog box, select Local File and browse to the location of the DictionaryService.wsdl file that you downloaded at the beginning of this adventure.

NOTE: The .wsdl file that is included with this project is set to point to http://localhost:8080 which is the default for the glassfish application server. If you are using a different application server, and/or different deployment URL and port, you will need to edit the .wsdl file “before” adding this Web Service Client.

-- Set the package name to “wstest” and the Client-Type to “IDE-generated static stub”

Figure 5: selecting the WSDL file

-- Click the Finish button and the IDE will compile the libraries for you and add a “Web Service References” item to your Project menu.

-- At this point you should be able to test the connectivity to the Web Service. Make sure you application server is running and the the DictionaryService.war file has been deployed to it.

-- Expand out the Web Service References menu item in the Projects window until you see the two methods of “define” and “matchPrefix”.

-- Right-click on the “define” method and you should see the “Test Operation” option. Select it.

Figure 6: testing the web service methods

-- You can enter a word, to look up in the dictionary, in the value field at the top of the testing dialog box and then click on submit to get the reply at the bottom.

Hooking it all up

Now that you have the web service client setup and you have tested the connection to the web service itself, hopefully with success, it's time to tie all of this to the JSF components that you placed on the design page earlier.

-- You should still have you IDE in the javasource view and be inside the “autoComplete1_complete” method, as shown in Figure 3 above.

-- Right-click in the editor and select “Web Service Client Resources -> Call Web Service Operation” from the menu.

-- From the list of available Web Services, select the matchPrefix method for this part of the code

Figure 7: selecting web service method to enter try-catch block

A try-catch block will be entered into the javasource window with a template for making the call to the matchPrefix method of the web service.

Figure 8: default try-catch block for matchPrefix method

-- Modify the template to look like the code below. You will only need to enter the code in black.

****************************************************************************
try { // This code block invokes the DictionaryServiceSEIPort:matchPrefix operation on web service

wstest.DictionaryService dictionaryService = new wstest.DictionaryService_Impl();

wstest.DictionaryServiceSEI dictionaryServiceSEIPort = dictionaryService.getDictionaryServiceSEIPort();

String[] items = dictionaryServiceSEIPort.matchPrefix(prefix);

result.addItems(items);

} catch(javax.xml.rpc.ServiceException ex) {

// TODO handle ServiceException

} catch(java.rmi.RemoteException ex) {

// TODO handle remote exception

} catch(Exception ex) {

log("Exception getting the matching words", ex);

String[] items = new String[] {"Exception getting the matching words"};

result.addItems(items);

}
****************************************************************************

-- Click back to the design view by clicking on the Tab at the top of the page labled “Design”

-- Double-click on the button and once again the IDE will generate the event handler and take you to the javasource view for that code.

-- Right-click inside the event handler method and select “Web Service Client Resources -> Call Web Service Operation” from the menu.

-- This time select “define” from the list and click OK

-- Once again modify the template code to look like the code below. You will only need to change the code in black.

****************************************************************************
try { // This code block invokes the DictionaryServiceSEIPort:define operation on web service

wstest.DictionaryService dictionaryService = new wstest.DictionaryService_Impl();

wstest.DictionaryServiceSEI dictionaryServiceSEIPort = dictionaryService.getDictionaryServiceSEIPort();

String definition = dictionaryServiceSEIPort.define(autoComplete1.getText());

staticText1.setText(definition);

} catch(javax.xml.rpc.ServiceException ex) {

// TODO handle ServiceException

} catch(java.rmi.RemoteException ex) {

// TODO handle remote exception

} catch(Exception ex) {

log("Dictionary Service Error:", ex);

error("Error accessing Dictionary Service");

}

return null;

}
****************************************************************************

That should do it. Save and Run the application.

This FAQ is created as a wiki so that anyone can enter questions and answers as they come across them. However, I recently tried to enter a few items and found myself fumbling around in the editor trying to make sense of what to do next. Here are a few things to help others that aren't that wiki savy, like myself.

1) First, you will need to create a Netbeans Wiki account. Once you've accomplished getting an account, log-in and go to the FAQ site.

2) Next click on the “edit page” tab. This page can look a little scary at first, but don't worry, you don't have to change that much to get an entry added to the FAQ.

3) Scroll down to the section that you want to enter you FAQ item under. This will be a section that starts with either a single “!” or a double “!!”

4) Once you're at the section you want, add another line that looks just like this, but contains the text that you want to add.

* [This will be the text that shows up as the question | VwpFAQshorttitle_of_page]

-- The star at the beginning places a bullet at the beginning of the list item

-- [ ] braces make the entire things a link to the actual answer page

-- The first part is the question. Place a “ | “ between the question and the page title

-- The page title should be something short and descriptive. Look at other entries to get an idea

-- The page title should always start with “VwpFAQ” this is for searching

5) Save the page

6) You should now be able to scroll down and see your question as one of the bullet items in the list. Click on your new link.

7) This will bring you to another edit window for the answer page. You can use the code below as a template for starting out your answer page

!! This is the same question that you had on the last page?

Start typing out your answer down here.

That's it. Save the page when you are done editing the answer. You can click on the Help tab (right beside the Edit tab) at any time to get help on formatting of the text. You won't loose your changes when switching between the help tab and the edit tab, so don't worry about that.

Now, Start adding those FAQ's!!

When working in Netbeans Visual Web Pack, you can add new JDBC drivers and database connections from the Runtime window. You can even test the connections and view data from the tables once the connection is made.

However, if you add that data connection to your project, you will run into an interesting problem. Netbeans does not copy the JDBC drivers to the deployment server by itself. Java Studio Creator users will be expecting this to happen for them.

Here is a quick way to get this to work in your project when deployed

Right-click on the project name in the Project window and select Properties

When the properties dialog opens, select the Library node and then click on the Add JAR/Folder button. Navigate to the locate of the JDBC .jar file and select it.

Click Open. Make sure the driver library has a check mark in the package box and then click on the OK button.

You should now be able to deploy the application without the DB connect errors.

This may seem a bit basic for some of the Java Studio Creator developers out there, however I come to the IDE with much more knowledge of the client-side scripting then I do with a core Java background. I wanted to be able to take advantage of the “JavaScript” propertysheet in the IDE to make my pages a little more smooth with mouseovers and such. However, once I started looking at how to do this, I ran into all kinds of problems. It took me quite some time to find all of the answers, but I eventually did, so I thought I would put them down in writing so others may be able to take advantage of my trials.

The Project

This is a simple pull-down list that, when changed, automatically changes the image above it to reflect what was selected.

To get started, I dragged a dropdown object and an image object onto the page and placed them as shown above. I place a few small images into the /resources folder of my project so that I had something to work with when the dropdown list was changed.

Once you have the components entered onto the page, and some images placed in the resource folder, right-click on the dropdown object and select “Configure Default Options”. This will allow you to setup the dropdown list with name/value pairs for all of the images that you have set in the resources folder. Of course you could populate this pulldown list dynamically as well, but I'm just trying to get thing setup quickly so we can get to the client-side code a little faster.

Notice that I used the Project Name followed by the resources folder and then the actual filename for the value on each image.

I've also set the default “URL” property for the image component to be the same as the first entry on my pulldown list. That way when the page is first loaded, they match.

The Client-Side coding

Ok, we should have all of the basic project setup and ready for us to start working on the event code. We are going to use the “ OnChange” event found in the Javascript section of the Properties Window.

It should be pretty straight forward to set the values of the different objects in the Document Object Model(DOM) once the page is rendered. However, Java Studio Creator adds a few twists at the client side to make it more interesting. Let's take a look.

Both of our objects in the project page have the basic naming format of <objecttype><itemnumber>. So our image object is named “ image1” and our dropdown is named “dropDown1”. Simple enough? Not quite! When the page is actually deployed, Java Studio Creator prepends “ <form name>: “ to all of the objects placed in that form. Take a look at the resulting HTML source view below.

So instead of working with the ID of “image1” as we would expect, we are really going to have to look for the ID of “ form1:image1” in our DOM tree. This will also be true for our dropdown object. However, the dropdown object goes a bit further in it's modification. Since the IDE dropdown object has both a list and label section, the resulting HTML tags are “ form1:dropDown1_lable” and “form1:dropDown1_list”. The only way that I really found to get the resulting HTML tag ID name is to go ahead and deploy the application, and then do a view source on the resulting HTML page to see what they are being set at.

Figuring out the DOM ID's for all of the elements was really the trickiest part. From here we can use normal Javascript to complete our desired effect. While the dropdown object is selected in our project page, go to the properties windows and click on the ellipsis (...) button to the right of the “OnChange” Javascript property. This will bring up an editor window where you can more easily see what you are typing in.

Enter the following line of Javascript code...

document.getElementById('form1:image1').src=document.getElementById('form1:dropDown1_list').value;

click OK, then save and run the project.