| <!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>Visual Mobile Designer Custom Components: Creating an SMS Composer 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"> | |
| <meta name="author" content="Karol Harelzak"> | |
| </head> | |
| <BODY> | |
| <a name="top"></a> | |
| <H1>Visual Mobile Designer Custom Components: Creating an SMS Composer Application </H1> | |
| <p>The Visual Mobile Designer (VMD) is a graphical interface within NetBeans Mobility that enables you to design mobile applications using drag and drop components. The | |
| VMD allows you to define the application flow and design your GUI using the components supplied by the IDE, or components you design yourself. The VMD contains many standard User Interface (UI) components that you can use to create applications such as Lists, Alerts, Forms and Images. It also includes custom components that simplify the creation of more complex features, such as Wait Screens, Splash Screens, Table Items and more.</p> | |
| <P>The SMS Composer is a custom component that provides a mechanism and user interface to send short message using Short Message Service (SMS). | |
| This component utilizes the <a href="http://jcp.org/en/jsr/detail?id=120">JSR-120</a> Wireless Messaging API. This API is | |
| not a part of the MIDP 2.0 specification so this custom component can only be deployed to devices that have built-in support for JSR-120.</P> | |
| <P>This tutorial shows you how to use the SMS Composer component in a mobile application for Wireless Messaging API (WMA) enabled devices. | |
| You'll learn the basic features of this component, and how to send message using Short Message Service. </P> | |
| <P>In addition to the SMS Composer custom component we also need to use two other MIDP components: Splash Screen and Alert. | |
| </P> | |
| <!--<p class="notes"><b>Note:</b> If you are using NetBeans IDE 6.8, refer to the <a href="../../68/javame/smscomposer.html">Creating an SMS Composer Application in NetBeans IDE 6.8</a> tutorial.</p>--> | |
| <p><b>Contents</b></p> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="Content on this page applies to NetBeans IDE 6.9 and later" title="Content on this page applies to NetBeans IDE 6.9 and later" > | |
| <ul class="class"> | |
| <li><a href="#sample-app">Installing and Running the Sample Application</a></li> | |
| <li><a href="#create-app">Creating an Application with the SMS Composer Component</a></li><div> | |
| <ul> | |
| <LI><A HREF="#create">Creating the SMSComposerExample project</A> </LI> | |
| <LI><A HREF="#add">Adding Packages and a Visual MIDlet to the Project</A> </LI> | |
| <LI><A HREF="#addcomponent">Adding Components to the Project</A> </LI> | |
| <LI><A HREF="#addcommands">Adding Commands to the Project</A> </LI> | |
| <LI><A HREF="#connect">Connecting the Components to Create an Application Flow</A> </LI> | |
| <LI><A HREF="#insert">Modifying Task for Wait Screen</A> </LI> | |
| <LI><A HREF="#run">Running the Project</A> </LI> | |
| </ul> | |
| </div> | |
| <li><a href="#javadoc-loginscreen">Javadoc for the SMS Composer Component</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 6.9 and later </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 and version 7</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>Take the following steps to install the <tt>SMSComposerExample</tt> application:</P> | |
| <OL> | |
| <LI>Download <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/SMSComposerExample.zip">SMSComposerExample.zip</A>.</LI> | |
| <LI>Unzip the file. </LI> | |
| <LI>In the IDE, choose <tt>File</tt> > <tt>Open Project</tt> and browse to the folder that contains the unzipped files with the <tt>SMSComposerExample</tt> project.</LI> | |
| <li>Click Open Project.<br> | |
| The Projects window should look like the following: | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/smscomposer/sms-project.png" alt="Projects window with SMS Composer example opened" border=1></p> </LI> | |
| <LI>In the Projects window, right-click the project node and choose <tt>Run Project</tt> (or press F6). <br> | |
| 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 "Launch". The emulator displays a Splash Screen component then SMS Composer, as shown: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/smscomposer/sms-emulator.png" alt="WTK 2.5 emulator displaying the sampel SMS Composer application" border=1></p> </LI> | |
| </OL> | |
| <UL> | |
| <LI>Move the cursor up and down to navigate through available options like Phone Number or Message. </LI> | |
| <li>Click the central button to enable the selected text field for editing.</li> | |
| <LI>Click the button underneath "Send" to send the message. </LI> | |
| <LI>Click the button underneath "Exit" to close the application. </LI> | |
| </UL> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="create-app"></a> | |
| <H2 CLASS="western">Creating an Application with the SMS Composer Custom Component </H2> | |
| <P>Now that you have seen the SMS Composer component in action, let's go back to the beginning and create this application. To create the | |
| application, do the following: </P> | |
| <OL> | |
| <LI><A HREF="#create">Create the SMSComposerExample project</A> </LI> | |
| <LI><A HREF="#add">Add Packages and a Visual MIDlet to the Project</A> </LI> | |
| <LI><A HREF="#addcomponent">Add Components to the Project</A> </LI> | |
| <LI><A HREF="#addcommands">Add Commands to the Project</A> </LI> | |
| <LI><A HREF="#connect">Connect the Components to Create an Application Flow</A> </LI> | |
| <LI><A HREF="#insert">Modify Task for Wait Screen</A> </LI> | |
| <LI><A HREF="#run">Run the Project</A> </LI> | |
| </OL> | |
| <A NAME="create"></A> | |
| <H3>Creating the SMSComposerExample Project</H3> | |
| <OL> | |
| <LI>Choose <tt>File</tt> > <tt>New Project (Ctrl-Shift-N)</tt>. Under Categories, select JavaME. Under Projects, select Mobile Application and click Next. </LI> | |
| <LI>Enter <CODE>SMSComposerExample</CODE> | |
| in the Project Name field. Change the Project Location to a directory on your system. From now on let's refer to this | |
| directory as <code>$PROJECTHOME</code>. </LI> | |
| <LI>Uncheck the Create Hello MIDlet checkbox. Click Next. </LI> | |
| <LI>Leave the Sun Java Wireless Toolkit as the selected Emulator Platform. Click Next. </LI> | |
| <LI>Click Finish. </LI> | |
| <p class="notes"><b>Note:</b> The project folder contains all of your sources and project metadata, such as the project Ant script. </p> | |
| </OL> | |
| <A NAME="add"></A> | |
| <H3>Adding Packages and a Visual MIDlet to the Project</H3> | |
| <OL> | |
| <LI>Choose the <CODE>SMSComposerExample</CODE> project in the Project Window, then choose <tt>File</tt> > <tt>New File (Ctrl-N)</tt>. Under Categories, select Java. Under File Types, select Java Package. Click Next. </LI> | |
| <LI>Enter <CODE>smscomposerexample</CODE> in the Package Name field. Click Finish. </LI> | |
| <LI>Choose the <CODE>smscomposerexample</CODE> package in the Project window, then choose <tt>File</tt> > <tt>New File (Ctrl-N)</tt>. Under Categories, select MIDP. Under File Types, select Visual MIDlet. Click Next. </LI> | |
| <LI>Enter <CODE>SMSComposerExample</CODE> into MIDlet Name and MIDP Class Name fields. Click Finish.<br> | |
| The application displays in the Flow Design window of the Visual Mobile Designer. </LI> | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/smscomposer/sms-midlet.png" alt="SMSComposerExample in the Visual Mobile Designer" border=1></p> | |
| </OL> | |
| <H3><A NAME="addcomponent"></A>Adding Components to the Project</H3> | |
| <OL> | |
| <LI>In the Flow Designer window, drag and drop the following components from the Component Palette:</LI> | |
| <UL> | |
| <LI>Splash Screen</LI> | |
| <LI>SMS Composer</LI> | |
| <LI>Wait Screen</LI> | |
| <LI>Alert (x2)</LI> | |
| </UL> | |
| <LI>Click on splashScreen and, in the Properties Window, change value of property Text from <tt>null</tt> to the <tt>SMS Composer Example</tt> and press Enter.</LI> | |
| <LI>Click on alert and, in the Properties Window, change value of property Title from <tt>alert</tt> to the <tt>alertSent</tt>, the | |
| same way change alert1 Title property from <tt>alert1</tt> to the <tt>alertError</tt>. </LI> | |
| <LI> | |
| Click on alert and, in the Properties Window, change value of property String to the <tt>Message Sent</tt>, the same way change property String in | |
| the component alertError to the <tt>Error</tt>.</LI> | |
| <LI>Click on smsComposer and, in the Properties Window, uncheck the Automatically Send property in the SMS Properties category. </LI> | |
| </OL> | |
| <H3><A NAME="addcommands"></A>Adding Commands to the Project</H3> | |
| <OL> | |
| <LI>Open the Flow Designer.</LI> | |
| <LI>Choose Exit Command from the Commands section of the Component Palette. Drag and drop it into the smsComposer component in the Flow Designer.</LI> | |
| </OL> | |
| <A NAME="connect"></A> | |
| <H3>Connecting Components to Create an Application Flow</H3> | |
| <p>In the Flow Designer, click on the Start Point on the Mobile Device and drag it to the spalshScreen component. | |
| In the same manner, connect the components together as shown in the following graphic.</p> | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/smscomposer/sms-flow.png" alt="Shows the Flow Designer with components connected by command lines" border=1></p> | |
| <A NAME="insert"></A> | |
| <H3>Modifying Task for Wait Screen</H3> | |
| <p>In the Resources category of the Navigator, find and right-click the <tt>task</tt> component, choose Go To Source from the popup menu. In the Source window, find section <code>// write task-execution user code here"</code> and replace it | |
| with <code>smsComposer.sendSMS();</code>. </p> | |
| <A NAME="run"></A> | |
| <H3>Running the Project</H3> | |
| <p>Press <F6> to Run the main project. Alternatively you | |
| could select <tt>Run</tt> > <tt>Run Main Project</tt>.</p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="javadoc-loginscreen"></a> | |
| <H2>Javadoc for the SMS Composer Component</H2> | |
| <P>The NetBeans IDE provides API Javadocs for the <tt>SMSComposer</tt> component, as well as other components you can use in the VMD. To | |
| read the Javadocs for the <tt>SMSComposer</tt> component: | |
| </P> | |
| <OL> | |
| <li>Place the cursor on the <tt>SMSComposer</tt> component in the source code and press Ctr-Shift-Space (or choose <tt>Source</tt> > <tt>Show Documentation</tt>).<br> | |
| The Javadoc for this element displays in a popup window. </li> | |
| <li>Click the Show documentation in external web browser icon (<img src="../../../images_www/articles/71/mobility/smscomposer/show-doc-button.png" alt="Show documentation in external web browser">) in the popup window to view the detailed information about the <tt>SMSComposer</tt> component in your browser.</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=NetBeans%20Java%20ME%20Custom%20Component:%20SMS%20Composer">Send Feedback on This Tutorial</a></div> | |
| <br style="clear:both;" > | |
| <a name="see-also"></a> | |
| <H2>See Also</H2> | |
| <UL> | |
| <li><a href="filebrowser.html">Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser</a></li> | |
| <li><a href="loginscreen.html">Visual Mobile Designer Custom Components: Creating Mobile Login Screens</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> |