Welcome!

APIs for the Internet of Things

Max Katz

Subscribe to Max Katz: eMailAlertsEmail Alerts
Get Max Katz via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: RIA Developer's Journal

RIA & Ajax: Article

AJAX and Enterprise RIA Tools - JSF, Flex, and JavaFX

Most organizations are delivering or planning to deliver Rich Internet Applications in 2008

Flash/Flex
Another medium for delivering Rich Internet Applications is the high-performance Flash player from Adobe. Flash player (version 9) is a ubiquitous lightweight virtual machine that's installed as a plug-in inside a browser and runs Flex applications. Flex provides a declarative language called MXML that offers out-of-the-box graphical UI components as well as ActionScript, an object-oriented programming language, to build advanced user interfaces. Compiled Flex applications run inside the Flash virtual machine to enable a much richer user experience than would be possible in a standard Web browser where the markup (HTML) and JavaScript are interpreted. Flex is easily extendable and provides easy integration with back-end technologies such as Java, PHP, and ASP.

Let's look at the same application using Flex. Flex provides a declarative way of defining the UI. The compiled file then runs inside the Flash player installed as plug-in inside a Web browser. Here's how the application could be declared:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute">
<mx:Script>
     <![CDATA[
     [Bindable]
     private var numOfClicks:Number = 0;

     public function click():void{numOfClicks++;
     }
     ]]>
</mx:Script>

<mx:Panel x="10" y="10" width="250" height="114" layout="absolute" title="Flex">
     <mx:Button label="Hit Me" click="click()" y="10" horizontalCenter="0"/>
     <mx:Label text="Number of hits: {numOfClicks}" y="40" horizontalCenter="0"/>
     </mx:Panel>
</mx:Application>

The model for the UI is defined inside the mx:Script element.

Figure 2 shows the result.

JavaFX
The next technology is JavaFX.

It's the "old newcomer" to the RIA arena. While JavaFX consists of both JavaFX Mobile and JavaFX Script, here I'm referring to JavaFX Script. When I refer to JavaFX, I actually mean JavaFX Script. While JavaFX is a new language, it's based on mature Swing and JavaSE technologies. That's why I call it an "old newcomer."

History
Most people will agree that Java is excellent on the server side, but it was missing in action on the UI side. To be honest, Java does provide solid tools for building user interfaces: Swing and applets. However, using these technologies has been challenging and difficult. The look-and-feel available didn't help much either. To add to that, the JRE's download size (large), its start-up application speed, and its installation and updates (even Java experts can find it difficult to install and update Java) made it even more challenging to use Java to build Rich Internet Applications.

JavaFX
So what is JavaFX? JavaFX is a declarative language for building rich user interfaces using Java. In a way it's Swing for the Web using a declarative scripting language, which makes it much simpler to develop user interfaces. Given that it's based on Swing, it comes with a ready-to-use set of UI components.

The upcoming JDK6 (Consumer JRE) will address the problems with the current Java runtime. To run a JavaFX application will require downloading a lightweight Java virtual machine (probably around 2MB-4MB). The application can be run in the browser (using a Java plug-in, similar to the Flash player) or outside the browser. Java FX applications running inside a Java virtual machine will be able to deliver richer and more interactive applications than possible via a browser interpreting only HTML and JavaScript.

The following is an example of the same sample application using a declarative JavaFX script. The model for the user interface is defined using the ButtonClickModel class.

import javafx.ui.*;
import javafx.ui.canvas.*;
import javax.swing.UIManager;
import sun.swing.plaf.nimbus.NimbusLookAndFeel;

UIManager.setLookAndFeel(new NimbusLookAndFeel());

class ButtonClickModel {attribute numOfClicks: Number;
}
var model = new ButtonClickModel();

Frame {
    height: 100
    width: 150
    title: "JavaFX"
    content: GridPanel {
      rows: 2
      columns: 1
      vgap: 3
      cells: [
        Button {
          text: "Hit Me"
          verticalTextPosition: CENTER
          action: operation() {
            model.numOfClicks++;
          }
        },
        SimpleLabel {
          horizontalAlignment: CENTER
          text: bind "Number of hits: {model.numOfClicks format as <<#>>}"
        }       ]
    }
    visible: true
};

Finally, running this will produce the following in Figure 3.

Silverlight
This article would be incomplete without mentioning Silverlight. Due to limited space, I will only briefly mention it. (I will cover Silverlight in much more detail in future articles in this series.) Silverlight is a Microsoft .NET platform for building cross-platform, cross-browser Rich Internet Applications. As with Flex and JavaFX, Silverlight applications are delivered inside a virtual machine that is installed as a plug-in into a Web browser.

Conclusion
We'll see more and more organizations deploying Rich Internet Applications to improve user experience. The browser is here to stay. It's a fine platform for delivering far superior applications than we're used to. Yet, the standard browser alone can't be pushed beyond its limits.

It's crucial to recognize that additional delivery platforms besides the standard Web browser exist. Virtual machines such as the Flash player or Java can be installed as plug-ins and deliver a much richer experience. These applications can deliver a true desktop experience with the Web delivery model.

As a final note, this is just the first in a series of articles on Rich Internet Applications. As this series of articles progresses, I will get into more details about these technologies. Furthermore, I intend to provide a concise and clear guide for IT managers to select the right user interface technology for their next generation Web application.

More Stories By Max Katz

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Michael 06/20/08 10:05:46 AM EDT

As Photoshop and Co can export to JavaFX this would be really interesting in Xara 4 , as it is my prefered program. Are there any plugins or is it coming from Xara itself in the near future?

hopefully! I'm interesting too who needs that ....

yours

Michael

Richard Monson-Haefel 05/22/08 10:07:12 AM EDT

I think this article is little more than an advertisement for Exadel which provides a JSF/Ajax solution. Max ignores Silverlight which is clearly an option that deserves attention. In addition, he completely ignores Curl (Note: I work for Curl) which has been used in production by hundreds of enterprise customers for at least five years - far longer than JSF or Flex.

I guess I can understand why the article is so biased, but I wish it could have been more balanced and the agenda more agnostic.

The truth is that JSF is an obsoleet solution. If you are still doing client development using a server-side framework your not taking advantage of the RIA solutions available today. Server-side GUI frameworks are dead. Let them rest in peace.

Richard Monson-Haefel - Curl, Inc.