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.