| <!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 a Personal Information Manager 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 a Personal Information Manager 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 PIM Browser is a custom component that provides easy access to standard mobile devices functions | |
| like calendar, address book or task list. You can use the PIM Browser component to enable mobile Java applications to access locally stored personal information databases. This component utilizes The PIM (Personal Information Management) API which is a part of the <a href="http://jcp.org/en/jsr/detail?id=75">JSR-75 specification's</a> PDA Optional Packages for the Java ME Platform. Because JSR-75 is not a part of the MIDP 2.0 specification, it is by definition a custom | |
| component and can only be used with JSR-75 enabled devices.</p> | |
| <P>This tutorial shows you how to use the PIM Browser component in a mobile application for JSR-75 capable devices. It demonstrates | |
| the basic features of the the component such as browsing the content of a device's contact database, Calendar or To Do List. In addition | |
| to the PIM Browser, we also need to use three other components: Splash Screen, TextBox and Alert. | |
| </P> | |
| <!--<p class="notes"><b>Note:</b> If you are using NetBeans IDE 6.8, refer to the <a href="../../68/javame/pimbrowser.html">Creating a Personal Information Manager 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 PIM Browser Custom Component</a></li><div> | |
| <ul> | |
| <LI><A HREF="#create">Creating the PIMBrowserExample 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 Components to Create an Application Flow</A> </LI> | |
| <LI><A HREF="#storage">Adding Contacts to the Wireless Toolkit Contact Database</A></LI> | |
| <LI><A HREF="#run">Running the Project</A> </LI> | |
| </ul></div> | |
| <li><a href="#javadoc-pim">Javadoc for the PIM Browser 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 7 </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p>If you are new to NetBeans Mobility, you should start with the <A HREF="../../docs/javame/quickstart.html"> NetBeans Java ME MIDP Quick Start Guide</A> before continuing.</p> | |
| <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 PIMBrowserExample application:</P> | |
| <OL> | |
| <LI>Download <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/PIMBrowserExample.zip">PIMBrowserExample.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>PIMBrowserExample</tt> project.</li> | |
| <li>Click Open Project.<br> | |
| The Projects window should look like the following: </li> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/pimbrowser/pim-project.png" border=1 alt="Project window with PIM Browser example opened"> </p> | |
| <LI>In the Projects window, right-click the project node and choose Run Project (or press F6). 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."<BR>The emulator displays a Splash Screen component then PIM Browser, as shown:</li> | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/pimbrowser/pim-emulator70.png" border=1 alt="SDK 3.0 emulator displaying the sample PIM Browser application"></p> | |
| <li>Click the right upper button of the emulator to display the menu items like shown below: | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/pimbrowser/pim-emulator70-menu.png" border=1 alt="SDK 3.0 emulator displaying the menu items"></p></li> | |
| <LI>With the Details item selected, click the central button on the emulator, to display the contact details: </li> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/pimbrowser/pim-emulator2-70.png" border=1 alt="WTK 2.5 emulator displaying the sample PIM Browser application"></p> | |
| </OL> | |
| <UL> | |
| <LI>Move the cursor up and down to navigate through available positions. </LI> | |
| <LI>Click the button underneath "Back" to come back to the contact list. </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 >Creating an Application with the PIM Browser Custom Component</H2> | |
| <P>Now that you have seen the PIM Browser 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 PIMBrowserExample 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 Components to Create an Application Flow</A> </LI> | |
| <LI><A HREF="#storage">Add Contacts to the Wireless Toolkit Contact Database</A></LI> | |
| <LI><A HREF="#run">Run the Project</A> </LI> | |
| </OL> | |
| <H3 ><A NAME="create"></A>Creating the PIMBrowserExample Project</H3> | |
| <OL> | |
| <LI>Choose <tt>File</tt> > <tt>New Project (Ctrl-Shift-N)</tt>. Under Categories, select Java ME. Under Projects, select Mobile Application and click Next. </LI> | |
| <LI>Enter <CODE>PIMBrowserExample</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 <tt>$PROJECTHOME</tt>. </LI> | |
| <LI>Uncheck the Create Hello MIDlet checkbox. Click Next. </LI> | |
| <LI>Leave the Java (TM) Platform Micro Edition SDK 3.0 as the selected Emulator Platform. Click Next. </LI> | |
| <LI>In the More Configurations Selection, 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> | |
| <H3 ><A NAME="add"></A>Adding Packages and a Visual | |
| MIDlet to the Project</H3> | |
| <OL> | |
| <LI>Choose the <CODE>PIMBrowserExample</CODE> | |
| project in the Project view, 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>pimbrowserexample</CODE> | |
| in the Package Name field. Click Finish. | |
| </LI> | |
| <LI>Choose the <CODE>pimbrowserexample</CODE> | |
| package in the Project view, 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>PIMBrowserExample</CODE> into MIDlet Name and MIDP | |
| Class Name fields. Click Finish.<br> The application displays in the Flow view of the Visual Mobile Designer. | |
| </LI> | |
| </OL> | |
| <H3><A NAME="addcomponent"></A>Adding Components to | |
| the Project </H3> | |
| <OL> | |
| <LI>In the Flow Designer, | |
| drag and drop the following components from the Component Palette: </LI> | |
| <UL> | |
| <li><tt>Splash Screen</tt></li> | |
| <li><tt>Alert</tt></li> | |
| <li><tt>PIM Browser</tt></li> | |
| </UL> | |
| <LI>Click on <tt>splashScreen</tt> and, in the Properties Window, change | |
| the <tt>Text</tt> value from <tt>null</tt> to <tt>PIM | |
| Browser Example</tt>. | |
| <LI>Click on <tt>alert</tt> and, in the Properties Window, change the <tt>String</tt> property value to <tt>Contact selected</tt>. | |
| </OL> | |
| <H3><A NAME="addcommands"></A>Adding Commands to the | |
| Project</H3> | |
| <OL> | |
| <li>In the Flow Designer, choose <tt>Exit Command</tt> from the Commands section of the | |
| Component Palette.</li> | |
| <li>Drag and drop it into the <tt>pimBrowser</tt> component.</li> | |
| </OL> | |
| <H3><A NAME="connect"></A>Connecting Components to Create an Application Flow </H3> | |
| <p>In the Flow Designer, click on the <tt>Started</tt> on the | |
| Mobile Device and drag it to the <tt>splashScreen</tt> 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/pimbrowser/pim-flow.png" border=1 alt="Shows the Flow Designer with components conneted by command lines"></p> | |
| <H3><A NAME="storage"></A>Adding Contacts to the | |
| Wireless Toolkit Contact Database</H3> | |
| <P> Copy the <A HREF="https://netbeans.org/files/documents/4/1613/SAMPLE.VCF"> sample contact | |
| </A>to the <tt>javame-sdk</tt> folder in your user directory <tt>$JAVAME-SDKHOME/3.0/work/0/appdb/PIM/contacts/Contacts/</tt>.<br> | |
| This folder contains the following three files by default: | |
| <li> 1.vcf</li> | |
| <li> 2.vcf</li> | |
| <li>categories.txt</li> | |
| </P> | |
| <H3><A NAME="run"></A>Running the Project</H3> | |
| <div> | |
| <p>Press F6 to run the main project or select <tt>Run</tt> > <tt>Run Main Project</tt>.</p> | |
| </div> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <a name="javadoc-pim"></a> | |
| <H2>Javadoc for the PIM Browser Component</H2> | |
| <P>The NetBeans IDE provides API Javadocs for the <tt>PIMBrowser</tt> | |
| component, as well as other components you can use in the VMD. To | |
| read the Javadocs for the <tt>PIMBrowser</tt> component do the following: | |
| </P> | |
| <OL> | |
| <li>Place the cursor on the <tt>PIMBrowser</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/pimbrowser/show-doc-button.png" alt="Show documentation in external web browser">) in the popup window to view the detailed information about the <tt>PIMBrowser</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:%20PIM%20Browser">Send Feedback on This Tutorial</a></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="loginscreen.html">Visual Mobile Designer Custom Components: Creating Mobile Login Screens</a></li> | |
| <li><a href="filebrowser.html">Visual Mobile Designer Custom Components: Creating a Mobile Device File Browser</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> |