The Daily Dilbert Viewer: Creating a Mobile-to-Web Service Application

Contributed by Michal Skvor
April,

This article describes how you can use the use End-to-End Connection Bridge technology in the NetBeans Mobility Pack to create a mobile client application that consumes a Web service. The Dilbert Viewer fetches the daily comic strip—Dilbert—from a Web service, converts the graphics to a space-saving format, and displays the strip on a mobile device.

Tutorial Requirements
Creating a Mobile Application that Consumes Web Services
Creating the Web Service Client
Creating the Mobile Client to Web Application

Tutorial Requirements

Software Needed for this Tutorial

Before you begin, you need to install the following software on your computer:

Java Standard Development Kit (JDK) version 5.0 or 6.0 (download)
NetBeans IDE 5.5 with the Java EE 5 Tools Bundle (download)
The NetBeans Mobility Pack 5.5 for CDLC/MIDP (download)

Creating a Mobile Application that Consumes Web Services

To create this application, we'll first need to create a Web service client that connects to the Dilbert Web Service. We'll then use the Mobile Client to Web Application wizard to create a Mobile Application that connects to the Web service, and then add code that transforms the comic's graphic format from GIF to PNG. Finally, we'll see what the daily strip looks like on a device emulator.

Creating the Web Service Client

First we'll create a new Web Application project called "DilbertWebApplication."

Choose File > New Project.
From Categories, choose Web. From File Types, choose Web Application. Click Next.
Name the project "DilbertWebApplication" and choose Java EE version J2EE 1.4.
Click Finish to create the application.

Adding a Web Service Client

Now we'll add a Web service client to consumes the Dilbert Web service.

Right-click on the "DilbertWebApplication" Project and choose New > Web Service Client.
Select the WSDL URL radio button and enter the following URL:
Name the package "dilbert."
Click Finish.

Creating the Mobile Client to Web Application

Next we'll create a new empty Mobile Application project called "DilbertViewer," then use the Mobile Client to Web Application Bridge wizard to connect the application to the Web service.

Choose File > New Project.
From Categories, choose Mobile. From Projects, choose Mobile Application. Click Next.
Enter DilbertViewer as the Project Name and uncheck the Create Hello MIDlet check box. Click Finish to create the MIDlet.

Using the Mobile Client to Web Application Wizard

The Mobile Client to Web Application wizard generates a servlet that connects to a Web application that includes a Web service client.

In the Projects window, right-click the DilbertViewer project choose New > Mobile Client to Web Application.
DibertWebApplication should be listed as the Web application. Change the Servlet name to DilbertServlet and name the package dilbert. For Mobile Client Use, select the Web Service Client in Web Application radio button and select DailyDiblert.asmx.wsdl. Click Next.
Select dailyDilbertImage in the Web Service Operations window and click next.
Change the Client Name to DilbertViewer in package dilbert. Click finish. Now the servlet in the Web application is created along with the client MIDlet. The mobile client application is shown in the Visual Mobile Designer.

Now we have a client application to receive the daily image. But the received image is in GIF format, which is much too large for mobile devices with limited memory. So we'll need to transform the image to the PNG format, which is smaller and more easily sized for the many different display sizes available to mobile devices.

Switch to the Files tab and expand DilbertWebApplication > src > dilbert > dilbertservletsupport.
Double-click the DailyDilbertSoapProxy class to open it in the editor.

Change the dailyDilbertImage() method:

public byte[] dailyDilbertImage() throws RemoteException, Exception {
    try {
    ByteArrayInputStream in = new ByteArrayInputStream( getDailyDilbertSoap().dailyDilbertImage());
    BufferedImage image = ImageIO.read( in );
    ByteArrayOutputStream out = new ByteArrayOutputStream();
    ImageIO.write( image, "png", out );
    return out.toByteArray(); } catch(java.rmi.RemoteException ex) { throw ex;
    } catch(Exception ex) { throw ex; }
    }

You'll note that several lines have red x's next to them. To make these lines work, you need to import some libraries:

java.awt.image.BufferedImage,
java.io.ByteArrayInputStream,
java.io.ByteArrayOutputStream
javax.imageio.ImageIO

