FX

With the 1.2 release, standard UI controls are part of the JavaFX common APIs, which makes them available to developers of mobile applications. This tip provides an overview of the controls from a mobile viewpoint and describes how the RadioButton class can be used to enhance the interface of your application.

Overview of the Controls

The UI controls that are available include radio buttons, checkboxes, slider controls, scrollbars, and other standard UI widgets. These controls can be used in any combination to build the interface for your rich Internet application (RIA). Because the controls are part of the common APIs, the UI that you create runs on any system or device with the JavaFX runtime environment. This tip, however, focuses on applications for mobile devices.

Some points to keep in mind while creating the UI for your mobile application include:

• The UI controls in the JavaFX 1.2 release require touch traversal on mobile devices.  Full focus traversal is likely to be supported in a future release.
• Visual effects provided by the javafx.scene.effect package, such as reflection, shadows, and lighting, are not currently available for mobile applications. If desired, you can use a graphic design tool to add these effects and use the generated image as the button label.

For general information and a complete list of the controls available, see Powerful UI Capabilities With Node-Based Controls.

Using the RadioButton Class

While the RadioButton class does not yet provide the same level of customization described in From MIDP to RIA: Enhancing Radio Buttons, it does provide an easy way to create visually interesting radio buttons as shown in the following sample application.

The radio buttons in the example were created with the RadioButton class and customized by changing the base color and by using an image as the label. A diagonal linear gradient was used to create a complementary background.

Defining the Images

Four images are defined, one for each button. If height and width variables are not set, the image is shown at its normal size. If height and width variables are set, the image is scaled to fit within the dimensions specified. The following code shows the image definitions.

    var    img01: Image = Image {
        url: "{__DIR__}image/cat.png"
    }
    var    img02: Image = Image {
        url: "{__DIR__}image/dog.png"
    }
    var    img03: Image = Image {
        url: "{__DIR__}image/bird.png"
    }
    var    img04: Image = Image {
        url: "{__DIR__}image/fish.png"
    }

Creating the Buttons

Four radio buttons are created for the example and added to a toggle group. Because images are used for the labels, the size of the radio button is the size set for the image. If desired, a text string can also appear after the graphic by setting a value for the text variable. The following code shows how to set up the group of radio buttons.

    var tg = ToggleGroup { };


    var rb01 = RadioButton { text: "", toggleGroup: tg, layoutY: 50, selected: true,
            graphic: ImageView { image: img01 } }
    var rb02 = RadioButton { text: "", toggleGroup: tg, layoutY: 90,
            graphic: ImageView { image: img02 } }
    var rb03 = RadioButton { text: "", toggleGroup: tg, layoutY: 130,
            graphic: ImageView { image: img03 } }
    var rb04 = RadioButton { text: "", toggleGroup: tg, layoutY: 170,
            graphic: ImageView { image: img04 } }

Changing the Color

Changing the base color affects all elements of the button. The color of the button, its shading, and its selection indicator are all adjusted automatically. To change the base color, cast the radio button skin to the Colorable object and set the base variable. (Note that the Colorable class is part of the com.sun.* APIs, which are likely to change in future releases. This class is used as an interim solution for providing radio buttons with color.)

The following code shows how to set the base color of the first radio button. Repeat the code for the other three buttons.

    var rb01Colorable : com.sun.javafx.scene.control.caspian.Colorable =
        rb01.skin as com.sun.javafx.scene.control.caspian.Colorable;
    rb01Colorable.base = Color.GREEN;

Creating the Background

To create something more interesting than a flat background, you can use an image or a color gradient. Be aware that when using a color gradient, runtime processing takes longer than when a pre-rendered background image is used.

In this example, a linear gradient is used. The gradient is applied diagonally by specifying 0,0 as the starting coordinates and 1,1 as the ending coordinates. The following code shows how to create the background.

    scene: Scene {
    fill: LinearGradient {
        startX: 0.0, startY: 0.0, endX: 1.0, endY: 1.0
        proportional: true
        stops: [ Stop { offset: 0.0 color: Color.rgb(0, 102, 0) },
                 Stop { offset: 1.0 color: Color.rgb(0, 0, 0) } ]
    }

You can find the complete code at Main.fx.

We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.