| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!-- Copyright (c) 2009, 2012, Oracle and/or its affiliates. All rights reserved. --> | |
| <!-- Use is subject to license terms.--> | |
| <html> | |
| <head> | |
| <title>Visual Mobile Designer Custom Components: Using Splash Screens in Java ME Applications - NetBeans IDE 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>Visual Mobile Designer Custom Components: Using Splash Screens in Java ME Applications</h1> | |
| <p>Splash screens are used to enhance the look and feel of an application. Typically, you use a splash screen when the program starts, | |
| or to display a logo or branding information. It gives users the first impression of your application. The Visual Mobile Designer (VMD) | |
| in NetBeans includes the SplashScreen custom component in the VMD palette. This brief example shows you how to create a new Java ME project | |
| using NetBeans that uses the SplashScreen component. It will also explain how to use the features to design and implement your own splash | |
| screens using this feature.</p> | |
| <p>If you are new to mobile application development in NetBeans, you should start with the<A HREF="quickstart.html"> NetBeans Java ME MIDP Quick Start Guide</A> before continuing.</p> | |
| <p class="notes"><b>Notes:</b></p> | |
| <ul> | |
| <!--<li>If you are using NetBeans IDE 6.8, refer to the <a href="../../68/javame/splashscreen.html">Using Splash Screens in Java ME Applications in NetBeans IDE 6.8</a> tutorial.</li>--> | |
| <li>If you are using NetBeans IDE 6.9, 7.0, or 7.1, refer to the <a href="../../71/javame/splashscreen.html">Using Splash Screens in Java ME Applications in NetBeans IDE 6.9, 7.0, or 7.1</a> tutorial.</li> | |
| </ul> | |
| <h3>Contents</h3> | |
| <img src="../../../images_www/articles/72/netbeans-stamp.gif" class="stamp" alt="Content on this page applies to NetBeans IDE 7.2" title="Content on this page applies to the NetBeans IDE 7.2" > | |
| <ul> | |
| <li><a href="#vmd" title="Installing Visual Mobile Designer">Installing Visual Mobile Designer</a></li> | |
| <li><a href="#create" title="Creating a Mobile Application with the SplashScreen Custom Component">Creating a Mobile Application with the SplashScreen Custom Component</a> | |
| <div> | |
| <ul> | |
| <LI><A HREF="#creating">Creating the SplashScreenExample project</a> </LI> | |
| <LI><A HREF="#addpackage">Adding Packages and a Visual MIDlet to the Project</a> </LI> | |
| <li><a href="#addcomponent">Adding Components to MySplashScreenMidlet</a></li> | |
| <li><a href="#timeout">Changing the Timeout Property of the SplashScreen Component</a></li> | |
| <li><a href="#addexit">Adding Exit and Back Commands to the Form Component</a></li> | |
| <li><a href="#addimage">Adding an Image Resource</a></li> | |
| <li><a href="#connect">Connecting the Components</a></li> | |
| <LI><A HREF="#run">Running the Project</A> </LI> | |
| </ul> | |
| </div> | |
| </li> | |
| <li><a href="#javadoc-splashscreen" title="Javadoc for the SplashScreen Component">Javadoc for the SplashScreen Component</a></li> | |
| <li><a href="#nextsteps" title="See Also">See Also</a></li> | |
| </ul> | |
| <p><b>To complete this tutorial, you need the following software and resources:</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.2 </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 or version 7 </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2><a name="vmd"></a>Installing Visual Mobile Designer</h2> | |
| <p>The NetBeans Visual Mobile Designer (VMD) is a graphical interface 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>To install the Visual Mobile Designer plugin, complete the following steps:</p> | |
| <ol> | |
| <li>Choose Tools > Plugins from the main menu.</li> | |
| <li>On the Available Plugins tab of the Plugins dialog box, select Visual Mobile Designer and click Install. </li> | |
| <li>At the Welcome page of the Installer dialog box, click Next. </li> | |
| <li>At the License Agreement page, read the license agreements associated with the plugin. If you agree to the terms of all of the license agreements, click the appropriate option and then click Install.</li> | |
| <li>(Optional) Select the Run in the Background option to run the installation in the background.</li> | |
| <li>When the installation process is complete, click Finish. </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2><a name="create"></a>Creating a Mobile Application with the SplashScreen Custom Component </h2> | |
| <p>Now that you have seen the SplashScreen 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="#creating">Create the SplashScreen project</a></li> | |
| <li> <a href="#addpackage">Add Packages and a Visual MIDlet to the Project</a> | |
| </li> | |
| <li><a href="#addcomponent">Add components to MySplashScreenMidlet</a></li> | |
| <li><a href="#timeout">Change the Timeout Property of the SplashScreen Component</a></li> | |
| <li><a href="#addexit">Add Exit and Back Commands to the Form Component</a></li> | |
| <li><a href="#addimage">Add an Image Resource</a></li> | |
| <li><a href="#bindimage">Bind an Image to a Component</a></li> | |
| <li><a href="#connect">Connect the Components</a></li> | |
| <li><a href="#run">Run the Project</a></li> | |
| </ol> | |
| <h3 class="tutorial"><a name="creating"></a>Creating the SplashScreen 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>SplashScreenExample</code> in the Project Name field. Change | |
| the Project Location to a directory on your system. This directory is called <tt>$PROJECTHOME</tt>. </li> | |
| <li> Uncheck the Create Hello MIDlet checkbox. Click Next. </li> | |
| <li> Leave the CLDC Oracle Java(TM) Platform Micro Edition SDK 3.0.5 as the selected Emulator Platform. Click | |
| Finish. </li> | |
| <!--li> Click Finish on the Add Additional Configurations dialog to create the project. | |
| The Projects window displays the project sources and metadata such | |
| as the project Ant script. The application itself is displayed in the Flow | |
| Design window of the Visual Mobile Designer. </li--> | |
| </ol> | |
| <h3 class="tutorial"><a name="addpackage"></a>Adding Packages and a Visual MIDlet | |
| to the Project</h3> | |
| <ol> | |
| <li> Choose <code>SplashScreenExample</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>splashscreenexample</code> in the Package Name field. Click Finish. </li> | |
| <li> Choose the <code>splashscreenexample</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>MySplashScreenMIDlet</code> into MIDlet Name and MIDP Class Name fields. Click Finish. </li> | |
| </ol> | |
| <h3 class="tutorial">Adding Components to MySplashScreenMidlet<a name="addcomponent"></a></h3> | |
| <ol> | |
| <li> Switch your Visual MIDlet to the Flow Designer. Drag the following | |
| Screen components from the Palette and drop them in the Flow Designer: | |
| <ul> | |
| <li>Splash Screen</li> | |
| <li>Form</li> | |
| </ul> | |
| The Flow Designer with the added components should look as follows: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/72/javame/splashscreen/components.png" rel="lytebox" | |
| title="Flow view with added components"> | |
| <img src="../../../images_www/articles/72/javame/splashscreen/components-small.png" | |
| alt="Flow view with added components" border=1></a></p> | |
| </li> | |
| <li>Select the <tt>splashScreen</tt> component. In the Properties of this component, | |
| change the Title to <code>Splash Screen</code> and enter <code>Wait for | |
| 10 sec. or press a key to close it </code> into the <tt>Text</tt> property.</li> | |
| <li>Select the <code>form</code> component and change its Title property to <code>Form</code>.</li> | |
| <li>Double-click the <code>form</code> component in the Flow Designer to switch | |
| to the Screen Designer</li> | |
| <li>Select the <tt>StringItem</tt> component from the Items section of the Palette, | |
| then drag and drop it into the <code>form</code> component.</li> | |
| <li>Double-click <tt>stringItem</tt> inside the Screen Designer. Delete the <tt>stringItem</tt> title | |
| and type <code>Press Exit to close | |
| application</code>. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/72/javame/splashscreen/stringitem.png" rel="lytebox" | |
| title="Screen view with a stringitem"> | |
| <img src="../../../images_www/articles/72/javame/splashscreen/stringitem-small.png" | |
| alt="Screen view with a stringitem" border=1></a></p></li> | |
| </ol> | |
| <h3 class="tutorial">Changing the Timeout Property of the SplashScreen Component<a name="timeout"></a></h3> | |
| <ol> | |
| <li>Choose Flow at the top of the Visual Mobile Designer window to return to the Flow view.</li> | |
| <li>Select the <code>splashScreen</code> component. </li> | |
| <li>In the Properties window find the <tt>Timeout</tt> property and change it from | |
| <tt>5000</tt> to <tt>10000</tt> milliseconds. | |
| <p class="align-center"><img src="../../../images_www/articles/72/javame/splashscreen/timeout.png" | |
| alt="Properties window for the splashScreen component" border=1></p></li> | |
| </ol> | |
| <h3 class="tutorial">Adding the Exit Command to the Form Component<a name="addexit"></a></h3> | |
| <p>Choose the <tt>Exit Command</tt> from the Commands section of the Palette, and | |
| drag it into the <code>form</code> component. </p> | |
| <p class="align-center"><img src="../../../images_www/articles/72/javame/splashscreen/exit.png" | |
| alt="Exit command added to the form component" border=1></p> | |
| <h3 class="tutorial">Adding an Image Resource<a name="addimage"></a></h3> | |
| <ol> | |
| <li> | |
| Copy a <tt>*.png</tt></a> file | |
| to the <code>$PROJECTHOME/src/splashscreenexample</code> folder. | |
| </li> | |
| <li> Right-click the <tt>splashScreen</tt> component and choose Properties in the popup menu. </li> | |
| <li> | |
| In the Properties dialog box, click the ellipsis button (<img src="../../../images_www/articles/72/javame/splashscreen/ellipsis-button.png" border=1 alt="Ellipsis button" >) against the Image property. </li> | |
| <li> In the Image dialog box, click Add.<br> | |
| The <code>image1</code> component is added.</li> | |
| <li>Click Browse and in the Open dialog box specify the path to the copied <tt>*.png</tt> file.<br> | |
| The image is added. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/72/javame/splashscreen/image-db.png" rel="lytebox" | |
| title="Screen view with a stringitem"> | |
| <img src="../../../images_www/articles/72/javame/splashscreen/image-db-small.png" | |
| alt="Screen view with a stringitem" border=1></a></p></li> | |
| <li>Click OK to close the Open dialog box.</li> | |
| <li>Click Close to close the Properties dialog box.<br>The image is bound to the <tt>splashScreen</tt> component.</li> | |
| <li>In the Flow Designer, double-click the <tt>splashScreen</tt> component to open the Splash Screen in the Screen Designer.<br> | |
| It should look like the folowing screen: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/72/javame/splashscreen/splashscreen.png" rel="lytebox" | |
| title="Splash screen with an image and text"> | |
| <img src="../../../images_www/articles/72/javame/splashscreen/splashscreen-small.png" | |
| alt="Splash screen with an image and text" border=1></a></p></li> | |
| </ol> | |
| <h3 class="tutorial">Connecting Components <a name="connect"></a></h3> | |
| <p>In the Flow view, on <tt>Started</tt> on the Mobile Device and drag it to the <tt>splashScreen</tt> component. In the same manner, connect the components | |
| as shown in the following graphic.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/72/javame/splashscreen/splash-flow.png" rel="lytebox" | |
| title="Flow view"> | |
| <img src="../../../images_www/articles/72/javame/splashscreen/splash-flow-small.png" | |
| alt="Flow view" border=1></a></p> | |
| <h3 class="tutorial">Running the Project<a name="run"></a></h3> | |
| <p>Press F6 to run the project. Alternatively you can select <tt>Run</tt> > <tt>Run Project</tt> from the main menu.<br>As the application 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/72/javame/splashscreen/emulator.png" rel="lytebox" | |
| title="Emulator displays the splash screen of the application"> | |
| <img src="../../../images_www/articles/72/javame/splashscreen/emulator-small.png" | |
| alt="Emulator displays the splash screen of the application" border=1></a> | |
| </p> | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2><a name="javadoc-splashscreen"></a>Javadoc for the SplashScreen Component</h2> | |
| <P>The NetBeans IDE provides API Javadocs for the <tt>SplashScreen</tt> component, as well as other components you can use in the Visual Mobile Designer. To | |
| read the Javadocs for the <tt>SplashScreen</tt> component:</P> | |
| <OL> | |
| <li>Place the cursor on the <tt>SplashScreen</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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/72/javame/splashscreen/javadoc.png" rel="lytebox" | |
| title="Javadoc for SplashScreen"> | |
| <img src="../../../images_www/articles/72/javame/splashscreen/javadoc-small.png" | |
| alt="Javadoc for SplashScreen" border=1></a> | |
| </p></li> | |
| <li>Click the Show documentation in external web browser icon (<img src="../../../images_www/articles/72/javame/splashscreen/show-doc-button.png" alt="Show documentation in external web browser">) in the popup window to view the detailed information about the <tt>SplashScreen</tt> component in your browser.</li> | |
| </OL> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=Using%20Splash%20Screens%20in%20Java%20ME%20Applications">Send Feedback on This Tutorial</a></div> | |
| <br style="clear:both;" > | |
| <p class="align-center"><a href="#top">top</a></p> | |
| <h2><a name="nextsteps"></a>See Also</h2> | |
| <ul> | |
| <li><a href="../../71/javame/smscomposer.html">Visual Mobile Designer Custom Components: Creating an SMS Composer Application</a></li> | |
| <li><a href="../../71/javame/filebrowser.html">Visual Mobile Designer Custom Components: Creating Mobile Device File Browser</a></li> | |
| <li><a href="../../71/javame/pimbrowser.html">Visual Mobile Designer Custom Components: Creating a Personal Information Manager Application</a></li> | |
| <li><a href="../../71/javame/loginscreen.html">Visual Mobile Designer Custom Components: Creating Mobile Login Screens</a></li> | |
| <li><a href="../../71/javame/waitscreen.html">Visual Mobile Designer Custom Components: Creating Wait Screens for Mobile Applications</a></li> | |
| <li><a href="../../71/javame/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> |