Three Reasons Why Your Next Java ME Mobile Application Should Include JavaFX Mobile

   
By Bruce Hopkins, February 2009  

Whether you're new to the Java Platform, Micro Edition (Java ME) or have been using it for a long time, right now is the perfect time to get started with JavaFX and JavaFX Mobile. The JavaFX 1.0 platform was released late last year, and it included several new capabilities and features that you may not be familiar with. The purpose of this article is to introduce you to the JavaFX platform, and to provide three really good reasons why your next Java ME mobile project should include JavaFX.

Contents
 
Reason #1: JavaFX is a Brand New Platform and Language With a New Declarative Syntax
Reason #2: The JavaFX Platform is a Software Layer Above the JVM
Reason #3: Data Binding with the Bind Keyword
Summary
 

Reason #1: JavaFX is a Brand New Platform and Language With a New Declarative Syntax

For those of you who have been programming for a long time, have you noticed that the syntax for the Java language is very close to the syntax of the C programming language? Those who have been programming for an even longer time may have noticed that the syntax for the C programming language is very similar to the syntax of Pascal. This makes sense for language designers because they want as many developers as possible to migrate to their new language. However, it also means that the basic syntax used for Java (and Java ME) is originally based on languages and computing environments where the only mechanism for the user interface was the command line.

Now of course, more sophisticated graphical user interfaces have been introduced and adopted over the years. Today's customers not only expect your mobile or desktop application to be functional, but they're also expecting a rich user experience.

So what does all this mean? It simply means that the programming languages, paradigms, and even the syntax of the previous century are less applicable for today's standards. Java is a very powerful and versatile programming language, but structural and object-oriented programming languages are not well-suited to the creation of applications with intense graphical user interfaces.

This is where JavaFX comes in. JavaFX is a completely new platform and language with RIA-friendly features, including a declarative syntax for UI development. Figure 1 below shows an architecture diagram for the JavaFX platform.

JavaFX Platform
Figure 1. JavaFX Platform Architecture
 

Now that you've seen the architecture for the JavaFX platform, let's look at some of the concepts presented in Figure 1. The JavaFX platform includes several functional pieces that allow developers (and designers) to build rich internet applications (RIAs). In the past, a graphical designer would have to learn how to program, or (even worse) a developer would have to acquire graphics and user experience skills. Java is a great language for us developers to use to build dynamic and innovating applications — but the concept of threads, static variables, memory management, and hashmaps are not as easy to learn for most graphical designers.

JavaFX has solved this problem with its declarative syntax for UI development. All JavaFX "screens" — that may be a new concept to you — support this new declarative syntax. A JavaFX screen is a runtime environment, and JavaFX supports desktop, mobile, and TV screens. The following listing contains the code for our first JavaFX application. This application, of course, uses the declarative syntax of the JavaFX Script language. This application also uses the common elements shown in Figure 1, so this application works on all JavaFX screens, which includes mobile.

Listing 1: MailNotifier.fx
package notifier;

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;

var img = Image { 
            url: "{__DIR__}email.png"
          }

Stage {
    width: 200
    height: 250
    title: "Mail Notifier"
    scene: Scene {
        content: [
            
            ImageView {
                image: img
                x: 0
                y: 0
            }

            Text {
                font: Font {
                    size: 16
                }
                x: 10 
                y: 140
                content: "New Email Received!"
            }
        ]
    }
}
 

As previously stated, the preceding code adheres to the JavaFX common elements, so it will run as a mobile application as well as a desktop application. If you run the code in Listing 1 under the mobile profile, you'll invoke the mobile emulator in NetBeans 6.5 and you should see your application running as shown in Figure 2. However, if you execute the code above according to the desktop profile, then you should see your application running as shown in Figure 3.

Mobile Platform
Figure 2. The MailNotifier.fx Application Running in the Mobile Profile
 
Desktop Profile
Figure 3. The MailNotifier.fx Application Running in the Desktop Profile
 

