Mobile Client to Web Application Wizard: Creating a Client-Server Application

The NetBeans IDE enables you to create client MIDlets that can connect to Web services through a middleware Web application.

This tutorial shows you how to use the Mobile Client to Web Application Wizard to create a connection to Web services if your device does not support the JSR-172 specification for the Java ME Platform. The wizard generates a servlet for calculating two numbers that connects to a web application that includes a web service client and contains the method for summing up the given numbers.

If you are new to NetBeans Mobility or J2EE, you should start with the NetBeans Java ME MIDP Quick Start Guide before continuing.

Contents

Content on this page applies to NetBeans IDE 7.0

To follow this tutorial, you need the software and resources listed below.

Software or Resource Version Required
NetBeans IDE with Java ME Version 7.0 and higher
Java Development Kit (JDK) Version 6
GlassFish or Tomcat Included in the Java EE and All installations of the IDE

Creating Web Project

Before you use the Mobile Client to Web Application Wizard, you must have a Web project that includes a Web service client.

Let's create a new Web Application Project for our Java Servlet from scratch. To create a Java Web application in the IDE, do the following:

  1. Set Up a Web Application Project
  2. Add Business Logic
  3. Compile the Project

Setting Up a Web Application Project

  1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Java Web. Under Projects, select Web Application and click Next.
  2. Enter WebApplication in the Project Name field. Specify the Project Location to any directory on your computer. For purposes of this tutorial, this directory is referred to as NetBeansProjects.
  3. (Optional) Select the Use Dedicated Folder for Storing Libraries checkbox and specify the location for the libraries folder.
  4. Uncheck the Set as Main Project checkbox, click Next.
  5. In the Server and Settings panel, leave GlassFish Server 3.1 as the server to which your mobile application will be later deployed and leave J2EE 1.4 as the version that you want to use with your application.
  6. Leave Set Source Level to 1.4 selected.

    Note: The Context Path (i.e., on the server) becomes /WebApplication, which is based on the name you gave the project in a previous step.

  7. Click Next. In the Frameworks panel, click Finish to create the project.
    The IDE creates the NetBeansProjects/WebApplication project folder. The project folder contains all of your sources and project metadata, such as the project's Ant build script. The WebApplication project opens in the IDE. The welcome page, index.jsp, opens in the Source Editor in the main window.

WebApplication project and index.jsp

Adding Business Logic

To create a Java class with a public method inside the web project that will represent the business logic of the application, complete the following steps:

  1. In the Projects window, right-click the Source Packages node and choose New > Java Package. Enter MyPackage in the Package Name text box and click Finish.
  2. Right-click the created MyPackage node and choose New > Java Class. Enter Calculator in the Class Name text box and click Finish.
  3. In the Calculator.java file that opens in the Source Editor window, insert the following method:
     public int calcSum(int a, int b) {
            return a + b;
        } 
  4. Press Ctrl + S to save your edits.

Building the Project

In the Projects window, right-click the WebApplication project node and choose Build (F11).
Your web application for summing up numbers is ready.

Note: By default, the project is built with the Compile on Save feature enabled, so you do not need to compile your code first.

Calculator.java

Creating Mobile Project

The IDE enables you to create a client MIDlet that can connect to a web application you just created, provide two numbers to it and display their sum.

To create a Java ME client application, do the following:

  1. Create the Project
  2. Add Package and a Visual MIDlet to the Project
  3. Add Components to the Project
  4. Add Commands to the Project
  5. Connect Components to Create an Application Flow
  6. Java ME Client to Web Application Wizard

Creating the Project

The NetBeans IDE provides a wizard that enables you to quickly create a MIDP project.

  1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Java ME. Under Projects, select Mobile Application and click Next.
  2. Enter MobileApplication in the Project Name field. Change the Project Location to a directory on your system. In this tutorial we refer to this directory as NetBeansProjects.
  3. Uncheck the Create Hello MIDlet checkbox (it is checked by default). Click Next.
  4. Leave the Java(TM) Platform Micro Edition SDK 3.0 as the selected Emulator Platform. Click Next, then Finish.
    The IDE creates the NetBeansProjects/MobileApplication project folder.
    The project folder contains all of your sources and project metadata, such as the project Ant script.

    MobileApplication project created

Adding Package and a Visual MIDlet to the Project

  1. Choose the MobileApplication project in the Projects Window, then choose File > New File (Ctrl-N). Under Categories, select MIDP. Under File Types, select Visual MIDlet. Click Next.
  2. Enter Calculator into the MIDlet Name and MIDP Class Name fields, type CalculatorPackage into the Package text field. Click Finish.
    The application displays in the Flow Design window of the Visual Mobile Designer.

    Package and Visual MIDlet added

