Technical Session: JavaFX Technology in Action: From Design Tool to Desktop, to Mobile Device

The Swiss rich Internet application (RIA) development house Canoo was one of the first companies to use JavaFX -- literally hours after it was first released in 2007. In his session titled, JavaFX Technology in Action, Canoo's Mike Mannion showed how his company created its first fun JavaFX application, Music Pinboard, and how they migrated it from the browser to the desktop, and then to mobile devices in a matter of weeks. Mannion talked about development as well as design tools, gave quick insights into the coding process, and shared his opinions about the technology's strengths and weaknesses.

Canoo's goal was to create an RIA that would let you search for an artist, and then display photos, discography, videos, and a list of similar artists. In order to achive that, the music browser should integrate services from Flickr, Amazon, YouTube, and Last.fm. Creating the first prototype during the JavaFX preview period gave Canoo first insights into what this new scripting language had to offer.

Before JavaFX was officially released in late 2008, the JavaFX syntax had been simplified, and built-in multimedia support had been added, thanks to feedback from early adopters. Consequently, Sun invited Canoo to attend the official launch of JavaFX as a Java application showcase partner.

Next Mannion gave the audience an overview of the typical application development process. One of the advantages of JavaFX is that there are design tools for designers and development tools for developers. Both teams can be geographically separated, and the designers can focus on graphics while the developers can focus on code without stepping on each other's toes.

So Canoo hired a design company for the user interface. All the designers needed was the specification and the free "Save for JavaFX" Photoshop plug-in. The plug-in creates a .fxz file that contains the PNG images and artifacts in a format for integration into a development tool such as the NetBeans IDE. The developers then use a special UI class that makes each element accessible to the application via an ID. The IDs are generated from the layer names in Photoshop and represent a kind of contract between the designer and developer.

After integrating the graphical resources into the project, the developers add interactive effects such as reflections, lighting, animations, or mouse-over. JavaFX makes it easy to hook up the UI with the data model using the bind keyword.

As an example of the actual coding process, Mannion showed a small sample application that displayed a row of photos. A look at the source code revealed that every JavaFX application's root is the Stage. The Stage contains the Scene, and the Scene collects nodes, in this case, image objects. With one keyword, Mannion bound a variable to the image's X coordinate, and added a timeline with one keyframe. (As you can see, JavaFX terminology is very similar to Flash ActionScript terminology.) The animation relies on a built-in interpolator for manipulating the variable over time. This way the row of images slides across the screen in one smooth motion -- with just a few keystrokes.

Using the bind keyword saves a lot of time when coding because it gives you implicit event handling and listeners. But don't let the ease of use tempt you to use binding everywhere, because that will slow down your application. Use it wisely.

When JavaFX Mobile was released in 2009, Canoo started creating a mobile version of its music browser. Some redesign of the graphical user interface was required to adapt the RIA fit to small screens and limited hardware, and the JavaFX Production Suite did not yet provide a lot of built-in application components. But the Canoo engineers were quickly able to implement the desired page-flipping effect as a reusable custom class. JavaFX Mobile can use native video codecs available on the mobile device, so multimedia support was covered. However, the translucent controls that looked great in the desktop application were partially lost on the mobile device's display.

One JavaFX API that Canoo extensively used for this particular project was the built-in support for invoking and processing web services. As in any Java application, you create an HttpRequest object and start an asynchronous call. Mannion pointed out that it is very easy for beginners to get started with a simple JavaFX sample application, but to make a real application work, developers need to understand the Java threading model so they will not accidently block the UI.

Other challenges were readily solved by using the right tools. For instance the NetBeans IDE provides useful emulators for mobile devices. The emulator isn't available for Mac OS yet, but the JavaFX team is already working on the Mac version of the emulator. It is expected later this year.

Although JavaFX provides a set of UI widgets that are easy to customize, Mannion regrets that it is only a small basic set with items such as buttons, fields, labels, and sliders. So, presently you will often find yourself creating custom components, which luckily is easy enough. One missing feature for Mannion is a way to bind JavaFX fields to JavaBeans, or even to Groovy or Scala classes.

As Mannion demonstrated with Music Pinboard, the cleanly designed JavaFX development suite allowed his designers and the development team to efficiently work together. He feels that JavaFX makes creating interactive Internet applications very easy; applications become more maintainable and require less code. As increasingly more complex applications are being released, Mannion really appreciates using this powerful declarative scripting language for his company's projects.

» JavaFX
» JavaFX Developer Site
» Music Pinboard

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.