Rather than type them in, just use the key combination Alt+Shift+F. The IDE searches for unresolved types and adds the libraries to the imports section of the code.

Click the Projects tab. Then right-click the DilbertWebApplication and choose Deploy Application.
It might take a while for the IDE to start the server and deploy the application.
If your application server is behind a firewall, you'll need to set up the http.proxyHost and http.proxyPort properties in the Administration console of the application server.

Create a Viewing Canvas

Now we'll create a custom canvas component to display the graphic file, and add it to the application.

Right-click on DilbertViewer and choose New File/Folder.
Under Categories, choose MIDP. Under File Types, choose MIDP Canvas. Click Next.
Enter DilbertCanvas for the MIDP Class Name, and dilbert for the package name. Click Finish.
Expand DilbertViewer and double-click the DilbertCanvas class.
Insert code into the class so it looks like the code below:

package dilbert;
import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;

public class DilbertCanvas extends Canvas {
      private int coordX, coordY;
      private int imageWidth, imageHeight;
      private Image image;
      private int screenWidth, screenHeight;

      /** Creates a new instance of DilbertCanvas */
      public DilbertCanvas() {
      screenHeight = getHeight();
      screenWidth = getWidth();
}

public void setImage( Image image ) {
      this.imageWidth = image.getWidth();
      this.imageHeight = image.getHeight();
      this.image = image;
}

protected void paint(Graphics graphics) {
      graphics.setColor( 255, 255, 255 );
      graphics.fillRect( 0, 0, getWidth(), getHeight());
      graphics.drawImage( image, coordX, coordY, Graphics.LEFT | Graphics.TOP
      );
      }

      protected void keyPressed(int keyCode) {
      int key = getGameAction( keyCode );
      if( key == DOWN ) {
          if( coordY - screenHeight + imageHeight > 0 )
              coordY -= 10;
      } else if( key == UP ) {
          if( coordY < 0 )
      coordY += 10;
      } else if( key == RIGHT ) {
          if( coordX - screenWidth + imageWidth > 0 )
              coordX -= 10;
      } else if( key == LEFT ) {
          if( coordX < 0 )
              coordX += 10;
      }
      repaint();
   }

}

Right-click DilbertViewer and choose Build Project.

You've now created the Canvas component. Next, you 'll add the canvas component to the VMD's component palette, and then you'll incorporate the canvas component into the application.
Open Tools > Palette Manager > Mobility Editor.
Click on the Add From Project button.
Select DilbertViewer as the project. Click Next.
Select dilbert.DilbertCanvas and add it to the category Custom Components.
Click Finish. Click Close to close the Palette Manager.

Now the component DilbertCanvas should be available in the Palette as a custom component. Next we'll make the component part of the application's work flow.
In the Editor window, click the DilbertViewerMIDlet to open the VMD.
Drag and Drop the DilbertCanvas component from the Custom Components section of the Palette the DilbertCanvas to the project.
Select the dilbertCanvas component and click on the Instance Name property and rename it to dilbertCanvas.
Create a link from the Success button of dailyDilbertImage_WaitScreen component to dilbertCanvas entry point.

Click to enlarge

In the Inspector window, expand DilbertCanvas[Canvas].
Right-click on Assigned Commands and Choose Add >okCommand1.
Select dilbertCanvas[canvas] in the Flow Designer and click Screen Design.
Click on Edit to open the Action Property dialog. In the dialog, set the Target Screen to mainMenu[List]. Click OK to finish.

Since the dailyDilbertImage_OutputList in the Flow Design is no longer needed, delete it.
Switch to Source view and change the set_dailyDilbertImage_OutputValues () method as shown below:

  private void set_dailyDilbertImage_OutputValues() {
    if( dailyDilbertImage_returnValue != null) {
        Image dilbertImage = Image.createImage( dailyDilbertImage_returnValue, 0, dailyDilbertImage_returnValue.length
  );
        get_dilbertCanvas().setImage( dilbertImage );
    }
  }

Run the project.
A device emulator opens.
In the device emulator screen, click the button under Launch. Then click the Select button.
The application will go out to the internet and return the latest Dilbert strip.