Using JavaFX Mobile to Combat Device UI Fragmentation

ith the recent release of the JavaFX Software Developer Kit 1.1, Sun also released the long awaited JavaFX Mobile platform. Through a Java-like scripting language (JavaFX Script) and a single API, JavaFX provides a development tool that supports a variety of platforms, from desktops to mobile devices.

This article provides a beginner’s guide to JavaFX Mobile development, but because all JavaFX development relies on the same SDK and tooling, it could just as easily be about JavaFX in general. Rather than offering a separate JavaFX Mobile SDK, the JavaFX SDK 1.1 and its development tools provide mobile emulation for developing JavaFX Mobile applications. Joshua Marinacci from Sun’s Java Swing team put it best in a recent blog posting: “There is no JavaFX Mobile. There is only JavaFX.”

Java’s ubiquity on mobile devices has made the “write once, run anywhere” (WORA) premise difficult to abide by given the thousands of mobile device screens. With JavaFX Mobile, the Java community has a tool to possibly combat this device UI fragmentation.

JavaFX’s Syntax and Synergy with Java

JavaFX is a product framework comprised of JavaFX Script and JavaFX Mobile. JavaFX Script (JavaFX for short) is a scripting language meant to provide rich user interfaces and as its name implies, JavaFX Mobile is JavaFX for mobile platforms.

JavaFX Script uses a declarative syntax that resembles JavaScript and Scalar Vector Graphics (SVG). For example, here is the JavaFX code (minus imports) for creating a little “hello world” type of window as shown in Figure 1, Figure 2, and Figure 3.

Stage { title: "Cool Running" width: 250 height: 80 scene: Scene { content: Text { font: Font { size: 20 } x: 10, y: 30 fill: Color.GREEN content: "JavaFX is cool" } }}

As you can see, JavaFX has some resemblance to Java and/or JavaScript, but it is neither.


Figure 1. A Simple JavaFX UI Window Running on a Desktop: This simple JavaFX UI window is running on a desktop.
 
Figure 2. A Simple JavaFX UI Window Running in a Browser: This simple JavaFX UI window is running in a browser.
 
Figure 3. A Simple JavaFX UI Window Running in a Mobile Phone Emulator: This simple JavaFX UI window is running in a mobile phone emulator.

JavaFX’s declarative style is more apparent when contrasted with the imperative programming style of Java Swing. The following Swing code creates the same “hello world” window as the previous JavaFX example (again minus imports):

public class Main { public static void main(String[] args) { JFrame aFrame = new JFrame("Cool Running"); aFrame.setSize(250, 80); JPanel content = new JPanel(); content.setLayout(new BorderLayout(5, 5)); content.setBackground(Color.WHITE); JLabel aLabel = new JLabel("Swing is cool"); aLabel.setFont(new Font(null, Font.PLAIN, 20)); aLabel.setForeground(Color.GREEN); content.add(aLabel, BorderLayout.CENTER); aFrame.setContentPane(content); aFrame.setVisible(true); aFrame.  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }}

Notice the imperative nature (i.e., statement by statement, control flow) of Swing, which has been used for traditional Java UI development. Figure 4 shows the result of the Java Swing code.

Figure 4. Swing Versus JavaFX: This is the same “Hello World” window created from Swing code versus JavaFX code.

As previously stated, JavaFX is neither Java nor JavaScript, but JavaFX scripts can call Java classes or be called on by Java classes. For example, in the following JavaFX script for determining the size of a window, the Stage object’s size has been rewritten to use the standard Java Math class:

