| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!-- Copyright (c) 2009, 2010, 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"> | |
| <meta name="Karol Harezlak" content="NetBeans Visual Mobile Designer"> | |
| </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>Note:</b> 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.</p>--> | |
| <h3>Contents</h3> | |
| <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 the NetBeans IDE 6.9 and later" > | |
| <ul> | |
| <li><a href="#sample" title="Installing and Running the Sample Application">Installing and Running the Sample Application</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="#create">Creating the SplashScreenExample 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 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="#bindimage">Binding an Image to a Component</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 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 or version 7 </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2><a name="sample"></a>Installing and Running the Sample Application</h2> | |
| <p>Before we begin, you might want to see final result of the tutorial. <br> | |
| Take the following steps to install <tt>SplashScreenExample</tt> application:</p> | |
| <ol> | |
| <li>Download <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/SplashScreenExample.zip"> | |
| SplashScreenExample.zip.</a></li> | |
| <li>Unzip the file. </li> | |
| <li>The Projects window should look like the following: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-open.png" border=1 alt="Open Project window displaying the SplashScreen project." > </p> | |
| </li> | |
| <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." The emulator displays a splash screen, as shown: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-emulator.png" border=1 alt="Device emulator displaying a splash screen that tells users to wait for ten seconds or press a key to close"></p> | |
| </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> | |
| <div class="indent"> | |
| <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> | |
| </div> | |
| <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 Sun Java Wireless Toolkit 2.5.2 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 window. Drag the following | |
| Screen components from the Palette and drop them in the Flow Designer: | |
| <ul> | |
| <li>Splash Screen</li> | |
| <li>Form</li> | |
| </ul> | |
| </li> | |
| <li> The Splash Screen component when viewed in the Flow Designer: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-flowscreen.png" border=1 alt="Flow design view in VMD showing selcted components" ></p></li> | |
| <li>Select the <tt>splashScreen1</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 form component to and change its Title property to <code>Form</code>.</li> | |
| <li>Double-click the form component in the Flow window to switch | |
| to the Screen Designer</li> | |
| <li>Select the <tt>StringItem</tt> component from the Form Items section of the Palette, | |
| then drag and drop it into form1.</li> | |
| <li>Double-click <tt>stringItem1</tt> inside Screen Designer. Delete the <tt>stringItem1</tt> title | |
| and change <code><Enter Text></code> to <code>Press Exit to close | |
| application</code>.</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 re-open the Flow Design view.</li> | |
| <li>Select the Splash Screen 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.</li> | |
| </ol> | |
| <h3 class="tutorial">Adding Exit and Back Commands to the Form Component<a name="addexit"></a></h3> | |
| <p>Choose the <tt>Exit Command</tt> from the Commands section in the Palette, and | |
| drag it into the form1 component. </p> | |
| <h3 class="tutorial">Adding an Image Resource<a name="addimage"></a></h3> | |
| <ol> | |
| <li> | |
| Copy the <tt>splash.png</tt> 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/71/mobility/splashscreen/ellipsis-button.png" border=1 alt="Ellipsis button" >) against the Image property. </li> | |
| <li> In the Image dialog box, click Add.<br> | |
| The image1 component is added.</li> | |
| <li>In the Open dialog box specify the path to the copied <tt>splash.png</tt> file.<br> | |
| The image is added.</li> | |
| <li>Click OK to close the Open dialog box.</li> | |
| <li>Click Close to close the Properties dialog box.</li> | |
| </ol> | |
| <a name="bindimage"></a> | |
| <h3 class="tutorial">Binding an Image to a Component</h3> | |
| <ol> | |
| <li> Select the <tt>splashScreen1</tt> component. </li> | |
| <li> In the Properties Window, use the drop-down menu to change the Image | |
| property to image1. | |
| Double-click the component to open the splash screen in the Screen Designer. | |
| It should look like the folowing screen. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-screendesigner.png" border=1 alt="Splash screen with an image and text "Wait 10 sec. or press a key to close it."" ></p> | |
| </li> | |
| </ol> | |
| <h3 class="tutorial">Connecting Components <a name="connect"></a></h3> | |
| <p>In the Flow view, click on the Start Point and drag the arrow | |
| to the <tt>splashscreen1</tt> component. In the same manner, connect the components | |
| as shown in the following graphic.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/splashscreen/splash-flow.png" border=1></p> | |
| <h3 class="tutorial">Running the Project<a name="run"></a></h3> | |
| <p>Press F6 to run the main project. Alternatively you could select <tt>Run</tt> > <tt>Run Main Project</tt>.</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 VMD. 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. </li> | |
| <li>Click the Show documentation in external web browser icon (<img src="../../../images_www/articles/71/mobility/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 | |
| Us Your Feedback</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="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 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="loginscreen.html">Visual Mobile Designer Custom Components: Creating Mobile Login Screens</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> |