So, now that you've seen the code and know what results it will produce, let's start analyzing the code in greater detail. If you're new to JavaFX, then all the syntax in Listing 1 probably looks radically different from the Java syntax that you are accustomed to using. However, at second glance, you should notice the following five elements that allow the application to work:

  • Stage — This is the root element which is needed for any JavaFX application. For Swing developers, this is analogous to a JFrame. For Midlet developers there is less of a direct one-to-one correlation, but you can imagine this to be a Display object.
  • Scene — This is an internal element which is a container for UI components. For Swing developers, you can think of this as a JPanel. For Midlet developers you can think of this as a Form object. You should notice that all UI components need to be placed in the content of the Scene.
  • Image — This is simple object that allow you to reference a external image via the url parameter. You should notice that I used the constant, {__DIR__} to get a reference to the current directory.
  • ImageView — This is a displayable UI component that requires a reference to an Image object.
  • Text — This is a simple UI component for rendering text on the screen.


Hopefully, it should be easy to see that the declarative syntax is one of the best new features in JavaFX. It will allow graphic designers and user-experience team members to aid in the process of creating compelling graphical applications that adhere to the MVC pattern. These team members do not need to learn the Java ME graphical APIs. In fact, once they learn the declarative syntax in JavaFX, they can easily use their skills to create user interfaces for desktop and TV applications.

Reason #2: The JavaFX Platform is a Software Layer Above the JVM

So let's say that reason #1 alone has convinced you, and you're ready to write the next mobile killer-app using JavaFX. Great! Let's assume that you're in the middle of your development cycle, and you realize that your mobile application needs to perform some very important but non-GUI-related operations such as:

  • Discover a local Bluetooth device in the vicinity
  • Communicate with a SIP registrar or proxy
  • Determine your geo-location via a GPS device


So now what do you do? You want to write your killer-app using great declarative syntax of JavaFX, but you also realize that the Java standard specifications for Bluetooth wireless technology (JSR-82), SIP communication (JSR-180), and location-based application development (JSR-179) and are available as Java ME APIs.

Fortunately, as you may recall from the JavaFX platform diagram in Figure 1, the JavaFX runtime is completely dependent upon (and compatible with) the Java virtual machine (JVM). Simply stated, it means the following:

  • Your JavaFX Mobile application has no restrictions on calling any class bundled in the JAR or any JSR API library that's present on the handset.
  • Your JavaFX Desktop application will work seamlessly upon any deployment platform that has the current version of the JRE:
    • For Windows machines, this will be Java 6, update 11 (or later)
    • For Mac OS X machines, this will be Java 5, update 13 (or later)
    • Independent of the operating system, your JavaFX Desktop application will also be able to call any class that's bundled in the JAR package for your desktop application. Note: On the Windows desktop, JavaFX runs on Java 5 and it degrades gracefully (for example, the Drag2Install feature does not work) — that is, it does not break your application.

The following listing shows a modified version of the MailNotifier.fx application. In this version, you should see how easy it is for any JavaFX application to instantiate regular Java objects and invoke methods on those objects. The output of this application will be exactly the same as shown in Figure 2 and 3.

Listing 2: A Modified Version of MailNotifier.fx
package notifier;

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;


var img = Image {
            url: "{__DIR__}email.png"
          }

Stage {
    width: 200
    height: 250
    title: "Mail Notifier"
    scene: Scene {
        content: [

            ImageView {
                image: img
                x: 0
                y: 0
            }

            Text {
                font: Font {
                    size: 16
                }
                x: 10
                y: 140
                content: new String("New Email Received!").trim();
            }
        ]
    }
}
 

As you can see from the code above, you have no restrictions in your JavaFX application to instantiate any object and perform method calls on your instance. The garbage collector of the JVM is still present and will handle your objects accordingly.

Although Java FX will allow your mobile application to call any class that's present on the handset, however, you should be aware that the Java FX API supports several additional features such as:

  • Support for asynchronous operations (without creating a new thread) via the javafx.async package of classes
  • Support for XML and JSON pull parsing via the javafx.data package
  • Support for HTTP requests and responses via the javafx.io.http package
  • Support for streaming audio and video via the javafx.scene.media package

And of course, all the functionality listed above is part of the Java FX Common profile; that means, for instance, that the syntax required to play a media file on a mobile device, on a desktop machine, in a web browser, or on TV set top box is exactly the same. Very powerful!

Reason #3: Data Binding With the Bind Keyword

Data binding is one of the most powerful new features in JavaFX: it is the feature that instructs the JVM to update the value of one variable when the value of another variable changes.

