blob: fc0da1885ecdc2e294159f5d46052d70143a1f30 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved.
-->
<HTML>
<HEAD>
<TITLE>Mobile Client to Web Application Wizard: Creating a Client-Server Application - NetBeans Java ME Tutorial</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
</HEAD>
<BODY>
<a name="top"></a>
<H1>Mobile Client to Web Application Wizard: Creating a Client-Server Application </H1>
<p>The NetBeans IDE enables you to create client MIDlets that can connect to Web services through a middleware Web application.</p>
<P>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 <a href="http://jcp.org/en/jsr/summary?id=172">JSR-172 specification</a> 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.</p>
<p>If you are new to NetBeans Mobility or J2EE, you should start with the <A HREF="../../docs/javame/quickstart.html">NetBeans Java ME MIDP Quick Start Guide</A>
before continuing.</p>
<p><b>Contents</b></p>
<img src="../../../images_www/articles/70/netbeans-stamp.gif" class="stamp" width="114" height="114" alt="Content on this page applies to NetBeans IDE 7.0" title="Content on this page applies to NetBeans IDE 7.0" >
<ul class="class">
<li><a href="#create-web">Creating Web Project</a>
<ul>
<LI><A HREF="#create">Setting Up a Web Application Project</A>
</LI>
<LI><A HREF="#add">Adding Business Logic</A>
</LI>
<LI><A HREF="#comp">Building the Project</A>
</LI>
</ul></li>
<li><a href="#create-mob">Creating Mobile Project</a>
<ul>
<LI><A HREF="#create-prj">Creating the
Project</A>
</LI>
<LI><A HREF="#add-pkg">Adding Package and a Visual MIDlet to the Project</A>
</LI>
<li><A href="#add-component">Adding Components to the Project</a></li>
<li><A HREF="#add-command">Adding Commands to the Project</a></li>
<li><A HREF="#connect-component">Connecting Components to Create an Application Flow</a></li>
<li><A HREF="#wizard">Java ME Client to Web Application Wizard</A></li>
<li><A HREF="#wizCode">Adding Source Code to Java ME Client</A></li>
</ul></li>
<LI><A HREF="#deploy">Deploying the Web Project</A>
</LI>
<LI><A HREF="#run">Running the Mobile Project</A>
</LI>
<LI><A HREF="#check">Checking the Functionality</A>
</LI>
<li><a href="#see-also">See Also</a></li>
</ul>
<p><b>To follow this tutorial, you need the software and resources listed below.</b></p>
<table>
<tbody>
<tr>
<th class="tblheader" scope="col">Software or Resource</th>
<th class="tblheader" scope="col">Version Required</th>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE with Java ME</a></td>
<td class="tbltd1">Version 7.0 and higher </td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td>
<td class="tbltd1">Version 6</td>
</tr>
<tr>
<td class="tbltd1">GlassFish or Tomcat</td>
<td class="tbltd1">Included in the <b>Java EE</b> and <b>All</b> installations of the IDE</td>
</tr>
</tbody>
</table>
<!--<a name="sample-app"></a>
<H2>Installing and Running the Sample Application</H2>
<P>Before we begin you might want to see final result of the tutorial.</P>
<p>Placeholder</p>
<P>Take the following steps to install the <tt>LoginScreenExample</tt> application:</P>
<OL>
<LI>Download <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/WebToMobile.zip">WebToMobileExample.zip</A>. This download contains the completed NetBeans Mobility and Web projects.</LI>
<LI>Unzip the file.</LI>
<LI>In the IDE, choose <tt>File</tt> &gt; <tt>Open Project</tt> and browse to the folder that contains the unzipped files with the <tt>WebToMobileExample</tt> project.</LI>
<li>Click Open Project.</li>
<LI>The Projects view should look like the following:</li>
<p class="align-center">
<IMG SRC="../../../images_www/articles/70/mobility/webtomobile/.png" NAME="graphics1" ALT="Project window with sample projects opened" BORDER=1> </p>
<LI>In the Projects window,
right-click the project <tt>AAA</tt> node and choose
Run Project (or press F6 key).</li>
<li>Right-click the
project <tt>AAA</tt> node and choose Run Project. As the
application runs, an emulator window opens and displays the
application running in the default device emulator. </LI>
<LI>In the Emulator window, click the button underneath
&quot;Launch&quot;.<BR>The emulator displays BBB, as shown:</li> <p class="align-center"><IMG SRC="../../../images_www/articles/70/mobility/webtomobile/.png" NAME="graphics3" ALT="placeholder" BORDER=1> </p>
</OL>
<UL>
<LI>Moving the cursor up and down allows you to
navigate between the Login and Password fields.
</LI>
<li>Click on the central button enables the selected text field for editing.</li>
<LI>Click the button underneath &quot;Login&quot; to finish.
</LI>
<LI>If the application connects to the server, you'll
see the <code>alert1</code> component displayed on the screen with a &quot;Login
Successful&quot; message.
</LI>
</UL>
<p class="align-center"><a href="#top">top</a></p>-->
<a name="create-web"></a>
<H2>Creating Web Project</H2>
<p>Before you use the Mobile Client to Web Application Wizard, you must have a Web project that includes a Web service client.</p>
<P><!--Now that you have seen the AAA in action,--> Let's
<!--go back to the beginning and-->
create a new Web Application Project for our Java Servlet from scratch. To
create a Java Web application in the IDE, do the following:</P>
<OL>
<LI><A HREF="#create">Set Up a Web Application Project</A>
</LI>
<LI><A HREF="#add">Add Business Logic</A>
</LI>
<LI><A HREF="#comp">Compile the Project</A>
</LI>
</OL>
<H3><A NAME="create"></A>Setting Up a Web Application Project</H3>
<OL>
<LI>Choose <tt>File</tt> &gt; <tt>New Project
(Ctrl-Shift-N)</tt>. Under Categories, select Java Web. Under Projects,
select Web Application and click Next.
</LI>
<LI>Enter <CODE>WebApplication</CODE>
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 <tt>NetBeansProjects</tt>.
</LI>
<li>(Optional) Select the Use Dedicated Folder for Storing Libraries checkbox and specify the location for the libraries folder.</li>
<li>Uncheck the Set as Main Project checkbox, click Next. </li>
<li>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.</li>
<li>Leave Set Source Level to 1.4 selected.
<p class="notes"><b>Note:</b> The Context Path (i.e., on the server) becomes <tt>/WebApplication</tt>, which is based on the name you gave the project in a previous step.</p>
</li>
<li>Click Next. In the Frameworks panel, click Finish to create the project.<br>
The IDE creates the <tt>NetBeansProjects/WebApplication</tt> 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. </li>
</ol>
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/projects-window.png" rel="lytebox"
title="WebApplication project and index.jsp">
<img src="../../../images_www/articles/71/mobility/webtomobile/projects-window-reduced.png"
alt="WebApplication project and index.jsp" border=1></a></p>
<H3><A NAME="add"></A>Adding Business Logic</H3>
<p>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: </p>
<ol>
<li>In the Projects window, right-click the <tt>Source Packages</tt> node and choose New &gt; Java Package. Enter <tt>MyPackage</tt> in the Package Name text box and click Finish.</li>
<li>Right-click the created <tt>MyPackage</tt> node and choose New &gt; Java Class. Enter <tt>Calculator</tt> in the Class Name text box and click Finish. </li>
<li>In the <tt>Calculator.java</tt> file that opens in the Source Editor window, insert the following method:
<pre> public int calcSum(int a, int b) {
return a + b;
} </pre>
</li>
<li>Press Ctrl + S to save your edits.</li>
</ol>
<H3><A NAME="comp"></A>Building the Project</H3>
<p>In the Projects window, right-click the <tt>WebApplication</tt> project node and choose Build (F11).<br>Your web application for summing up numbers is ready.</p>
<p class="notes"><b>Note:</b> By default, the project is built with the Compile on Save feature enabled, so you do not need to compile your code first.</p>
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/calculator.png" rel="lytebox"
title="Calculator.java">
<img src="../../../images_www/articles/71/mobility/webtomobile/calculator-reduced.png"
alt="Calculator.java" border=1></a></p>
<a name="create-mob"></a>
<h2>Creating Mobile Project</h2>
<p>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. </p>
<p> To create a Java ME client application, do the following:</P>
<OL>
<LI><A HREF="#create-prj">Create the Project</A>
</LI>
<LI><A HREF="#add-pkg">Add Package and a Visual MIDlet to the Project</A>
</LI>
<LI><A HREF="#add-component">Add Components to the Project</A>
</LI>
<li><A HREF="#add-command">Add Commands to the Project</a></li>
<li><A HREF="#connect-component">Connect Components to Create an Application Flow</a></li>
<li><a href="#wizard">Java ME Client to Web Application Wizard</a></li>
</ol>
<H3><A NAME="create-prj"></A>Creating the Project</H3>
<p>The NetBeans IDE provides a wizard that enables you to quickly create a MIDP project.</p>
<OL>
<LI>Choose <tt>File</tt> &gt; <tt>New Project
(Ctrl-Shift-N)</tt>. Under Categories, select Java ME. Under Projects,
select Mobile Application and click Next. </LI>
<LI>Enter <tt>MobileApplication</tt>
in the Project Name field. Change the Project Location to a
directory on your system. In this tutorial we refer to this directory as <tt>NetBeansProjects</tt>.</LI>
<LI>Uncheck the Create Hello MIDlet
checkbox (it is checked by default). Click Next. </LI>
<LI>Leave the Java(TM) Platform Micro Edition SDK 3.0
as the selected Emulator Platform. Click Next, then Finish.<br>
The IDE creates the <tt>NetBeansProjects/MobileApplication</tt> project folder.<br>The project folder contains all of your sources and project metadata, such as the project Ant script.
<p class="align-center">
<IMG SRC="../../../images_www/articles/71/mobility/webtomobile/mobile-prj-created.png" NAME="graphics1" ALT="MobileApplication project created" BORDER=1> </p>
</LI>
</OL>
<h3><A NAME="add-pkg"></A>Adding Package and a Visual MIDlet to the Project</h3>
<OL>
<LI>Choose the <CODE>MobileApplication</CODE> project in the Projects Window, then choose <tt>File</tt> &gt; <tt>New File (Ctrl-N)</tt>. Under Categories, select MIDP. Under File Types, select Visual MIDlet. Click Next.</LI>
<LI>Enter <CODE>Calculator</CODE> into the MIDlet Name and MIDP Class Name fields, type <tt>CalculatorPackage</tt> into the Package text field. Click Finish.<br>
The application displays in the Flow Design window of the Visual Mobile Designer.
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/midlet-added.png" rel="lytebox"
title="Package and Visual MIDlet added">
<img src="../../../images_www/articles/71/mobility/webtomobile/midlet-added-reduced.png"
alt="Package and Visual MIDlet added" border=1></a></p>
</LI>
</OL>
<h3><A NAME="add-component"></A>Adding Components to the Project</h3>
<OL>
<LI>In the Flow View, drag and drop the following components from the Displayables section of the Palette:
<UL>
<LI>Wait Screen</LI>
<LI>Form (x2)</LI>
<li>Alert
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/components-added.png" rel="lytebox"
title="Components added">
<img src="../../../images_www/articles/71/mobility/webtomobile/components-added-reduced.png"
alt="Components added" border=1></a></p></li>
</UL> </LI>
<li>Click Screen to switch to the Screen view and choose <tt>form</tt> in the drop-down list to the right of the Analyzer button.</li>
<li>Right-click the <tt>form</tt> component and choose <tt>New/Add</tt> &gt; <tt>Text Field</tt> from the popup menu.</li>
<li>Repeat step 3 to add another Text Field to your form.</li>
<li>Choose the <tt>textField</tt> component and enter <tt>A</tt> as the <tt>Label</tt> value in the Properties window (underneath the Palette).</li>
<li>Right-click the <tt>A</tt> component and choose Rename from the popup menu.</li>
<li>In the Rename dialog box, enter <tt>fieldA</tt> in the New Name field and click OK.</li>
<li>Choose the <tt>textField1</tt> component and enter <tt>B</tt> as the <tt>Label</tt> value in the Properties window.</li>
<li>Right-click the <tt>B</tt> component and choose Rename from the popup menu.</li>
<li>In the Rename dialog box, enter <tt>fieldB</tt> in the New Name field and click OK.<br>
The renamed fields will represent the <tt>calcSum</tt> method arguments.
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/fields.png" rel="lytebox"
title="Fields A and B">
<img src="../../../images_www/articles/71/mobility/webtomobile/fields-reduced.png"
alt="Fields A and B" border=1></a></p></li>
<li>Choose <tt>form1</tt> in the drop-down list to the right of the Analyzer button.</li>
<li>Right-click the <tt>form1</tt> component and choose <tt>New/Add</tt> &gt; <tt>Text Field</tt> from the popup menu.</li>
<li>Choose the <tt>textField</tt> component and enter <tt>Result</tt> as the <tt>Label</tt> value in the Properties window.</li>
<li>Right-click the <tt>Result</tt> component and choose Rename from the popup menu.</li>
<li>In the Rename dialog box enter <tt>resultField</tt> in the New Name field and click OK.<br>The renamed field is intended for displaying the output of the <tt>calcSum</tt> method.
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/resultfield.png" rel="lytebox"
title="Result field">
<img src="../../../images_www/articles/71/mobility/webtomobile/resultfield-reduced.png"
alt="Result field" border=1></a></p></li>
<li>Choose <tt>alert</tt> in the drop-down list to the right of the Analyzer button.</li>
<li> In the Properties window, change the <tt>Title</tt> property to <tt>Alert</tt> and change the <tt>String</tt> property to <tt>Error while getting results from the web application</tt>.<br>The alert will display in case the web application does not return any result.
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/alert.png" rel="lytebox"
title="Alert field">
<img src="../../../images_www/articles/71/mobility/webtomobile/alert-reduced.png"
alt="Alert field" border=1></a></p> </li>
</ol>
<h3><A NAME="add-command"></A>Adding Commands to the Project</h3>
<ol>
<li>In the Screen view, with <tt>form1</tt> selected, right-click inside the Device Screen and choose <tt>New/Add</tt> &gt; <tt>Exit Command</tt> from the popup menu.
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/second-form.png" rel="lytebox"
title="Form1: exitCommand added">
<img src="../../../images_www/articles/71/mobility/webtomobile/second-form-reduced.png"
alt="Form1: exitCommand added" border=1></a></p> </li>
<li>In the Screen view, choose <tt>form</tt> in the drop-down list to the right of the Analyzer button.</li>
<li>Right-click inside the Device Screen and choose <tt>New/Add</tt> &gt; <tt>Ok Command</tt> from the popup menu.</li>
<li>Repeat Step 4 to add <tt>Cancel Command</tt> from the popup menu.
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/first-form.png" rel="lytebox"
title="Form: okCommand and cancelCommand added">
<img src="../../../images_www/articles/71/mobility/webtomobile/first-form-reduced.png"
alt="Form: okCommand and cancelCommand added" border=1></a></p></li>
<li>Press Ctrl + S to save your edits.</li>
</ol>
<h3><A NAME="connect-component"></A>Connecting Components to Create an Application Flow</h3>
<p>In the Flow View, click on the <tt>Started</tt> text on the Mobile Device and drag it to the <tt>form</tt> component. In the same manner, connect the components together as shown in the following graphic.</p>
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/app-flow.png" rel="lytebox"
title="Application flow">
<img src="../../../images_www/articles/71/mobility/webtomobile/app-flow-reduced.png"
alt="Application flow" border=1></a></p>
<h3><A NAME="wizard"></A>Java ME Client to Web Application Wizard</h3>
<p>Let's use the Java ME Client to Web Application wizard to create a mobile client inside the mobile project with the <tt>calcSum</tt> method selection.</p>
<OL>
<LI>Expand <tt>MobileApplication</tt>, right-click <tt>Source Packages</tt> and choose <tt>New</tt> &gt; <tt>Java ME Client to Web Application</tt>.</LI>
<li>In the Servlet and Client Type panel, choose the type of web application the MIDlet interacts with: enter <tt>WebToMobileServlet</tt> 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.
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/wizard.png" rel="lytebox"
title="Wizard">
<img src="../../../images_www/articles/71/mobility/webtomobile/wizard-reduced.png"
alt="Wizard" border=1></a></p></li>
<li>In the Methods In Web Project panel, check the <tt>int calcSum (int a, int b)</tt> and click Next.</li>
<li>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.<br>
The Java ME client and mapping files are generated under the Java ME project.<br>
The servlet and supporting classes are generated under the web project.
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/client-generated.png" rel="lytebox"
title="Java ME Client generated">
<img src="../../../images_www/articles/71/mobility/webtomobile/client-generated-reduced.png"
alt="Java ME Client generated" border=1></a></p></li>
</ol>
<h3><A NAME="wizCode"></A>Adding Source Code to Java ME Client</h3>
<ol>
<li>Click the <tt>Calculator.java</tt> tab.</li>
<li>In the Screen View, choose <tt>waitScreen</tt> in the drop-down list to the right of the Analyzer button.</li>
<li>Right-click <tt>task [SimpleCancellableTask]</tt> under Resources and choose Go to Source in the popup menu.</li>
<li>In the Source Editor, find section <tt>// write task-execution user code here</tt> and replace it with the following code:
<pre> 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));</pre></li>
<li>Press Ctrl + S to save your edits.</li>
</ol>
<a name="deploy"></a><H2>Deploying the Web Project</H2>
<p>To deploy the web application, in the Projects window, right-click the <tt>WebApplication</tt> node and choose Deploy from the popup menu.<br>The Output window displays as follows:</p>
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/web-deploy.png" rel="lytebox"
title="WebApplication deployed">
<img src="../../../images_www/articles/71/mobility/webtomobile/web-deploy-reduced.png"
alt="WebApplication deployed" border=1></a></p>
<p class="align-center"><a href="#top">top</a></p>
<H2><A NAME="run"></A>Running the Client Project</H2>
<p> To run the mobile client application select <tt>Run</tt> &gt; <tt>Run Main Project</tt> or press F6 to run the main project.</p>
<p class="notes"><b>Note:</b> Before running the client application make sure that the server side application is deployed and running.</p>
<p>As <tt>MobileApplication</tt> runs, an emulator window opens and displays the application running in the default device emulator.</p>
<p class="align-center">
<a href="../../../images_www/articles/71/mobility/webtomobile/client-run.png" rel="lytebox"
title="Client Application in emulator">
<img src="../../../images_www/articles/71/mobility/webtomobile/client-run-reduced.png"
alt="Client Application in emulator" border=1></a></p>
<a name="check"></a><H2>Checking the Functionality</H2>
<ol>
<li>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.
<p class="align-center"><img src="../../../images_www/articles/71/mobility/webtomobile/ab.png"
alt="A and B set" border=1></p></li>
<li>Click the button underneath Menu, choose OK in the popup menu, and click the central button on the Emulator to confirm.<br>
After the WebApplication calculates the sum of the numbers you entered, <tt>form1</tt> with the result displays.
<p class="align-center"><img src="../../../images_www/articles/71/mobility/webtomobile/abresult.png"
alt="Result calculated" border=1></p>
<p class="notes"><b>Note:</b> To see final result of the
tutorial, download <A HREF="https://netbeans.org/project_downloads/samples/Samples/Mobile/MobileClientToWebApplicationSample.zip">MobileCientToWebApplicationSample.zip</A>.</p> </li>
</ol>
<p class="align-center"><a href="#top">top</a></p>
<div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=Creating%20a%20Client-Server%20Application">Send Feedback on This Tutorial</a><br style="clear:both;" ></div>
<br style="clear:both;" >
<a name="see-also"></a>
<H2>See Also</H2>
<UL>
<li><a href="smscomposer.html">Visual Mobile Designer Custom Components: Creating an SMS Composer Application</a></li>
<li><a href="filebrowser.html">Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser</a></li>
<li><a href="pimbrowser.html">Visual Mobile Designer Custom Components: Creating a Personal Information Manager Application</a></li>
<li><a href="splashscreen.html">Visual Mobile Designer Custom Components: Using Splash Screens in Java ME Applications</a></li>
<li><a href="waitscreen.html">Visual Mobile Designer Custom Components: Creating Wait Screens for Mobile Applications</a></li>
<li><a href="tableitem.html">Visual Mobile Designer Custom Components: Using Table Items in Java ME Applications </a></li>
<li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Reference: Visual Mobile Designer Palette Guide</a></li>
</UL>
<p class="align-center"><a href="#top">top</a></p>
</BODY>
</HTML>