Zuul Everywhere with NetBeans 5.5

Introduction

This article picks up where Moving to NetBeans IDE 5.5.1 BlueJ Edition leaves off by making the Zuul game a server which can then be played on clients other than then existing Swing GUI (web browser, cell phone) as well a playable in other languages. Each step along the way has a solution project that you can use to compare against your work if things go horribly wrong.

Requirements

• NetBeans IDE 5.5.1 BlueJ Edition
• NetBeans IDE 5.5 with Application Server
• NetBeans Mobility Pack
• NetBeans Visual Web Pack
• The zuul-for-netbeans project (extract the zip).

Converting Zuul to a NetBeans J2SE project

The BlueJ Edition of NetBeans is capable of opening projects in BlueJ's project format. To take advantage of additional NetBeans features like the Mobility Pack, we need to convert the project to NetBeans native project format.

1. Start NetBeans IDE 5.5.1 BlueJ Edition and open the zuul-for-netbeans project.
2. Switch to the Projects tab and right-click the zuul-for-netbeans project. Select Convert to J2SE project.
   
   


3. For the Destination Folder, click the Browse button to open the Open dialog.
   1. Click the Create New Folder icon and name the folder zuul-converted.
   2. Select the folder and click Open, then click Finish.

You now have 2 zuul-for-netbeans projects open in the IDE, one in BlueJ project format and the other in NetBeans project format.

Solution project, zuul-converted.zip.

Open the Zuul project in NetBeans 5.5

NetBeans 5.5 supports the latest Java EE standards, which we'll use to create our game server.

1. Open the zuul-converted project in NetBeans 5.5.
2. Test the project, press F6. If you're prompted to select the main class, select zuul.MainFrame.

Internationalize Zuul

If Zuul's going to be playable everywhere, we need to change it so it's easy to support languages other than English. As it's currently written, all of our strings are interlaced throughout our Java code.



If we wanted to create a version in another language, say Spanish, we'd have to find all the strings and replace them. For a large project, this search and replace can be quite time consuming. Not to mention that we now have two versions of our file, one in English and another in Spanish, which creates maintenance nightmares moving forward.

A Better Way

We can internationalize the program so that all of the strings interlaced throughout our Java code are instead stored in one file, reference by a key in our Java code. Then to add a new language (localize), we just need to have someone produce a new version of the file with all of the text strings.

1. Create a new properties file named bundle to hold the strings. Put it in the src\zuul folder.
   
   
   
   
2. Right click the Source Packages node and select Tools > Internationalization > Internationalization Wizard. Click Next and Next to get to the Modify Founds Strings page. Here, use the Source combo box to switch between the Java files and uncheck any strings that we don't want to internationalize. Certainly uncheck all of the newline markers, "/n", as these don't need to be changed.
   
   
   
   Once complete, you source code will be updated to pull text values from the bundle.properties file:
   
   
   
   
3. Press F6 to run the project. You shouldn't notice any difference. However, all of our strings are now being pulled from the bundle.properties file, so it's easy to localize.

Localize to Another Language

Once our project is Internationalized, we can begin the process of localizing it to other languages.

1. Right-click the bundle.properties file and choose Add Locale. You can choose whatever local you want, but for this tutorial I'm using Spanish (and I'll provide the translations).
   
   
2. Then if you expand the bundle.properties, you'll see the new new locale node.
   
   
   
   
3. Double-click it to open its bundle.properties file.
4. NetBeans doesn't do language translations yet, so you need to do this process manually. If you stuck with me and went with Spanish, you can copy the translations from this file here.
5. Now since Spanish isn't the default language on our machines (at least not mine), we need to tell the VM to run using the Spanish language. Open the project properties and add the following to the VM Options under the Run node: -Duser.language=ES -Duser.region=CO.
   
   
   
   
6. Press F6 to run your project again...
   
   
   
   Notice how the buttons automatically resized to accommodate the longer text. Another beauty of the NetBeans GUI builder.

