Building Cool RIA Enterprise Applications With JavaFX

Java FX is a platform for creating and delivering rich Internet applications (RIAs) -- web applications that use rich media types such as video, audio, and graphics -- that can run in a wide variety of devices, anywhere from handsets to laptops to desktops.

Although the JavaFX platform is only half a year old -- its initial full release was in December 2008 -- people are already building some very cool applications with it. The latest release of JavaFX, JavaFX 1.2, was announced during the first day of the JavaOne Conference.

In the 2009 JavaOne Conference technical session titled Pro JavaFX Platform: RIA Enterprise Application Development With JavaFX Technology, JavaFX technology experts Jim Weaver and Stephen Chin demonstrated how easy it is to build RIAs with JavaFX. Weaver, who runs the professional services company Veriana Networks, and Chin, a senior manager at Inovis, a provider of solutions for business community management, co-authored with two others an excellent book on JavaFX programming titled Pro JavaFX Platform: Script, Desktop and Mobile RIA with Java Technology. In addition, Weaver and Chin are prolific bloggers on the subject of JavaFX. Weaver's blog is titled Jim Weaver's JavaFX Blog. Chin's blog is titled Steve on Java. And as if writing books and blogging isn't enough, both Weaver and Chin also twitter frequently.

Left to right: Stephen Chin and Jim Weaver

This was a very interesting session, especially for those who knew little or nothing about JavaFX. It started off with Weaver giving a short crash course on the basics of JavaFX and its programming language, JavaFX Script. Specifically, he showed the steps in building a JavaFX program that displays the image of an earthrise as seen by the Apollo 8 astronauts in 1968. The application also plays an audio of "Thus Spake Zarathustra," the musical theme from the movie 2001: A Space Odyssey. The historic earthrise image was the first image of the Earth taken from space. As Figure 1 shows, the JavaFX program displays the image as well as accompanying text taken from NASA's web site. The text scrolls on the screen.

Figure 1. Earthrise

The steps to build the program are quite simple and reflect just how easy it is to put together a compelling, media-richly application in JavaFX. In particular, the declarative style of the JavaFX Script language makes it easy to build such a program.

The basic steps in building the earthrise program are as follows:

