FX

The JavaFX application environment is a new technology that offers developers an opportunity to gain experience using JavaFX Script software. This series of articles supplements existing documentation and provides technical tips to ease your application development.

Follow these steps to prepare your JavaFX application to run on a mobile device:

1. Check that your code runs on a mobile device.
   
   • Check for the code outside of the common profile. In particular, javafx.ext.swing and javafx.scene.effects are not in the common profile.
   • Check for a call to direct Java APIs and Java code. The call should not work on mobile, which is CLDC based (roughly Java 1.3).
   
   
2. Ensure that your application works properly in different screen sizes and with orientation changes.

Most mobile devices are in the range of 200x140 to 480x300, and the dimensions can change at runtime if the user rotates the screen (on devices that support dimension changes). This means all graphics that require a particular screen size should be bound to the stage's width and height.

Consider an example that renders an image centered on the screen regardless of the screen size.

The background is a solid color set on the Scene, which is automatically resized properly, so it always fills the background of the device. The key is to create two variables, width and height, that are bound to the scene.

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;


var image = Image {
    url: "{__DIR__}picture.png"}
var width:Number = bind scene.width;
var height:Number = bind scene.height on replace {
    // do some stuff on orientation change
}
var scene:Scene = Scene {
    width: 100
    height: 100
    content: ImageView {
        translateX: bind (width - image.width) / 2
        translateY: bind (height - image.height) / 2
        image: image
        
    }
       
    fill: Color.DARKSLATEGREY
};

Stage {
    title: "Application title"
    scene: bind scene
    width: 300
    height: 320
}

Press the Launch button to run the sample by using Java Web Start software. Once the sample launches, resize the window and note that the image remains in the center of the window regardless of the window size.

Useful Tips

• Use vector art instead of bitmaps, because it makes resizing easier.
• Use UI controls that reside in the javafx.scene.control package. These controls are built using nodes in the scene graph, so they are able to be portable across profiles.
• Use the Scene for your background, as it is automatically sized correctly.
• Do not use JavaFX APIs for effects (they are desktop only). Instead, pre-render effects as bitmaps in Adobe Photoshop, for example, such as drop shadows on objects that do not change.
• Test your sample on the JavaFX Mobile Emulator, which is included in the JavaFX 1.2 SDK.
• Rotate the emulator by using the Rotate menu item.
• Simulate additional platform features, such as accelerometer or tilt-sensor support, by using the emulator menus.

Working Without the Emulator

While you do need to test how your application runs under the emulator, you can actually perform many tasks without it. For example, you do not need the mobile emulator to test screen sizes. Instead, follow the previous code and make the stage resizable. Then you can resize the stage window to simulate different mobile screen sizes and an orientation change.

You can use both number keys and soft keys to simulate keyboard events in your application, as both keys will work on mobile and desktop devices.

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.