Solution Project, zuul-i18n.zip.

Create the Zuul Game Server

To create the game server we're going to create a web service wrapper for our existing game functionality.

Create and add the Zuul game library

1. Press F11 to build the zuul-for-netbeans project and create a library file we can use for our web service.
2. Create a new Enterprise EJB Module project named ZuulServer.
3. Right-click the libraries node and choose Add Project.
   
   
   
   
4. Add the zuul-converted project.

Create the Web Service

1. Press Ctrl+N to add a new Web Service named ZuulWebService in the package server.
   
   
   
   
2. When the ZuulWebService.java opens in the editor, create a new private Game field called game.
3. Place your cursor on the class name an press Alt+Enter to activate the tip and add a new operation:
   
   
   
   
4. Name the operation play and click OK to close the Add Operation dialog.
5. Initialize the game object and return the welcome:
   
   
   
   
6. Add a 2nd operation by right-clicking the editor and choosing Web Service > Add Operation:
   
   
   
   
7. Have the operation return game.go(direction);
8. Add a 3rd help operation that returns game.printHelp();

Test the Web Service

1. Right-click ZuulServer and deploy the project. It will take a moment for the application server to start and for the service to deploy.
2. Expand the Web Services node, right-click ZuulWebService and choose Test Web Service:
   
   
   
   
3. Use the Web Service Tester to test the service.
4. Click the WSDL File link and make note of the WSDL URL.

Solution project, ZuulServer.zip.

Create A Phone Client

Here we build an application that allows us to play Zuul on our phones. However, instead of porting the Zuul game to Java ME, we'll use the Zuul server for the game logic and just build the client interface in Java ME.

This section assumes you already have some basic familiarity with the Mobility Pack. If you need an introduction, you may want to first read the NetBeans Mobility Pack For MIDP/CLDC 5.5 Quick Start Guide.

Create the Web Service Client

1. If you haven't done so already, install the NetBeans Mobility Pack.
2. Create a new Mobile Application named ZuulMobileApp. Uncheck the option to create the Hello MIDlet and click Finish.
3. Add a new J2ME Web Service Client.
   • Enter the WSDL URL that you noted above and click Retrieve WSDL, then Finish

Create the MIDlet

As part of the web service client generation, a sample MIDlet was created which will run the web service's operations. We'll create a more appropriate interface that better understands the flow of the game, but feel free to test the sample MIDlet.

Start the Game

1. Create a new Visual MIDlet named Zuul.
2. Drag a List, WaitScreen, Alert and a Form from the Palette onto the Flow Designer.
3. Drag 2 List Elements onto the List. Name them Play Zuul and Quit.
4. Connect the screens as shown below:
   
   
   
   
5. Double-click the form to open it in the Screen Designer and set the Title property to Zuul.
6. Drag a StringItem onto the form and set it's Label property to Zuul Says:
7. Set the Instance Name to stringItemOutput.
8. Drag a SimpleCancellableTask onto the WaitScreen.
9. Set it's Executable Method Body property to play();
10. Switch to the Source view and add the following code:

     private ZuulWebService_Stub game = new ZuulWebService_Stub();
    
     private void play() {
         try {
             get_stringItemOutput().setText(game.play());
         } catch (RemoteException ex) {
             get_alert1().setString(ex.getMessage());
         }
    } 

11. At this point you should be able to start the game and see the welcome text:
    
    

Completing the Mobile UI

Next will add user interface support for moving around and displaying help.

1. Open form1 in the Screen Designer and add a Choice Group and 4 Choice Elements. Set the Choice Groups Label to Go and its Type to EXCLUSIVE. Change the Choice Element's text to North, South, East, and West.
2. Drag OK, Exit and Help commands onto the Screen
3. Change the label of the OK command to Go and the Instance Name to goCommand.
4. Your screen should now look something like the following:
   
   
   

