This recipe will show how the interaction between Flow and Screen view works and how to easily build an application from ground up.
Our application will consist of a splash screen, PIM browser, and login screen.
On top of that, all of the main commands and screen interaction will also be developed. We will mainly concentrate on the Flow view, Screen view, and Analyzer.
We will first need some image for us to show as a loading screen.
For this example we will use the Packt Publishing logo from the company web page.
Visit the page, make a screenshot out of it and save it in PNG file format with dimensions appropriate to a mobile platform. For our example we will use 127 x 68 pixels.
- Create a new project, this can be achieved by either clicking File and then New Project or pressing Ctrl+Shift+N.
- On the New Project window, on categories side choose Java ME and on the Projects side select Mobile Application, then click Next.
- Under Name and Location : Name the project as
MyVisualMobileApp, leave the other options with their default values, and click Next. - Under Default Platform Selection: On Emulator Platform select Java(TM) Platform Micro Edition SDK 3.0.
- Under Device select
DefaultCldcPhone1and click Finish.
On the Palette window, navigate to the Displayables subgroup and drag-and-drop the following components to the Flow View:
- Splash Screen
- Login Screen
- Pim Browser
All the components are shown in the following screenshot:
Now let's add flow and commands to the displayables. Drag the arrow that begins in the Mobile Device's Started field and ends in the form to the Splash Screen instead.
Then connect the following components:
- Connect Splash Screen to the Login Screen.
- Connect Login Screen to the PIM Browser
To connect the screens click on the component and drag the pointer to the end component.
With the Pim Browser we will do something a bit different. We will add an exit command that will point to the Resumed state of the Mobile Device component. Right-click on the pimBrowser instance in the Flow View and select New/Add and then Exit Command. Then connect the newly-added exitCommand1 to the Resumed state of the Mobile Device.
The flow is shown in the following screenshot:
After connecting the components we will need to modify their properties. On the Flow View click on the Splash Screen and navigate to the Properties window:
- On the Text property type Loading.
- Under Image Properties click on the button to load the Image Selector window.
- When the window pops up click on the Add button and Image Path will be available.
- Now select an image of your choice by clicking on browse....
- Click OK to return to the Properties window and save the file.
NetBeans creates all the code based on our placing and linking of components. Clicking on the Source view makes it possible to check all the generated code.
All of the screen changes between Splash Screen, PIM Browser, and even exiting the MIDlet are available under the commandAction method in our file HelloMIDlet.java.
NetBeans also creates and instantiates the image file and attaches that to the splash screen together with the loading text:
splashScreen.setImage(getImage1());
splashScreen.setText("Loading");
And here is how we initialize the image:
public Image getImage1() {
if (image1 == null) {
// write pre-init user code here
try {
image1 = Image.createImage("/packt.png");
} catch (java.io.IOException e) {
e.printStackTrace();
}
// write post-init user code here
}
return image1;
}
Run the project to get an idea of how the mobile application works.
Let's see how to better organize the components in our MIDlets.
The first button makes NetBeans re-organize the layout of the placed components. It is very useful after a lot of functionality has been added.
The Overview, the one with the magnifier, lets the developer take a broad view of all of the components, making navigation a lot easier if they become larger than one screen.
The last two buttons will collapse or expand the component boxes, hiding the command details.