JavaFX technology provides the opportunity to turn your mobile application into a rich Internet application (RIA). Using the UI components provided by the Java ME class library, it is easy to create a simple UI for your application. To go beyond the components provided requires more effort. Using the elements provided by the JavaFX common APIs, it is easy to give your mobile applications a richer, more interesting interface.

This tip describes how to turn Figure 1 into Figure 2.

Figure 1: Standard Radio Buttons

Figure 2: Enhanced Radio Buttons

About the UI and Graphics

The user interface (UI) provided by a JavaFX application is built with graphic elements created by using the common APIs or with images designed with a graphics application. The use of graphics enables you to do interesting and exciting things with your UI. Backgrounds can be vibrant and alive. Buttons can be any shape you can imagine and can even be animated images that react to being selected. The overall user experience can be made more intuitive. Using JavaFX technology for the UI of your mobile application (the View part of the Model-View-Controller architecture) makes it easier to create a UI that grabs a user's attention.

The graphics for the application described in this tip were created with a graphics application. An application such as Adobe Photoshop or Adobe Illustrator can help you design the elements for your UI and plan the layout of your screens. The widgets that you create can be simple or elegant, depending on the look you want for your application and the experience you want to provide your user.

This tech tip focuses on creating a fun, visual interface for choosing an item from a group. Suppose that your application needs to check for the type of pet a user has. The easiest way to do this in a MIDlet is to use existing classes to present a set of radio buttons as shown in Figure 1. The following code creates these radio buttons.

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

public class ChoicesRB extends MIDlet   
implements CommandListener {
      // display manager      
      Display display;      

      
      // list of choices      
      List choose;
	  
      // constructor.      
      public ChoicesRB() {
      }
        

      public void startApp()
      {
        display = Display.getDisplay(this);   
        testList();
      }

      .
      .
      .

      /**
       * Test the List component.
       */
      public void testList() {
          choose = new List("What type of pet do you have?",
          Choice.EXCLUSIVE);
          choose.addCommand(backCommand);
          choose.setCommandListener(this);
          choose.append("Cat", null);
          choose.append("Dog", null);
          choose.append("Fish", null);
          choose.append("Bird", null);
          display.setCurrent(choose);
      }    

      .
      .
      .
}	  

About RIA Buttons

To enhance the user experience by using JavaFX technology, start by creating the images for the buttons users will use to identify their pet. For the background, you can create an image or use the special effects provided by the JavaFX programming language, depending on whether the size of the application or the time it takes to load is more critical.

For the application described in this tip, the background gradient is created in the code, so no background image is needed. You just need images that show both the selected and unselected state for each pet. For example, the following table shows the images used for the selected and unselected bird.

Unselected Bird	Selected Bird

Before You Begin Coding

When the UI is designed and the images are complete, you are ready to write code. Briefly, the Scene object (javafx.scene.Scene) is the container for your UI elements. The UI elements are added to the Scene as Node (javafx.scene.Node) objects or subclasses of Node such as ImageView (javafx.scene.image.ImageView) objects. Graphics are loaded with the Image (javafx.scene.image.Image) object.

For additional information:

• See Enhance Your MIDlet With JavaFX Technology for an overview of how to recode an existing MIDlet to take advantage of JavaFX technology.
  
  
• See the tutorial Building GUI Applications With JavaFX for more information about building user interfaces.

Creating the RIA Buttons

1. Starting with the creation of the buttons, use the following code to load the selected and unselected images of the cat.

var    emptyImage1: Image = Image {
    url: "{__DIR__}pet_cat_unselected_60x64.png"
}
var    filledImage1: Image = Image {
    url: "{__DIR__}pet_cat_selected_60x64.png"
}

2. Repeat the above code for each of the pets.
   
   
3. Position the buttons by using ImageView objects.
   
   The following code shows the positioning of the first button.

var radioImage1 = ImageView {
    translateX: 20
    translateY: 67
    image: bind currImage1;
    visible: true;

4. Repeat the above code with the appropriate X and Y coordinates for each of the remaining buttons.
   
   
5. Use the following code to respond to the selection of the cat, which is the first button.
   
   When a button is pressed, it becomes selected and the other buttons become unselected. For devices without a touch screen, add code to process OnKeyPressed events similar to the code for OnMousePressed.

onMousePressed: function(e:MouseEvent) {
    // Clear other radioBoxes, fill in this one
    currImage1 = filledImage1;
    currImage2 = emptyImage2;
    currImage3 = emptyImage3;
    currImage4 = emptyImage4;
}

6. Repeat the above code for the other buttons.
   
   
7. With the JavaFX programming language, some interesting effects can be created with code. Use the following code to create the gradient background used in this application.

scene: Scene {
    fill: LinearGradient {
        startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
        proportional: true
        stops: [ Stop { offset: 0.0 color: Color.rgb(5, 133, 187) },
                 Stop { offset: 1.0 color: Color.rgb(170, 206, 223) } ]
    }
  .
  .
  .
 }

Because only the common APIs were used for this application, it runs on both the desktop and a mobile device. Try out the new interface:

You can find the complete code at Main.fx.