To prove how great the data binding feature in JavaFX is, let's take a look at an example that does not use data binding. The following code is supposed to update the position of the gray circle, as well as the bottom text that indicates the value of the slider. Note: Since this application uses the SwingSlider component, it won't work on JavaFX Mobile profile, but it's a good example of how to use the bind keyword. For an example of binding that uses UI capabilities that exist on the JavaFX Mobile platform, see Jim Weaver's Binding and KeyEvent Examples in JavaFX Mobile blog.

Listing 3: NonMovingCircle.fx
package notifier;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.ext.swing.SwingSlider;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;


var slider =  SwingSlider {
                translateX: 10
                translateY: 150
                minimum: 50
                maximum: 200
                value: 50
                vertical: false
            }
Stage {
    width: 250
    height: 250
    title: "Non-Moving Circle"
    scene: Scene {
        content: [

            Text {
                font: Font {
                    size: 16
                }
                x: 10
                y: 20
                content: "Non-Moving Circle Example";
            }

            Circle {
                centerX: slider.value
                centerY: 80
                radius: 40
                fill: Color.LIGHTGRAY
                stroke: Color.BLACK
                strokeWidth: 2
            }

            slider

            Text {
                font: Font {
                    size: 16
                }
                x: 10
                y: 200
                content: "slider value: {slider.value}"
            }
        ]
    }
}
 

However, since we didn't use the bind keyword, you can see that neither the gray circle nor the bottom text changes when the slider is dragged. Figures 4 and 5 show the results when the application is initiated and when the slider is dragged.

NonMovingCircle.fx
Figure 4. The NonMovingCircle.fx Application at Startup
 
NonMovingCircle.fx
Figure 5. The NonMovingCircle.fx ApplicationAfter the Slider was Dragged
 

Now, let's take a look at a slightly different example where we use the bind keyword to take the value of the slider and always keep the values of the circle and lower text area up to date. Listing 4 shows the complete source code for MovingCircle.fx.

Listing 4: MovingCircle.fx
package notifier;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.ext.swing.SwingSlider;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;


var slider =  SwingSlider {
                translateX: 10
                translateY: 150
                minimum: 50
                maximum: 200
                value: 50
                vertical: false
            }
Stage {
    width: 250
    height: 250
    title: "Moving Circle"
    scene: Scene {
        content: [

            Text {
                font: Font {
                    size: 16
                }
                x: 10
                y: 20
                content: "Moving Circle Example";
            }

            Circle {
                centerX: bind slider.value
                centerY: 80
                radius: 40
                fill: Color.LIGHTGRAY
                stroke: Color.BLACK
                strokeWidth: 2
            }

            slider

            Text {
                font: Font {
                    size: 16
                }
                x: 10
                y: 200
                content: bind "slider value: {slider.value}"
            }
        ]
    }
}
 

So now that we've added the bind keyword to the statements of the variables that we always want to keep up to date, let's run this application and see what happens.

NonMovingCircle.fx
Figure 6. The MovingCircle.fx Application at Startup
 
NonMovingCircle.fx
Figure 7. The MovingCircle.fx ApplicationAfter the Slider was Dragged
 

Success! As you can see, with the bind keyword, we are able to let the JVM do all the work for us in order to keep a variable (and in this case, two variables) up to date with the value of another variable.

Summary

As you have seen, JavaFX is a feature-rich platform that allows both developers and now designers to create rich and compelling user interfaces for mobile devices. Although JavaFX is a new language and platform, its binaries and runtimes are compatible with latest versions of the JVM. So you don't have to worry about the "deployability" of your application since there are billions of JVMs deployed worldwide.

JavaFX includes a powerful declarative syntax that allows various team members (such as designers and graphic artists) to create mobile and desktop applications without having to learn how to program.

Additionally, JavaFX is also very flexible, so developers will have no problem calling methods on objects and instantiating objects within libraries that already exist in Java ME and Java SE.

Finally, JavaFX gives you the ability to bind the value of an object to another variable; an extremely powerful feature that has never been available in the Java language!

The Java has language has been the choice for platform-independent application development for over a decade. Millions of developers worldwide use it to solve their everyday business needs. JavaFX is the new evolution of the Java language that provides tons of new features (including screen-independent APIs) that will simplify your development and take you even further.

Rate and Review
Tell us what you think of the content of this page.
Excellent   Good   Fair   Poor  
Comments:
Your email address (no reply is possible without an address):
Sun Privacy Policy

Note: We are not able to respond to all submitted comments.