Enhance Your MIDlet With JavaFX Technology

Many developers who code for the Java ME platform are eager to enhance their MIDlets with JavaFX technology to take advantage of its modern features and enrich the user experience of their applications. Moving your MIDlet into JavaFX software can enable you to create richer and more interactive user interfaces and can make it dramatically easier to bring your content to the desktop, browser or TV, in addition to running across mobile devices.

With JavaFX programming you can benefit from a modern declarative scripting language that makes it quick and easy to create UI layouts for your applications. Adding features such as animations and transitions to your new UI is also easy with JavaFX programming.

Mobile Phone Address Book Example

Take the example of a MIDlet that is a mobile phone's address book. The user interface for such a MIDlet would often be implemented as a list with relatively simple scrolling and transitions.

Figure 1: Address Book Contacts in a MIDlet

With JavaFX you can very easily tap into your creativity to build much more interactive user interfaces that include features such as scaling and rotating. You can easily apply motion effects to individual components on the layout to make a more entertaining user experience. In addition, it is easier to include graphical components to jazz up the UI by leveraging the JavaFX Production Suite.

Click a face to spin the address book list implemented as a carousel in JavaFX code.

Java needed. Click for details.

How to Enhance Your MIDlet

Upgrading your MIDlet to leverage JavaFX technology is quite simple. You can reuse anything headless (nongraphical) from your MIDP and Java ME applications because JavaFX programming allows you to call any Java class that is present on the handset including web services, communication, and data processing types of functionality.

1. Make sure your MIDlet code follows the MVC design pattern.
   
   If you have designed your MIDlet using the traditional Model/View/Controller (MVC) design pattern that separates your code into data, user interface, and data processing, enhancing your MIDlet with JavaFX code is straightforward.
   
   
2. Create your Main.fx file in the JavaFX programming language.
   
   For information about starting your first JavaFX application, see Getting Started With JavaFX Technology.
   
   
3. In Main.fx, create your UI in the JavaFX programming language using Stage and its Scene, with UI content on the Scene.
   
   Compile as you go. For more information about Stage and its use in JavaFX programming, see Building GUI Applications With JavaFX.
   
   
4. Bind your new UI to your MIDlet's original Controller event code.
   
   Compile. For more information about binding, see Learning the JavaFX Script Programming Language.

Using the Model, View and Controller Design

The MVC design pattern will be familiar to Java ME and Swing programmers. The MVC design pattern separates programs into three, discrete sections of code:

• Model code consists of the program's data and any logic it uses.
• View code consists of the user interface code.
• Controller code is the program's main data processing section where events are fired and communications between the Model and View are coordinated.

In the Address Book example, the MVC design pattern would store the names and phone numbers in the Model code. The user interface, with its list of names, would be handled by the View code. When the user activates the application, the Controller code would process the event, gather the name and numbers from the Model code, and display it by using the View code. This example would probably use PIM APIs from JSR 75. Code for Java ME JSRs can be reused in the JavaFX version of the MIDlet.

You can reuse the Model and Controller code from your MIDlet in JavaFX programming. You need only to change the View code into JavaFX code. To reuse your MIDlet code, you can create a main file for your JavaFX application, create your JavaFX UI, and then connect it to your existing MIDlet's Controller.

For instance, you can use the JavaFX mouse and key events OnMouse* and OnKey* to call into the MIDlet's Controller code. The MIDlet's Controller code can trigger JavaFX code to change the JavaFX UI according to the logic of the Controller code, such as adding UI representation of the data from the contact list. To see how to use the Observer Design Pattern in JavaFX to have the JavaFX View code be triggered by the Controller (Java) code, see the JavaFX forum. Your MIDlet's lcdui button event, for instance, will now be executing the same code it always did, but the result in the JavaFX UI will look very different.

Figure 2: Reusing Model and Controller Code From Your MIDlet

UI Built on Stage, Scene and Content

The new concept for JavaFX user interfaces is that all visible objects are displayed on a Stage, which is the container holding all the UI elements in your application. Using the javafx.stage.Stage package, you create this top-level container to display your UI. Stage objects are roughly equivalent to Display objects in the Java ME application environment. Onto the Stage, you place a Scene by using the javafx.scene package. You can think of a JavaFX Scene as the drawing surface on which you place your UI elements.

In JavaFX programming, you do not have a set of fixed, static graphics objects, such as checkboxes, sitting in a library. Instead, you or your graphic designer can create your content by making graphical elements in Adobe Illustrator or Adobe Photoshop and bring them into the JavaFX environment by using the Production Suite. For example, your graphic designer might start with mapping out the button images he or she would like to see. Then a background could be designed, either an image or a solid color. The JavaFX community has many interesting samples you can reuse. You might want to look at a sample such as Effects Playground for Mobile.

Figure 3: UI Hierarchy in JavaFX

For example, if you had a MIDlet that displayed a list of contacts in a user's address book, you could keep and reuse the Java ME source code from your JavaFX application, except for the UI code. In your MIDlet code, the Display class is in the package lcdui and represents the manager of the display and the input devices of the system. You need to replace that code with JavaFX Stage code. The MIDlet's code might appear something like the following:

import javax.microedition.lcdui.*;
import javax.microedition.midlet.*;

public class AddressBook extends MIDlet
implements CommandListener {
   // display manager
   Display display;
 ...
 }

// constructor.
   public AddressBook() {
   }

   /**
    * Start the MIDlet by creating a list of
    * items and then associating the
    * exit command with it.
    */
   public void startApp() throws
   MIDletStateChangeException {
     display = Display.getDisplay(this);
 ...
 }
...
}  

You would then, in your MIDlet, have a Form on which you would place your UI elements, such as labels, buttons, and checkboxes.

However, in your new JavaFX script, you would use Stage and then add a Scene. The classes of UI elements you can add to your Scene and how the elements are rendered constitute the JavaFX hierarchical Scene Graph API based on javafx.scene. The UI elements on a Scene are Nodes, forming the "leaves" on the hierarchy "tree" Stage/Scene/Nodes.

In Scene's content block of code in the following example, you would add the UI elements from your graphic designer. You could, for example, add types of content such as ImageViews, TextBoxes, MediaPlayers and your own custom Nodes.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
...

Stage {
scene: Scene {
       content: [
           Text {
               font: Font {
                   size: 16
               }
               x: 10
               y: 20
               content:
  //Spinning Faces Example
  //Can be ImageViews, TextBoxes, MediaPlayer, your own Custom Nodes... 
  ...
  }
 }
  ...
  }
...
}

To learn more about programming JavaFX code, refer to the Media Browser Tutorial Specifically, Module 5 describes how to change the desktop Media Browser sample to run on a mobile device.