• Create a stage and a scene. A stage is the root area for all the graphical objects in a JavaFX application. It's essentially the drawing surface for the application. A scene is the interior of the stage. It's a logical container that holds the graphical objects, which can be UI components, shapes, text, images, and media content such as video or audio. For example, the following code creates a stage and a scene:

    
       Stage {
         title: "Hello Earthrise"
         scene: Scene {
         ...        
       }
  

  Internally, JavaFX handles a scene and the graphical objects it contains in a hierarchical structure called a scene graph. A single element in the scene graph is called a node. The graphical objects in a scene are nodes within a scene graph.


• Add content to the scene. For example, use the ImageView class to add a node for an image to the scene. The Group class groups nodes together so that they can be manipulated as a unit. For instance, you can apply an effect such as animation to all the nodes in a group as a unit.

    
       scene: Scene {
           content: [
             ImageView {
               ...
             },
             Group {
               ...
             }
           ]
       }
  



• Display the image. The ImageView class retrieves and displays an image based on the image's URL. For example, here's an ImageView class that retrieves the earthrise image from the NASA site:

  
       ImageView {
         image: Image {
           url: "http://www.nasa.gov/images/content/"
                "54427main_MM_image_feature_102_jw4.jpg"
         }
       }, 
  



• Display the text in the group.

       Group {
         translateX: 50
         translateY: 180
         content: [
           textRef = Text {
             translateY: 100
             textOrigin: TextOrigin.TOP
             textAlignment: TextAlignment.JUSTIFY
             wrappingWidth: 380
             content: "Earthrise at Christmas: "
                      ...
             fill: Color.rgb(187, 195, 107)
             font: Font.font("SansSerif", FontWeight.BOLD, 24);
           }
         ]
         clip:
           Rectangle {
             width: 430
             height: 85
           }
       }
  

  The many instance variables specified here define various attributes of their respective objects. In total, the instance variables describe the object's state. For example, the fill instance variable paints the text a greenish-yellow color. The clip instance variable bounds the text into a rectangular shape so that it doesn't obscure the earth image in the display.

That's essentially all there is to coding the image and text portions of the application. Weaver also showed the coding that handles the animation, that is, the scrolling of the text, and the audio in the application.

Chin followed Weaver with a segment that was devoted primarily to developing JavaFX applications for mobile devices. The goal of JavaFX is to make it as easy as possible to create immersive applications that run unchanged across a spectrum of devices. It's the JavaFX version of the "write once, run anywhere" mantra that has always been associated with Java technology. In the case of JavaFX, the "anywhere" refers to devices.

However, the reality is that the constraints imposed mobile devices, such as small screen size and small memory footprint, often force developers to code JavaFX applications for mobile devices differently than for the desktop.

The JavaFX classes available to developers creating applications for mobile devices are a subset of the full set of JavaFX classes. These class sets are called profiles. The full set available for developers creating desktop applications is called the desktop profile. The subset is called the common profile.

Chin showed what a developer needs to change in the earthrise application to run in a mobile device. For example, a border width needs to be specified to keep the content within the bounds of the mobile device's smaller screen.

   var scene:Scene;
   def borderWidth = bind scene.width / 10;
   Stage {
     title: "Hello Earthrise"
     scene: scene = Scene {
     ...
       Group {
        translateX: bind borderWidth

Chin compiled the application and then ran it in the HTC Diamond, the first mobile device with JavaFX Mobile pre-installed. Note that there are no other handsets currently available that include JavaFX. So for the time being, developers can prototype their JavaFX applications in the JavaFX mobile emulator that is packaged in the JaavFX SDK, but cannot run the applications on an actual handheld device -- that is, other than on the HTC Diamond.

Weaver also spent a bit of time on another important feature in JavaFX: binding. Binding is an especially powerful feature that allows a developer to synchronize the attributes of objects, so that when the attribute of one object changes, a bound attribute in another object changes as well. The feature is often used to bind the view, that is, the user interface of an application, to the model, that is, the data for the application.

Weaver and Chin ended with their version of the Java Puzzlers session that Google's Josh Bloch and Microsoft's Neal Gafter often present at JavaOne conferences. The Java Puzzler sessions are intended to both educate and amuse the audience by showing some of the subtleties of the Java language. Of course, the Weaver-Chin version presented JavaFX puzzlers. Here is one of the puzzlers that Weaver and Chin presented:

   What does this print out?

      var cars = [
          ["z3", "m3", "x5"]
          ["a4", "r8", "tt"]
      ];
      println("bmw: {cars[0]}");
      println("audi: {cars[1]}");
      }
   
   The answer is:
   
      bmw: z3
      audi: m3

This highlights the fact that in JavaFX, sequences are one-dimensional. There are no multi-dimensional sequences as there is in Java technology.

There were a number of interesting questions and answers during the session. In fact, Weaver and Chin encouraged the audience not to save their question until the end of the session, but rather to ask them during the session. Here are some sample questions from attendees and answers from Stephen Chin:

Q: Will JavaFX be deployed on existing devices or will it require new devices?

A: I'm not sure officially what the story is on support for existing phones, but they're selling a show device, the HTC Diamond, in the JavaOne Store. It comes with JavaFX Mobile pre-installed on it. For at least the time being, it will be devices with JavaFX pre-installed, like this one.

Q: If we have to scale within a JavaFX application, does that shoot absolute pixel positioning for your nodes?

A: The scaling support in JavaFX is very clever. So if you did absolute positioning, which I don't recommend -- say it fit within a 300 by 200 box -- you can pop a scale transition on it; and say I want this to scale to the screen size. It would scale the screen size, the nodes, and the effects pretty well.

Q: Do you need to create two versions of your application -- one for desktop and one for the mobile environment -- or can you crate one version of the application to run on both?

A: As long as you stick within the common profile, your application will compile and run on the desktop or mobile device with zero changes, same code. So it's just a deployment difference.

» JavaFX Home Page
» JavaFX Developer Site
» Jim Weaver's Blog
» Stephen Chin's Blog

Do you have comments about this article? 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.