当前页面: 开发资料首页 → Netbeans 专题 → Exploring the NetBeans Visual Mobile Designer

Exploring the NetBeans Visual Mobile Designer

摘要: Developers new to Mobile Information Device Profile (MIDP) programming are often surprised to discover how much hand-coding they are required to do. Tools like the J2ME Wireless Toolkit - available both as a standalone tool or integrated into the NetBeans platform via the NetBeans Mobility Pack - make building and packaging MIDP applications simple, but they don't provide much help with application logic or user interface creation. That's why the Visual Mobile Designer, a new feature of NetBeans 4.1, is so exciting - it greatly simplifies the coding of MIDP applications, especially their user interfaces.

Getting Ready

In this article I'll assume that you're comfortable with general Java programming but have had only minimal experience with MIDP application development. If you're new to MIDP programming, you'll need to spend some time exploring the Mobility section of Sun's developer site. The Getting Started with MIDP learning path is a great place to start that exploration.

Before continuing, please download and install NetBeans IDE 4.1, which is available from the NetBeans 4.1 Releases & Planning page. (You'll also need to install JDK 5.0 before installing the NetBeans IDE.) After installing the IDE, download and install the NetBeans 4.1 Mobility Pack from the same page. The base NetBeans IDE does not support the creation of MIDP applications - the Mobility Pack adds those features. The Visual Mobile Designer (VMD) is included with the Mobility Pack, as is the J2ME Wireless Toolkit, so after installing the Mobility Pack you'll have a complete system for building MIDP applications.

Creating the Project

The first step is to create a project, say a simple paddle game like the classic Pong game. After starting the NetBeans IDE, select New Project... from the File menu. On the first page of the New Project wizard, select the Mobile Application project type from the Mobile category and press the Next button. (See Figure 1.) Name the project Pong, set an appropriate location for it (my example stores it in c:\projects) and press Finish after making sure that Set as Main Project and Create Hello MIDlet are both checked. (See Figure 2.)

Figure 1: Creating a new mobile application.

Figure 2: Setting the project name.

The IDE creates a new MIDP 2.0 project that can be immediately compiled and run, but we won't do that just yet. Focusing our attention on the Projects tab in the top left pane of the IDE window, notice that so far our project consists of the HelloMIDlet class in the hello package. We need to change the class and package names to reflect our project name. Right-click on the package name and select Rename... from the Refactor menu. (See Figure 3.) Change the package name to pong. Then do the same thing with the class, renaming it to PongMIDlet.

Please note that if the Preview All Changes checkbox is checked, you will have to confirm the change in a dialog before it takes effect.

Figure 3: Changing the package name.

We're almost ready to run the application. From the File menu, select "Pong" Properties to display the project property dialog. In the category tree on the left, select the MIDlets item under the Application Descriptor node. Change the name of the MIDlet from HelloMIDlet to Pong. (See Figure 4.) The class and package names have already been changed - we're just changing the descriptive label the user sees.

Figure 4: Changing the MIDlet name.

Now go to the Run menu and select Run Main Project. This builds the application and launches the emulator to run it. The application doesn't really do anything at this stage.

The Flow Designer

Now let's step back and take a closer look at the different parts of the IDE. In the middle of the IDE window you'll see a PongMIDlet tab. The Flow Design button is highlighted. This is the Flow Designer, one of the key parts of the Visual Mobile Designer. (See Figure 5.)

Figure 5: The Flow Designer.

The Flow Designer is a graphical, high-level representation of the application's flow - the relationships between the different screens in the MIDlet, including the state transitions that start and stop the MIDlet. The NetBeans IDE generates most of the code for you, so it's a very simple and convenient way to develop the application's user interface.

Let's start by adding a simple splash screen to our MIDlet. A splash screen shows information about the application whenever the application starts. For our simple game, we'll use a standard MIDP alert as our splash screen. (An alert isn't really the best choice for a splash screen, but it's a good way to demonstrate the Flow Designer.) Drag the Alert item from the component palette to the left of the Flow Designer onto a blank area of the designer to add a new alert to the application. Using the properties sheet to the right of the designer, set the title, string and timeout properties appropriately so that the alert displays its message for two or three seconds before being dismissed. In particular, rename the instance name to splashAlert. (See Figure 6.)

Figure 6: Adding an alert to the application.

Now it's time to connect the alert into the application flow. Right click on the Mobile Device icon in the designer and select the Properties item from the menu to open the MIDlet's design properties. (See Figure 7.) On the resulting property dialog, press the button labeled '...' in the Start Point Action property to open the custom editor for the property. (See Figure 8.) In the custom editor, change the Target screen to splashAlert and the Alert Forward screen to helloForm and press OK. (See Figure 9.) After closing the property dialog, you'll see that the alert has been inserted into the flow, to be displayed immediately upon startup, with the original form displayed upon the alert's dismissal. (See Figure 10.) Run the project to verify.

Figure 7: Accessing the MIDlet's design properties.

Figure 8: Opening a custom editor.

Figure 9: Changing the MIDlet's initial target screen.

Figure 10: The alert inserted into the application flow.

Under the Covers

The Flow Designer manages screens and the commands associated with those screens, with the lines representing transitions from one screen to another in response to a command. Under the covers, of course, the Flow Designer is inserting code into the MIDlet source to do all of this. You can see the generated code by pressing the Source button to switch to the source view. By default, the generated code is hidden in a code fold labeled "This section is auto-generated by NetBeans IDE". Expand the code by clicking the icon immediately to the left of the fold.

Lazy initialization is used by default, so you'll see methods like this in the generated code:

private javax.microedition.lcdui.Command get_exitCommand() {
    if (exitCommand == null) {
        exitCommand = new
             javax.microedition.lcdui.Command("Exit",
                javax.microedition.lcdui.Command.EXIT, 1);
    }
    return exitCommand;
}

In other words, a screen or command is not constructed until the first time it's needed. You can force construction to occur immediately upon MIDlet initialization by unchecking the Lazily Initialized code property in the object's properties sheet.

Never edit the generated code directly. Every screen and command has two special properties, Pre-Init User Code and Post-Init User Code, that can be used to insert your own code directly into the generated code.

The Screen Designer

Use the Screen Designer to edit the screens in your application. There are two ways to switch to the Screen Designer. The easiest is from the Flow Designer, by double-clicking the screen you want to edit. Or, you can press the Screen Design button next to the Flow Design button and select the desired screen from the Edited Screen drop-down list. (See Figure 11.)

Figure 11. Selecting the screen to edit.

The Screen Designer works like most other visual user interface editors. You create a user interface by dragging components from the component palette onto the screen being edited. Try it with the helloForm screen, an instance of a Form. Any of the components from the Form Items part of the component palette can be dragged onto a form. Drag a ChoiceGroup onto the form, for example, and then click it with the mouse to set its label. Then drag a Choice Element from the palette onto the new choice group - this lets you create choice group elements at design time instead of having to code it all at run time. After adding a second choice element, move the mouse slowly over the components you just added - the screen designer shows you which component will be edited when you click the mouse. (If components are too close together for easy editing, you can always select the desired component from the inspector immediately above the properties sheet.)

The screen designer can also be used with non-visual components. To add a command to a screen, for example, just drag the appropriate command type from the palette onto the screen. The helloForm screen already has an exit command, so drag an Ok Command onto the screen. The screen itself doesn't change, but a new command shows up in the Assigned Commands column to the right of the screen. (See Figure 12.) Click the Edit link in the new command to open its action editor. From here you can control what action happens - which screen to switch to, for example - when the command is selected.

Figure 12. Adding a new command.

Other non-visual components are available. For example, you can create image instances that automatically load an image from the MIDlet's JAR file on startup. First, using the filesystem, copy an image file - in PNG format - to your project's src directory. Then go back to NetBeans and drag an Image component (under the Resources section of the palette) to the screen designer, but not on the screen itself. You'll see a new image instance show up in the inspector. Right-click on it and to bring up its properties dialog and invoke the custom editor for the

Resource Path property. The resource path editor finds all the images in your project and lets you preview each one in order to select the correct image. (See Figure 13.) Once created, you can easily assign an image to an ImageItem form component to display the image on the form at run time. Images can also be used as MIDlet icons by setting them in the project properties.

Figure 13. Selecting an image.

As with screens and commands, every component other than Choice Element and List Element (which aren't really components themselves, but component initializers) has Pre-Init User Code and Post-Init User Code properties that let you insert your own code to modify the component initialization.

Thread Support

Recognizing that most beginning MIDP programmers mistakenly perform blocking operations on the system event thread (see the J2ME Tech Tip Understanding MIDP System Threads for more details), the Visual Mobile Designer can invoke those commands on a separate thread, thereby ensuring that the application's user interface doesn't block. You do this from the Flow Designer by selecting the property dialog for the Mobile Device pseudo-screen. Enable the Generate Threaded Command Listeners checkbox and NetBeans will create a thread on application startup that waits for commands to be invoked. Selecting a command will wake up this thread and cause it to process the command's actions. Very simple, but very useful.

Note: You'll still want to perform really long operations (like HTTP calls) on your own thread. Only one thread is created to handle events, so even if the application won't actually block when a command is invoked, there will be a time delay before the actions are run if the previous action is still in execution.

Conclusion

The Visual Mobile Designer is a great addition to the NetBeans Mobility Pack that even experienced developers will find useful for quickly creating and testing application user interfaces. It has its limits, of course. For example, the VMD doesn't handle canvases, which are used extensively in gaming applications. But it's a great way to start applications, and the ability to use threaded command listeners is an added bonus.

Author Biography

Eric Giguere is a software developer who wrote the first book about Java 2 Micro Edition as well as numerous articles on wireless and handheld programming, though his latest book, Make Easy Money with Google, really has nothing to do with J2ME. For more information about Eric, visit his website at http://www.ericgiguere.com/. You can contact him via email at