1. Switch to the Source view and add the following methods:
   

      private String move(int direction) {
           String directionString = "";
           switch (direction) {
               case 0: directionString = "north";
                   break;
               case 1: directionString = "south";
                   break;
               case 2: directionString = "east";
                   break;
               case 3: directionString = "west";
                   break;
           }
           try {
               return game.go(directionString);
           } catch (RemoteException ex) {
               return ex.getMessage();            
           }
       }      

       private String help() {
           try {
               return game.help();
           } catch (RemoteException ex) {
               return ex.getMessage();
           }
       }

2. Switch back to the Screen Design. Right-click the goCommand and select Go to Source. Enter the following:

     get_stringItemOutput().setText(move(get_choiceGroup1().getSelectedIndex()));     

3. Right-click the helpCommand and select Go to Source. Enter the following:
   

      get_stringItemOutput.setText(help());

4. Switch back to the Flow Design and connect the Exit command to the Mobile Device's Exit Point.
5. Your mobile interface is now complete. Give it a test.

Solution Project, ZuulWeb.zip.

Create a Web Client

Here we build an application that allows us to play Zuul in a browser.

This section assumes you already have some basic familiarity with the Visual Web Pack. If you need an introduction, you may want to first read the Getting Started With NetBeans Visual Web Pack 5.5.

Design the page

1. If you haven't already done so, install the Visual Web Pack.
2. Create a new Visual Web Application project called ZuulWeb.
3. Drop the necessary components on the page. I've come up with this boring but functional design (feel free to improve upon):
   
   

Create the Web Service Client

1. Add a new Web Service Client.
2. Enter the WSDL URL that you noted above. The default value should be http://localhost:8080/ZuulWebServiceService/ZuulWebService?WSDL.
3. Set the Package to zuulws and click Finish

Establish a Reference to the Web Service Client

Underneath the covers, the Visual Web Pack is generating a Java Server Faces (JSF) compliant application and it helps to have a basic familiarity with JSF when using the VWP. When we created our project, 3 managed beans were created for us, Application, Request and Session.

We're going to use the Session bean to hold a reference to our web service throughout our user session.

1. Double-click SessionBean1 to open it in the Java editor.
2. Add the following fields and accessor methods:
   

       private ZuulWebService game;
       private boolean playing = false;
   
       public ZuulWebService getGame() {
           return game;
       }
   
       public boolean isPlaying() {
           return playing;
       }

3. Expand the init method and add the following to the bottom:
   

           if (game == null) {
                   ZuulWebServiceService service = new ZuulWebServiceService();
                   game = service.getZuulWebServicePort();
           }

4. The add the following play method to call our web service operation:
   

       public String play() {
               String result = game.play();
               playing = true;
               return result;
       }

Link the Web Service Operations to the Page

1. Double-click a blank spot of the Designer to open the Java editor.
2. Add the following method:
   

       private void move(String direction) {
           staticText1.setText(getSessionBean1().getGame().go(direction));        
       }

3. Add the following to the init() method:
   

       if (!getSessionBean1().isPlaying()) {        
           staticText1.setText(getSessionBean1().play());            
       }

4. Switch to Design view and double-click the Go North button to open the Java editor. Add the following:

       move("north");

5. Repeat for the South, East and West buttons.
6. Do the same for the Help button

       getSessionBean1().getGame().help();     

7. Our web interface is ready. Press F6 to test it.
   
   

Solution Project, ZuulWeb.zip.

The Next Problem To Solve

Our current architecture has one big problem, especially for a game server - it's stateless! Try running the mobile and web clients at the same time. You can move the player to the computer lab with the web client, and then to the admin office with the mobile client. Cool, but probably not the desired behavior. I'll leave this piece of the puzzle for a latter tutorial. As a hint, I'll be using the new Stateful Web Services coming with JAX-WS 2.1.