Visual Mobile Designer Custom Components: Creating Mobile Splash S... http://www.netbeans.org/kb/50/splash.

html

Search:

HOME / Docs & Support / NetBeans IDE 5.0

Visual Mobile Designer Custom Components: Creating Mobile Learning Trails

Splash Screens Basic Java Programming

Contributed by Karol Harezlak Java GUIs and Project Matisse

Splash screens are used to enhance the look and feel of an application. Typically, you use a splash screen Web Applications
Feedback Java EE Applications
when the program starts, or to display a logo or branding information. It gives users the first impression of
your application. Mobile Applications

As you'll see in this tutorial, the Visual Mobile Designer (VMD) in the NetBeans Mobility Pack makes it easy to design a SOA Applications and UML
splash screen and implement it using the SplashScreen custom component included in the VMD's palette. NetBeans Modules and
Rich-Client Applications

Application Overview
This is a quick example that shows you how to add a splashscreen to your Java ME application using the SplashScreen
Docs for Packs
component. You will learn how create a new Mobile Application project with NetBeans Mobility Pack 5.0 and understand Mobility Pack
the basic features of the SplashScreen custom component. Visual Web Pack
Enterprise Pack
Requirements C/C++ Pack
Before you begin, you need to install the following software on your computer:
Profiler
NetBeans IDE 5.0 (download) UML Module

NetBeans Mobility Pack 5.0 (download)

Java Standard Development Kit (JDK) version 1.4.2 or 5.0 (download) Additional Resources
FAQs
If you are new to the NetBeans Mobility Pack 5.0, you should start with NetBeans Mobility Pack 5.0 Quick Start Guide
before continuing. Sample Applications
Support
Training
Installing and Running the Sample Application
NetBeans 5.0 Docs
Before we begin, you might want to see final result of the tutorial.
NetBeans 6.0 Preview Docs
Take the following steps to install SplashScreen example application:
Contribute Documentation!

1. Download splashscreen.zip.

2. Unzip the file.

3. In the IDE, choose File > Open Project and browse to the folder that contains the unzipped file.

4. Open the Project and Inspector windows. It should look like the following:

5. In the Projects window, right-click the project node and choose Run Project (or press F6 key). As the application
is run, an emulator window opens and displays the application running in the default device emulator.

6. In the Emulator window, click the button underneath "Launch."

The emulator displays a splash screen, as shown:

1 of 4 25/05/2007 23:44
Visual Mobile Designer Custom Components: Creating Mobile Splash S... http://www.netbeans.org/kb/50/splash.html

Creating a Mobile Application with the SplashScreen Custom Component

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, you will do the following:

1. Create the SplashScreen project.

2. Add packages and a Visual MIDlet to the project.

Creating the SplashScreen Project

1. Choose File > New Project (Ctrl-Shift-N). Under Categories, select Mobile. Under Projects, select Mobile
Application and click Next.

2. Enter SplashScreenExample in the Project Name field. Change the Project Location to a directory on your
system. From now on, we will refer to this directory as $PROJECTHOME.

3. Uncheck the Create Hello MIDlet checkbox. Click Next.

4. Leave the J2ME Wireless Toolkit as the selected Target Platform. Click Next.

5. Click Finish.
The project folder contains all of your sources and project metadata, such as the project Ant script. The
application itself is displayed in the Flow Design window of the Visual Mobile Designer.

Adding Packages and a Visual MIDlet to the Project

1. Choose SplashScreenExample project in the Project Window, then choose File > New File (Ctrl-N) . Under
Categories, select Java Classes. Under File Types, select Java Package. Click Next.

2. Enter splashscreenexample in the Package Name field. Click Finish.

3. Choose the splashscreenexample package in the Project window, then choose File > New File (Ctrl-N) . Under
Categories, select MIDP. Under File Types, select Visual Midlet. Click Next.

4. Enter MySplashScreenMidlet into MIDlet Name and MIDP Class Name fields. Click Finish.

2 of 4 25/05/2007 23:44
Visual Mobile Designer Custom Components: Creating Mobile Splash S... http://www.netbeans.org/kb/50/splash.html

Adding Components to MySplashScreenMidlet

1. Switch your Visual MIDlet to the Flow Design window. Drag the following Screen components from the
Component Palette and drop them in the Flow Designer:

SplashScreen

Form

The SplashScreen component looks like the following when it is added to the Flow Designer:

2. Select the splashScreen1 component. In the Properties of this component, change the Title to Splash Screen
and enter Wait for 10 sec. or press a key to close it into the Text property.

3. Select the form1 component to and change its Title property to Form.

4. Double-click the form1 component in the Flow Designer Window to switch to the Screen Designer

5. Select the StringItem component from the Form Items section of the Palette, then drag and drop it into form1.

6. Double-click stringItem1 inside Screen Designer. Delete the title("stringItem1") and change <Enter Text> to
Press Exit to close application.

Changing the Timeout Property of the SplashScreen Component

1. Choose Flow Design at the top of the Visual Mobile Designer window to re-open the Flow Design window.

2. Select the splashScreen1 component.

3. In the Properties Window find the Timeout property and change it from 5000 to 10000 milliseconds.

Adding Exit and Back Commands to the Form Component

1. Choose the Exit Command from the Commands section in the Palette, and drag it into the form1 component.

Adding an Image Resource

1. Download and copy the splash.png file to the $PROJECTHOME/src/splashscreenexample folder.

2. Right-click the Resources in the Inspector Window and choose Add > Image.

3. Choose Add option from popup menu and then Image.

4. Select image1 in the Inspector Window.

5. In the Properties Window, choose the Resource Path and then choose splash.png.

Binding an Image to a Component

1. Select the splashScreen1[SplashScreen] component.

2. 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.

3 of 4 25/05/2007 23:44
Visual Mobile Designer Custom Components: Creating Mobile Splash S... http://www.netbeans.org/kb/50/splash.html

Connecting Components

1. In the Flow design window, click on the Start Point and drag the arrow to the splashscreen1 component. In the
same manner, connect the components as shown in the following graphic.

Running the Project

1. Press <F6> to Run the main project.

Alternatively you could select Run > Run Main Project.

To Learn More about the SplashScreen Component

The NetBeans IDE provides API documentation--javadocs--for the SplashScreen component, as well as other
components you can use in the VMD. To read the javadocs for the SplashScreen Component:

1. Choose View > Documentation Indices > NetBeans MIDP Components.

2. Click org.NetBeans.microedition.lcdui and then SplashScreen.

Next Steps
Read our other Custom Component tutorials:
Creating Wait Screens

Creating Table Items

See another example of a Splash Screen in action in this NetBeans Day Mobility Demo

Read the NetBeans Mobility Pack Quick Start Guide to learn about other features of the NetBeans Mobility
Pack

Shop SiteMap About Us Contact Legal By use of this website, you agree to the NetBeans Policies and Terms of Use

4 of 4 25/05/2007 23:44