Adding Components to the Project

  1. In the Flow View, drag and drop the following components from the Displayables section of the Palette:
    • Wait Screen
    • Form (x2)
    • Alert

      Components added

  2. Click Screen to switch to the Screen view and choose form in the drop-down list to the right of the Analyzer button.
  3. Right-click the form component and choose New/Add > Text Field from the popup menu.
  4. Repeat step 3 to add another Text Field to your form.
  5. Choose the textField component and enter A as the Label value in the Properties window (underneath the Palette).
  6. Right-click the A component and choose Rename from the popup menu.
  7. In the Rename dialog box, enter fieldA in the New Name field and click OK.
  8. Choose the textField1 component and enter B as the Label value in the Properties window.
  9. Right-click the B component and choose Rename from the popup menu.
  10. In the Rename dialog box, enter fieldB in the New Name field and click OK.
    The renamed fields will represent the calcSum method arguments.

    Fields A and B

  11. Choose form1 in the drop-down list to the right of the Analyzer button.
  12. Right-click the form1 component and choose New/Add > Text Field from the popup menu.
  13. Choose the textField component and enter Result as the Label value in the Properties window.
  14. Right-click the Result component and choose Rename from the popup menu.
  15. In the Rename dialog box enter resultField in the New Name field and click OK.
    The renamed field is intended for displaying the output of the calcSum method.

    Result field

  16. Choose alert in the drop-down list to the right of the Analyzer button.
  17. In the Properties window, change the Title property to Alert and change the String property to Error while getting results from the web application.
    The alert will display in case the web application does not return any result.

    Alert field

Adding Commands to the Project

  1. In the Screen view, with form1 selected, right-click inside the Device Screen and choose New/Add > Exit Command from the popup menu.

    Form1: exitCommand added

  2. In the Screen view, choose form in the drop-down list to the right of the Analyzer button.
  3. Right-click inside the Device Screen and choose New/Add > Ok Command from the popup menu.
  4. Repeat Step 4 to add Cancel Command from the popup menu.

    Form: okCommand and cancelCommand added

  5. Press Ctrl + S to save your edits.

Connecting Components to Create an Application Flow

In the Flow View, click on the Started text on the Mobile Device and drag it to the form component. In the same manner, connect the components together as shown in the following graphic.

Application flow

Java ME Client to Web Application Wizard

Let's use the Java ME Client to Web Application wizard to create a mobile client inside the mobile project with the calcSum method selection.

  1. Expand MobileApplication, right-click Source Packages and choose New > Java ME Client to Web Application.
  2. In the Servlet and Client Type panel, choose the type of web application the MIDlet interacts with: enter WebToMobileServlet as the Servlet Name, ensure the Methods in Web Application option is chosen (since the mobile client is going to connect directly to the web application), and click Next.

    Wizard

  3. In the Methods In Web Project panel, check the int calcSum (int a, int b) and click Next.
  4. In the Client Options panel, leave the name and package for the generated client class as is, ensure the Generate stubs and Allow floating point options are checked, and click Finish.
    The Java ME client and mapping files are generated under the Java ME project.
    The servlet and supporting classes are generated under the web project.

    Java ME Client generated

Adding Source Code to Java ME Client

  1. Click the Calculator.java tab.
  2. In the Screen View, choose waitScreen in the drop-down list to the right of the Analyzer button.
  3. Right-click task [SimpleCancellableTask] under Resources and choose Go to Source in the popup menu.
  4. In the Source Editor, find section // write task-execution user code here and replace it with the following code:
        WebToMobileClient wc = new WebToMobileClient();
        int a = Integer.valueOf(getFieldA().getString()).intValue();
        int b = Integer.valueOf(getFieldB().getString()).intValue();
        int result = wc.calcSum(a, b);
        System.out.println(result);
        getResultField().setString(String.valueOf(result));
  5. Press Ctrl + S to save your edits.

Deploying the Web Project

To deploy the web application, in the Projects window, right-click the WebApplication node and choose Deploy from the popup menu.
The Output window displays as follows:

WebApplication deployed

top

Running the Client Project

To run the mobile client application select Run > Run Main Project or press F6 to run the main project.

Note: Before running the client application make sure that the server side application is deployed and running.

As MobileApplication runs, an emulator window opens and displays the application running in the default device emulator.

Client Application in emulator

Checking the Functionality

  1. In the Emulator window, enter any number in the A field, switch to the B field by clicking the arrow down the central button, and enter another number in the B field.

    A and B set

  2. Click the button underneath Menu, choose OK in the popup menu, and click the central button on the Emulator to confirm.
    After the WebApplication calculates the sum of the numbers you entered, form1 with the result displays.

    Result calculated

    Note: To see final result of the tutorial, download MobileCientToWebApplicationSample.zip.

top


See Also

top

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo