Visual Mobile Designer Custom Components: Creating Mobile Splash Screens
Contributed by Karol Harezlak
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.
As you'll see in this tutorial, the Visual Mobile Designer (VMD) in the NetBeans
Mobility Pack makes it easy to design a splash screen and implement it using
the SplashScreen custom component included in the VMD's palette.
Application Overview
This is a quick example that shows you how to add a splashscreen to your Java
ME application using the SplashScreen component. You will learn how create
a new Mobile Application project with the NetBeans Mobility Pack and understand
the basic features of the SplashScreen custom component.
Requirements
Before you begin, you need to install the following software on your
computer:
- NetBeans IDE 5.5 (download)
- NetBeans Mobility Pack 5.5 (download)
- Java Standard Development Kit (JDK) version 5.0 (download)
If you are new to the NetBeans Mobility Pack 5.5, you should start with
NetBeans Mobility Pack 5.5 Quick Start Guide before continuing.
Installing and Running the Sample Application
Before we begin, you might want to see final result of the
tutorial.
Take the following steps to install SplashScreen example
application:
- Download
splashscreen.zip.
- Unzip the file.
- In the IDE, choose File > Open Project and browse to the folder that
contains the unzipped file.
- Open the Project and Inspector windows. It should look like the following:
- 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.
- In the Emulator window, click the button underneath "Launch."
The emulator displays a splash screen, as shown:
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:
- Create the SplashScreen project.
- Add packages and a Visual MIDlet to the project.
- Add components to MySplashScreenMidlet.
- Change the Timeout property of the SplashScreen component.
- Add Exit and Back commands to the Form component.
- Add images to the splash screen.
- Connect the components.
- Run the project.
Creating the SplashScreen Project
- Choose File > New Project (Ctrl-Shift-N). Under Categories, select
Mobile. Under Projects, select Mobile Application and click Next.
- 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.
- Uncheck the Create Hello MIDlet checkbox. Click Next.
- Leave the J2ME Wireless Toolkit as the selected Target Platform. Click
Next.
- 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
- 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.
- Enter
splashscreenexample
in the Package Name field. Click
Finish.
- 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.
- Enter
MySplashScreenMidlet
into MIDlet Name and MIDP Class
Name fields. Click Finish.
Adding Components to MySplashScreenMidlet
- 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:
- 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.
- Select the form1 component to and change its Title property to
Form
.
- Double-click the form1 component in the Flow Designer Window to switch
to the Screen Designer
- Select the StringItem component from the Form Items section of the Palette,
then drag and drop it into form1.
- 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
- Choose Flow Design at the top of the Visual Mobile Designer window to
re-open the Flow Design window.
- Select the splashScreen1 component.
- 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
-
Choose the Exit Command from the Commands section in the Palette, and
drag it into the form1 component.
Adding an Image Resource
-
Download and copy the splash.png file
to the
$PROJECTHOME/src/splashscreenexample
folder.
- Right-click the Resources in the Inspector Window and choose Add >
Image.
-
Choose Add option from popup menu and then Image.
- Select image1 in the Inspector Window.
- In the Properties Window, choose the Resource Path and then choose splash.png.
Binding an Image to a Component
- Select the splashScreen1[SplashScreen] component.
- 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.

Connecting Components
-
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
-
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:
- Choose View > Documentation Indices > NetBeans MIDP Components.
- Click
org.NetBeans.microedition.lcdui
and then SplashScreen
.
Next Steps