var i = 250;var j = 300;Stage { title: "Cool Running" width: java.lang.Math.max(i, j) height: 80 scene: Scene { ...

Sun has touted JavaFX’s ability to leverage existing Java code as one of its advantages over other RIA technologies such as Adobe Flex. Also, while JavaFX Script provides a platform for building any application, its purpose as defined by Sun is for use in UI development and not for business or backend components.

JavaFX Mobile Architecture

Figure 5. The JavaFX Mobile Application Architecture: The JavaFX API requires the JavaFX runtime environment and a JVM (in this case, presumably a Java ME JVM).

JavaFX applications rely on a JavaFX runtime that runs on top of a Java Virtual Machine (JVM). In the case of mobile applications, JavaFX runs on a Java ME JVM (see Figure 5 and Figure 6).

The current JavaFX API is divided into two categories of API elements: common and desktop. These categories are called profiles, and the elements they contain support various UI needs and platform capabilities specific to their profile. The common profile provides classes that are supported on both desktop and mobile devices. In other words, it provides the lowest common denominator UI for all platforms running on a JVM – be it a Java ME or Java SE JVM. The desktop profile provides more sophisticated capability in support of larger and more feature-rich platforms.

To create applications that will port across all form factors, developers should keep to the common profile. Developers who plan to deploy to a desktop platform or to a common desktop browser can opt to enhance their applications with the API offered in the desktop profile.

Figure 6. The General JavaFX Application Architecture: The JavaFX API requires the JavaFX runtime environment and a JVM.

Device Support and Application Provisioning

So which devices support JavaFX Mobile and how do you get your applications deployed to these devices? No products on the market currently ship with JavaFX. However, in their launch of JavaFX Mobile, Sun claimed a number of device manufacturers (including LG, Sprint, and Sony Ericcson) that had committed to offering JavaFX-enabled products in the near future.

While details on the specific JavaFX devices are sketchy at this time, Sun has made it clear that JavaFX is not meant for all mobile devices. Just because a device supports Java ME’s MIDP/CLDC does not mean that it ultimately will support JavaFX. JavaFX is targeted for devices that comply with the Mobile Service Architecture (MSA) platform specification (JSR 248), which means that in addition to MIDP/CLDC JavaFX devices must support APIs that are characteristic of smart phones. These include personal information management (PIM), wireless messaging, 3D graphics, and mobile media.

As for how JavaFX applications will get deployed to the devices, essentially there are two options. Both are common to Java ME developers:

  1. Embed it to the device.
  2. Send it “over-the-air” to the device.
Figure 7. The JavaFX SDK Installation Folder: Installing the JavaFX 1.1 SDK on a Windows box results in a bin, docs, emulator, lib, profiles, samples and servicetag set of folders.

Because JavaFX runs on top of Java ME on MSA-endowed mobile devices, organizations should be able to take advantage of existing Java ME infrastructure and deployment mechanisms.

Building a JavaFX Mobile Application

Now that you know what JavaFX Mobile is, how do you build a JavaFX Mobile application? This section provides a beginner’s guide to JavaFX Mobile development. It explains how to get the required technology, how to get an environment set up, and how to develop and run the Hello World application shown previously. A complete guide to JavaFX scripting is beyond that scope of this article, but refer to the Related Resources in the left column for some JavaFX tutorials and guides.

JavaFX applications officially can be built on Windows and Mac OS platforms. Sun is not providing a Linux offering yet, but developers have found a way to develop JavaFX 1.1 applications on Linux with a NetBeans 6.5 Plugin. Most importantly to this discussion, the JavaFX Mobile runtime and emulator are provided only for the Windows platform at this time.

Details about system requirements for both Windows and Mac OS are covered at the JavaFX.com site. You must have a relatively recent JDK (version 6 update 7 is at least required for Windows and version 5 update 13 is at least required for Mac OS).

Beyond the basic Java environment, you will need the JavaFX 1.1 SDK (available along with installation instructions at JavaFX.com). The downloaded install application is roughly 42MB for the Windows version and 28MB for Mac OS. When installing the SDK, if an appropriate Java SDK environment cannot be found, the install can take you through the process of getting and installing the Java SDK (see Figure 7 for a look at installing the JavaFX 1.1 SDK on a Windows box).

Working with the JavaFX SDK

The JavaFX SDK provides a set of command-line tools to compiling, running, and testing JavaFX applications. Also provided with the SDK is a mobile device emulator for running and testing JavaFX Mobile applications. In particular, if you look into the bin folder of the SDK installation, you will find javafxc.exe and javafx.exe. These two tools are the JavaFX compiler and JavaFX runtime (which operates on top of a standard JVM), respectively.

The javafxc tool works similarly to the standard javac.exe tool. The compiler takes JavaFX source code (code saved in .fx files) and compiles them to Java byte code in classes (.class files). Figure 8 shows how to compile the previously discussed Hello World JavaFX code?after it has been saved in a file called Test.fx?using javafxc.exe, and Figure 9 shows how to execute it using javafx.exe.


Figure 8. JavaFX Code Saved in Test.fx file: The example JavaFX code from Listing 1 is saved in a file called Test.fx.
 
Figure 9. JavaFX Code Executed Using javafx.exe: Here is how to execute the Hello World JavaFX code using javafx.exe.

Also provided in the bin directory are JavaFX packaging and documentation tools. The packaging tool (javafxpackager.exe) is of particular interest to mobile developers because it provides the means to create a mobile-ready package for deployment to a mobile device or emulator. However, the packaging tool can also be used to create browser-ready or Web Start applications from JavaFX code.

To create the Java Application Descriptor (JAD) and JAR files for mobile device/emulator deployment, you must at least provide the javafxpackager tool with the location of the .fx file source code (it does not have to be compiled to .class files first) and the name of the main class or starting point class for the application.

By default, the javafxpackager creates a set of deployment files for browser or Web Start deployment. To create the JAD and JAR files for mobile deployment, you must also use the –p mobile option in the command line request. The –p is for “profile” and you can indicate mobile or desktop options with this switch.

Here is the full javafxpackager command to create a mobile-ready application from the Test.fx file (located in the c:jfx folder for this example):

javafxpackager -src c:jfx -appClass Test -p mobile -d c:jfxdist

The –src option specifies the source of the JavaFX script code, -appClass specifies the name of the main class, and the optional –d option specifies destination of the output (the .JAD and .JAR files). See Figure 10 for the results.

Again, without the –p mobile option (or by specifying –p desktop), the javafxpackager produces HTML, JAR, and JNLP files suitable for browser or Web Start execution as shown in Figure 11.

Also shipped with the Windows version of the JavaFX SDK is an emulator to test the applications. You should find an emulator.exe located in the /emulator/bin subfolder of the JavaFX SDK install directory. To test the JavaFX JAD/JAR files produced by the javafxpackager, call on the emulator tool with the JAD file. Use the –Xdescriptor: option to specify the JAD file to execute as shown in Figure 12.


Figure 10. Using the javafxpackger.exe with a –p mobile Option: Using the javafxpackger.exe with a –p mobile option creates a JAD and a JAR file.
 
Figure 11. Use the javafxpackger.exe Without a –p mobile Option: Use the javafxpackger.exe without a –p mobile option or with a –p desktop option to create all the files for browser or Web Start execution.
 
Figure 12. Test a JavaFX Application on the JavaFX SDK’s Emulator: Find the emulator executable in the /emulator/bin directory of the JavaFX SDK.

In addition to the tools and emulator, the JavaFX SDK comes with sample applications, documentation, and of course the JavaFX libraries and API.

JavaFX IDEs

While working with the SDK is easy, most developers will want the power and advantages of an integrated development environment (IDE). Today, at least two IDE options are available for developing JavaFX applications. NetBeans 6.5 completely supports JavaFX and JavaFX Mobile application development out of the box. Eclipse 3.4 also supports JavaFX development with the addition of a JavaFX plugin.

When the Java ME SDK 3.0 reaches final release, it will provide an important testing environment for JavaFX. However, it is not intended to be the development platform for JavaFX. NetBeans and Eclipse provide that today.

NetBeans 6.5

The NetBeans IDE allows you to create new JavaFX projects, classes, and stages (see Figure 13 and Figure 14).


Figure 13. The New Menu: The NetBeans IDE allows you to create JavaFX Script projects.
 
Figure 14. Creating a New JavaFX Class: The NetBeans IDE allows you to create JavaFX Script projects.

Source code editors support JavaFX-specific syntax with color-coded highlighting, code completion, code folding, documentation pop-ups, and syntax error detection. While editing JavaFX source files, developers can take advantage of a JavaFX palette to drag and drop common JavaFX elements into the source code (see Figure 15).

And since JavaFX coding is all about the design of the user interface, a nice little Preview button on the JavaFX editor allows for a quick visual peak at the results of the code in a popup window (see Figure 16).


Figure 15. NetBeans Supports JavaFX-specific Syntax: NetBeans provides code completion, JavaFX syntax color-coded highlighting, code folding, and Javadoc help.
 
Figure 16. The Enable Preview and Reset Preview Buttons: The Enable Preview and Reset Preview buttons allow developers to get a quick view of what the UI will look like when executed.

NetBeans 6.5 is packaged with the JavaFX SDK, so it is set up to use the SDK’s mobile emulator. When a JavaFX application has been created using NetBeans, it can be quickly configured to be run or it can be emulated under a number of execution environments. Simply open the project properties for any JavaFX project (you can get to the project properties by right clicking on a JavaFX project in the Projects tab and selecting Properties from the menu) and click on the Run category in the Project Properties window (see Figure 17 and Figure 18).

A radio button choice allows you to quickly switch the Application Execution Model between standard desktop, Web Start, browser, or mobile emulator. The mobile emulator execution model allows you to pick from the two emulators provided through the JavaFX SDK: a default emulator and a touch screen emulator.


Figure 17. Runtime Environment for a JavaFX Application: You can set the runtime environment for a JavaFX application by the Project Properties window.
 
Figure 18. The Application Execution Model: The Application Execution Model determines whether the application will be run on the desktop, via Web Start, in a browser, or in a mobile emulator.

Remember, when developing applications to run across many platforms?especially mobile platforms, you need to stick to the JavaFX common profile. The JavaFX API documentation and language reference guide can help you figure out which classes are available under the common profile.

In NetBeans, when the Application Execution Model is set to “Run in a Mobile Emulator”, classes that are not part of the common profile cause compiler errors and prevent the application from running in the mobile emulator. This handy indicator helps keep the applications you write truly portable.

JavaFX Eclipse Plugin

The JavaFX Eclipse Plugin provides the Eclipse 3.4 IDE with the necessary JavaFX libraries, JavaFX perspective, and ties to the JavaFX SDK. To install the JavaFX Eclipse plugin, download the plugin .zip file and unzip the files into the Eclipse directory. Make sure that the JAVAFX_HOME variable is set to the JavaFX SDK location. You can check this by selecting Windows -> Preferences from the Eclipse menu bar. In the resulting Preferences window, explore the Java -> Build Path -> Classpath Variables settings to verify that a JavaFX_HOME variable exists and is set to the folder where the JavaFX SDK is installed (see Figure 19). If the variable is not provided or set appropriately, use the New… or Edit… buttons on the interface to set the variable appropriately.

To create a JavaFX application in Eclipse, just create a standard Java project. When the project is created, right-click on the project in the Eclipse Package Explorer view, select JavaFX from the menu, and then select the Add JavaFX Nature option (see Figure 20). This action adds the JavaFX libraries to the project and also opens the project in the plugin-provided JavaFX perspective.


Figure 19. Eclipse Compiles and Executes JavaFX Code: Eclipse uses the JavaFX SDK to compile and execute JavaFX code.
 
Figure 20. Adding the JavaFX Libraries to a Project: Add the JavaFX libraries to a project by right-clicking the project in the Eclipse Package Explorer view and selecting the JavaFX -> Add JavaFX Nature option.

The JavaFX Plugin also updates the New dialog window by offering options to create new JavaFX script files or a basic stage (see Figure 21). To get the New dialog window in Eclipse, select New – > Other … from the Eclipse File menu option on the menu bar or right-click on a JavaFX project in the Package Explorer and select New.

Somewhat like the JavaFX Palette in NetBeans, the Eclipse JavaFX Plugin offers a Snippets toolbar to drag and drop JavaFX code snippets into a JavaFX code editor (see Figure 22).


Figure 21. Creating New JavaFX Script Files: The Eclipse JavaFX Plugin adds the ability to create new JavaFX script files and a basic stage with a default scene.
 
Figure 22. Snippets View with the JavaFX Perspective: The Snippets view allows developers to drag and drop common JavaFX code components or snippets into the JavaFX scripts that are edited.

Unlike NetBeans, however, the color-coded highlighting is minimal and Eclipse doesn’t support code completion, code folding, or documentation support. In fact, the Eclipse JavaFX Plugin appears to have a few bugs currently. As shown in Figure 23, the editor falsely detects an incompatible type error with integers. Thankfully, the false error detection does not prohibit testing the application. It should be noted that this bug is listed on the JavaFX Plugin issues list.

Figure 23. Eclipse False Error Detection: the Eclipse JavaFX Plugin appears to have difficulty understanding Integer types.

Like NetBeans, the Eclipse Plugin also allows the JavaFX application to be executed in one of four ways:

  • Run As Application (on the desktop)
  • Run As Applet (in a browser)
  • Run with Web Start
  • Run in Emulator

To execute a JavaFX Script, right-click on the JavaFX script file in the Package Explorer view and select Run As -> JavaFX Application (see Figure 24 and Figure 25).


Figure 24. Executing a JavaFX Script by Selecting the Profile – Target: In this first execution, the developer selects the Profile – Target.
 
Figure 25. Executing a JavaFX Script by Right-clicking on File: Right-click on the JavaFX script file in the Package Explorer view and select Run As -> JavaFX Application.

In the resulting Edit Configuration window, you can select an appropriate Profile – Target for your runtime environment. Subsequent runs of the application will use the same configuration and thus the same platform. To execute in a different mode, right click on the JavaFX script file in the Package Explorer view and select Run As -> Run Configurations… (see Figure 26). The Run Configurations window allows you to pick a different Profile-Target.

Figure 26. Changing the Runtime Environment: Select Run Configuration… to change the Profile – Target and therefore the runtime environment.

Eclipse can also be configured to indicate which profile to use when compiling and executing the JavaFX applications. Right click on a JavaFX project and select the Properties option in the resulting menu. In the Properties window, select the Java Build Path and then the Libraries tab. From this tab, you can edit the properties of the JavaFX System Library by selecting the library in the listing and pressing the Edit button (see Figure 27 and Figure 28). In the resulting Edit Library dialog window, you can select between the Desktop and Mobile profiles. When the Mobile profile is selected, elements from the Desktop profile will no longer successfully compile (or run) with your JavaFX applications. Again, this makes for a nice safety feature to ensure your JavaFX applications are truly portable.

Neither IDE supports WYSIWYG, drag-and-drop style visual development. According to many of the blogs, forums, and comments on the JavaFX tools, this is a feature soon to be added in future releases of the tools.


Figure 27. Editing the Properties of the JavaFX System Library: You can edit the properties of the JavaFX System Library by selecting the library in the listing and pressing the Edit button.
 
Figure 28. Changing the Profile Used to Compile (and Execute) JavaFX Scripts: Use the Properties window and select the Java Build Path to be able to find the JavaFX System Library.

Interestingly, the Eclipse JavaFX Plugin is made available through the Kenai Project. In addition to the Eclipse plugin, Kenai also offers a number of JavaFX applications: a few games, a few tools, and even a JavaFX Twitter client. Sun provides a number of demonstration applications on the javafx.com web site. To see some additional examples of what JavaFX can do, visit the Kenai web site.

The Wrap Up

After working with JavaFX for just a few minutes, you will see that this technology does offer hope that applications can be built, tested, and deployed to a very wide variety of platforms and UI screens all from the same source code. Can the tools, which are adequate today, eventually make developing JavaFX UIs a breeze? Will device vendors truly support the JavaFX platform? Will deploying applications to the diverse set of platforms be just as easy? None of these questions have answers today, but given the prospects, JavaFX and JavaFX Mobile certainly bear watching.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: