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.