ich internet applications (RIAs) have taken center stage in software development, with Adobe, Microsoft, and Sun rolling out their AIR, Silverlight, and JavaFX technologies, respectively. Developers' unfamiliarity with these new products has led to misunderstandings about their purpose, how they fit into RIA development, and whether they target different niches or compete directly with each other. In a nutshell, Adobe AIR enables Flex and DHTML developers to build applications for the desktop; Silverlight allows developers to build rich media applications that run in the browser; and JavaFX Script lets developers build rich user interfaces for Java applications.

This article provides a practical demonstration of each technology. Three complete examples walk through the process of building an application in Silverlight, AIR, and JavaFX, highlighting the strengths and weaknesses of each one. It concludes with a discussion of the similarities and differences between them so you can better understand how each fits within your development needs.

The demo application is a simple stopwatch gadget that imitates a typical stopwatch device (see Figure 1). It has two buttons (one to start or stop the timer, another to reset it) and a mixed analog/digital presentation (the second and minute hands are combined with a digital display).

Figure 1. Stopwatch Gadget

Each example provides instructions for the following tasks and then concludes with an assessment of the given technology:

• Setting up the development environment
• Building a user interface (UI) from original artwork (The artwork was created in the SVG format using the open source Inkscape vector graphics editor. See Figure 2.)
• Implementing the animation
• Adding interactivity
• Deploying the final application

Figure 2. Original Artwork for Stopwatch UI

The Silverlight Stopwatch
Microsoft's Silverlight framework (formerly WPF/E) allows you to build RIAs that run within the browser. The client runtime setup installs browser plug-ins, which enable you to embed Silverlight applications into web pages. Silverlight competes directly with the Adobe Flash platform.

At the time of writing, Silverlight supported Internet Explorer and Firefox on Windows, and Safari and Firefox on Mac OS X. It did not support Opera and Safari on Windows and offered no official support for support Linux (nor any plans for it). As you might expect, Microsoft does not offer any Silverlight development tools for platforms other than Windows either. However, the Moonlight project already has a Mono-based implementation of Silverlight running on Linux. That addition will provide Silverlight with the same level of platform compatibility as Flash.

Silverlight applications come in two flavors: JavaScript-based and .NET-based. The JavaScript-based applications rely on the browser's JavaScript engine for interactivity, while the .NET-based ones use a mini-CLR that Microsoft included with the Silverlight runtime starting from the Silverlight 1.1 Alpha. This example builds a .NET-based application because it showcases the real power of the platform.

Setting Up Development Environment
Take the following steps to set up the development environment for Silverlight:

1. Install the Silverlight 1.1 Alpha runtime.
2. Install the Silverlight 1.1 Alpha SDK.
3. Install Microsoft Visual Studio (Codename "Orcas").
4. Install Silverlight Tools Alpha for Visual Studio (Codename "Orcas").
5. Launch the Visual Studio IDE, go to File->New->Project…, select Visual C# -> Silverlight project type, and pick the Silverlight Project template.
6. Enter "stopwatch" as the project name and click OK. Your new project should look like Figure 3.

Figure 3. New Silverlight Project

Building UI from the Original Artwork
Visual Studio will create a complete project framework for you. Press F5 to verify that the empty project compiles and runs. It should open a browser with a blank page. The page isn't really blank though; your Silverlight application is embedded in it—but the application has no visible elements yet. Before adding something there, download the accompanying Silverlight Assets source code and extract it into the "assets" subfolder inside your source folder. To display images, add the following line to Page.xaml within the <Canvas> tag:

<Image x:Name="mainBg" Source="assets/sport_bg.png" 
Canvas.Left="0" Canvas.Top="0"></Image>

Press F5 again and you should see a stopwatch background rendered in the top left-hand corner of the page. Now add two buttons to position them in a specific area:

<Image x:Name="btnClear" Source="assets/clear_btn.png" 
Canvas.Left="185.50" Canvas.Top="188.35" />
<Image x:Name="btnStartStop" Source="assets/start_btn.png" 
Canvas.Left="192.00" Canvas.Top="11.85" />

Next, add the digital display, which consists of two elements: a rectangular background with rounded corners and a text label:

<Rectangle Canvas.Left="83" Canvas.Top="154" 
Fill="#2d2d2d2d" Width="69.32" Height="16.48" 
RadiusX="5.82" RadiusY="8.24" Stroke="#6d551c" 
StrokeThickness="0.76"></Rectangle>

<TextBlock x:Name="intervalText" 
Canvas.Left="88" Canvas.Top="156" 
Text="00:00:00.00" FontFamily="Arial" 
Width="69.32" Height="16.48" 
FontStyle="Normal" Foreground="#FF000000" 
FontSize="11" TextWrapping="NoWrap" /> 

Compiling and executing the project will display the complete stopwatch interface—except for the hands. Unfortunately, the Image object doesn't support vector images (in particular, SVG), so if you try to feed it assets/hand.svg it will throw an exception at run time. One way around this is saving the hand as a PNG image and hoping that it will look fine. It won't.

A better solution is converting SVG into XAML. Both are XML based and similar in architecture, so it's quite easy to write a converter. If you have Adobe Illustrator, it's probably easiest to use the XAML Export plug-in for Adobe Illustrator (developed and maintained by Mike Swanson). In real-world applications you are better off using the Adobe Illustrator plug-in because it supports Silverlight and Microsoft authoring tools such as Expression Design (hopefully it will support SVG in future versions).

Alas, I don't have Illustrator so I used ViewerSvg, a free SVG viewer and XAML exporter (see Figure 4).

Figure 4. ViewerSvg

The XAML output produced by ViewerSvg is a good start, but it can't be used directly with Silverlight namespaces, so you need to do some manual tweaking. Adding the code in Listing 1 within the Canvas object will give your stopwatch the second hand.

Note that by default Silverlight renders objects in the order they appear in the XAML source. You can change this by setting the Canvas.Zindex attribute.

The minute hand is similar to the seconds hand, but it's smaller and positioned differently. To scale it down, use the Canvas.RenderTransform node as shown in Listing 2.

Implementing the Animation
Now you have all the components of the stopwatch UI ready and it's time to make it work. The last change you should make to Page.xaml is adding a timer component that uses the storyboard DoubleAnimation element as a timer and sets a duration to the tick time:

<Canvas.Resources>
    <Storyboard x:Name="timer">
        <DoubleAnimation Duration="00:00:0.02" />
    </Storyboard>
</Canvas.Resources>

Now open Page.xaml.cs and add the following variable declarations just before the Page_Loaded method:

private DateTime _startTime = DateTime.Now;
private TimeSpan _stopTime = new TimeSpan(0);
private bool _is_running = true;

In these declarations, _startTime holds the time when stopwatch started, _stopTime holds the interval measured, and _is_running is the boolean flag indicating whether the stopwatch is running at the moment (see Listing 3).

Within the Page_Loaded handler after InitializeComponent(), assign an event handler to the timer's Completed event:

timer.Completed += new EventHandler(_Tick);
timer.Begin();

The _Tick method will handle the Completed timer event, after which the timer starts (and you will need to restart it inside the _Tick code). See Listing 4.

Note that although you didn't explicitly declare a timer variable you can use it in your code. Silverlight automatically defines the variables with a x:Name attribute for all objects in your XAML.

Finally, add the event handler code, which will display the time elapsed:

void _Tick(object sender, EventArgs e)
{
    DateTime now = DateTime.Now;
    TimeSpan dt = ((TimeSpan)(now.Subtract(_startTime)));

    intervalText.Text = 
    String.Format("{0:D2}:{1:D2}:{2:D2}.{3:D2}", 
    dt.Hours, dt.Minutes, dt.Seconds, dt.Milliseconds / 10);
	
    RotateTransform sRotate = new RotateTransform();
    sRotate.Angle = (dt.Seconds + dt.Milliseconds * 0.001) * 6;
    secHand.RenderTransform = sRotate;

    RotateTransform mRotate = new RotateTransform();
    mRotate.Angle = (dt.Minutes + dt.Seconds * 1.0 / 60.0) * 30;
    minHand.RenderTransform = mRotate;

    // restart the timer
    if (_is_running)
    {
        timer.Begin();
    }
}

Using the .NET classes DateTime, TimeSpan, and String makes it very easy to format and display the time interval. (You have to restart the timer within the handler to keep it running.)

Press F5 and you will see your stopwatch working! Thanks to the power of .NET it took only a few lines of code.

Adding Interactivity
Your stopwatch works but it still has two buttons that don't do anything. That's easy to fix. Assign the event handlers by adding this code to Page_Loaded method:

btnClear.MouseLeftButtonDown += 
new MouseEventHandler(btnClear_MouseLeftButtonDown);
btnStartStop.MouseLeftButtonDown += 
new MouseEventHandler(btnStartStop_MouseLeftButtonDown);

If you actually type this code, Visual Studio allows you to complete the line and then automatically creates the handler stub once you enter "+=".

Making the Start/Stop button work requires saving the interval elapsed from the moment the device is stopped to when the count is resumed and subtracting that from the current time:

void btnStartStop_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    _is_running = !_is_running;
    if (_is_running)
    {
        DateTime now = DateTime.Now;
        _startTime = (DateTime)(now.Subtract(_stopTime));
        timer.Begin();
    }
    else
    {
        DateTime now = DateTime.Now;
        _stopTime = ((TimeSpan)(now.Subtract(_startTime)));
    }
}

void btnClear_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
    _stopTime = new TimeSpan(0);
    _startTime = DateTime.Now;
    _Tick(this, null);
}

Deployment
Deploying Silverlight applications is easy. You upload the HTML page and all its resources along with a Silverlight assembly DLL to a web server. All the code executes on the client side so there are no special system requirements for the server. To deploy the stopwatch application, upload the following files:

• TestPage.html
• TestPage.html.js
• Silverlight.js
• Page.xaml
• assets/sport_bg.png
• assets/start_btn.png
• assets/stop_btn.png
• ClientBin/stopwatch.dll

You can check out a live example here.

A Great Browser-Based Rich Media Platform
Leveraging old (.NET) and new (Microsoft Expression Design, Microsoft Expression Blend), Microsoft offers a great platform for browser-based rich media applications. The programming experience is very intuitive and will be particularly familiar to any developer who has worked with the .NET platform before. Plus Microsoft provides all the necessary tools to separate UI design from implementation.

Silverlight's XAML-based declarative UI markup, which loads at run time, offers a high level of flexibility. When combined with high-performance .NET code, it becomes a serious competitor to the Adobe Flash platform.

The obvious issues facing Silverlight are adoption rate and platform support. By supporting Mac OS X and Firefox in the very first alpha release, Microsoft demonstrated its willingness to have Silverlight run on different operating systems and browsers.

AIR Stopwatch
Adobe AIR is a framework that allows developers to create desktop applications using web technologies (namely Flex and DHTML). AIR applications behave like normal desktop applications and have access to some native APIs and a local file system. The AIR framework also handles installation and uninstallation, access control, and automatic updates.

AIR currently is supported on Windows and Mac OS X. Adobe has promised Linux support after the final release.

The stopwatch application requires vector graphics so this example uses Adobe Flex rather than DHTML.

Setting Up the Development Environment
Follow these steps to set up the development environment for Adobe AIR:

1. Install Adobe AIR beta runtime.
2. Download Adobe Flex Builder 3 beta. Flex Builder 3 comes with built-in AIR support.

To create a new AIR project, launch Flex Builder and select New->AIR Project from the menu. Enter "stopwatch" as the project name. Click "Next" and then "Finish."

Building the UI from the Original Artwork
You can run the empty project by pressing Ctrl-F11. You should see something like Figure 5. By default AIR applications use system chrome.

Figure 5. Empty AIR Application

Start by downloading the accompanying AIR code download and extracting it into the "assets" subfolder within your project folder. Unlike Silverlight, Flex supports a variety of vector formats including SVG so you don't need to perform any conversion. Replace the default code in stopwatch.mxml with the code in Listing 5. The embed function allows you to import a resource and include it at build time.

Press Ctrl-F11 to run the code and make sure that the stopwatch UI shows up correctly. This is what I like about Flex: once you have the artwork, turning it into an application GUI is very easy. Flex Builder features a visual UI editor and many standard UI controls, but certain elements (such as SVG graphics) are not visible in the editor's default mode. (see Figure 6).

Figure 6. Flex Visual UI Editor

The stopwatch.mxml file sets the background color to transparent, but you can go even further with the display and make the stopwatch appear without the standard window frame. To do so, open stopwatch-app.xml, find the <rootContent> tag, and change the systemChrome attribute value to none and the transparent attribute value to true. Run the application again to see the effect. Use Alt-F4 to close the application.

Now it's time to add some code.

Implementing the Animation
Use the <mx:Script> tag to add ActionScript code inline to the MXML markup for animation, as shown in Listing 6.

The initApp() function should be called when the application is initialized. The _tick element is a timer event handler and subtractTime is a simplified time intervals math implementation.

Add the creationComplete attribute to the <mx:Application> tag to set up the callback function, which will be called when the application is started:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="500" height="350"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
borderStyle="none"
frameRate="60" 
creationComplete = "initApp()">

Flex doesn't provide built-in functions for text formatting and time interval manipulations so you have to implement them manually (see Listing 6).

Next, test the application to make sure it's working.

Adding the Interactivity
It would be nice to make the gadget "draggable" and make it close when a user double-clicks the Clear button. By default the <mx:Image> element doesn't handle double clicks, so first you should add a doubleClickEnabled attribute to the image (representing the Clear button) and set its value to true. Then you add the event handlers:

private function onClearDbl(evt:MouseEvent):void
{
    stage.window.close();
}
private function onMouseDown(evt:MouseEvent):void
{
    stage.window.startMove();
}

The close() method terminates the application, and startMove() adds support for dragging the interface.

Next, you assign the event handlers within the appInit() function:

this.bgBox.addEventListener(MouseEvent.MOUSE_DOWN,
    onMouseDown);
this.btnClear.addEventListener(MouseEvent.DOUBLE_CLICK,
    onClearDbl);

The addEventListener() method is used to assign an event handler. The same event can have multiple handlers.

Now the user can drag the application around the screen with a mouse and close it by double clicking the Clear button. To complete the application, add two more MOUSE_DOWN handlers for the Start/Stop and Clear buttons, respectively:

private function onStartStop(evt:MouseEvent):void
{
    _is_running = !_is_running;
    if (_is_running)
    {
        _startTime = subtractTime(new Date(), _stopTime);
        _tickTimer.start();
    }
    else
    {
        _tickTimer.stop();
        _stopTime = subtractTime(new Date(), _startTime);
    }
}
private function onClear(evt:MouseEvent):void
{
    _startTime = new Date();
    _stopTime = subtractTime(_startTime, _startTime);
    _tick(null);
}

Test the application again to make sure everything is working correctly. You might want to remove _tickTimer.start() from the initApp() function to prevent the stopwatch from starting the count automatically.

Deployment
The first step in deploying an AIR application is to export a project as an AIR Package. Use the menu Export… command and then select Adobe AIR-> Adobe AIR Package. Click "Next" and "Finish". This will create a stopwatch.air package, which is basically just a zipped folder containing the compiled application (stopwatch.swf) and the AIR configuration file (stopwatch-app.xml). Double-clicking the file will activate the AIR runtime, which will install the application. You can configure different properties of the application including name, publisher, and application icons by editing stopwatch-app.xml.

While you can deploy the .air package as is, Adobe offers an even better solution with its application badges. A badge is a small Flash clip embedded into the web page, which checks for the presence of an AIR runtime and if necessary downloads and installs it simultaneously with the installation of your application.

To use the badge, take badge.swf from the AIR SDK, embed it into the web page, and pass it several parameters including application name, .air package URL, framework version, and optional thumbnail image location. Adobe's AIR samples gallery has multiple examples, and this page features a stopwatch demo deployed with a badge.

Web Technologies for Desktop Development
Adobe AIR brings web technologies to desktop development very efficiently. Building rich and cross-platform user interfaces has always been a difficult task and it looks like Adobe finally nailed it. Thanks to Flex support for the SVG format, it was extremely easy to put together a UI for the example application—and the built-in support for transparent windows is amazing.

The most complex issue of any new platform is the chicken-and-egg paradox of whether platform adoption precedes runtime adoption or vice versa. AIR addresses this issue with its badge-driven deployment. This process, whether the user has the AIR runtime or not, is as good a solution as you can expect.

On the downside, ActionScript is not nearly as powerful as .NET or Java. However, as it gets more popular, it should improve.

JavaFX Stopwatch
JavaFX Script is a scripting language intended to simplify the creation of rich UIs for Java clients. It's implemented in Java and uses Java APIs for 2D and 3D graphics as well as UI controls. JavaFX Script supports a declarative syntax for UI definition, somewhat similar to the ones used by Microsoft in XAML and Adobe in MXML. However, it's not XML-based. In fact, it's a real programming language—not just a markup tool—so you can write an entire application in JavaFX Script.

Setting Up Development Environment
Follow these steps to set up your development environment for JavaFX Script:

1. Download and install JDK 6u1 with NetBeans 5.5.1.
2. Install the JavaFX plug-in from NetBeans packages manager.

JavaFX Script has no special project type, so to start you just create a regular Java project using File->New Project… from the menu (see Figure 7).

Figure 7. New Project

The new project will be empty. Enter "stopwatch" as the project name, uncheck "Create Main Class", and click "Finish" (Figure 8 shows the result).

Figure 8. Project Name

Next, right-click on <default package> and select New->File/Folder… (see Figure 9 for the result). The next time you add a file, the "JavaFX File" option should appear in the pop-up menu under New.

Figure 9. Adding JavaFX File

Now you have an empty JavaFX project. To enable your IDE to run it, right-click on the project name and chose "Properties". Select "Other" from the categories list, pick "JavaFX File" as the file type, and click "Next". Then enter "stopwatch" as the file name and click Finish (Figure 10 shows the result).

Figure 10. Adding JavaFX File Continued

To set the main JavaFX file in Project Properties, enter "stopWatch" into the "Arguments" field on the "Run" property sheet and click OK (see Figure 11 for the results).

Figure 11. Setting Main JavaFX File in Project Properties

Now paste the following minimal application code into the stopWatch.fx file:

import javafx.ui.*;
import javafx.ui.canvas.*;

Frame {
    title: "StopWatch"
	width: 260,	height: 280
	content:  []
	visible: true
}

Frame{} declares the application frame. You separate its attributes with either new lines or commas.

Press F6 to run the application (see Figure 12 for the window you'll render).

Figure 12. Minimal JavaFX Application

Building a UI from Original Artwork
First download the accompanying JavaFX Script code and extract it into the "assets" subfolder within your "src" folder. Next, make it display the stopwatch background and buttons by adding the following code inside the square brackets of Frame's content attribute:

Canvas {
    background: white
    content: 
        [
            // Background
            ImageView {
                transform: [Translate {x: 5, y: 5} ]
                image: Image { url: "assets/sport_bg.png"  }
            },
            // Start / Stop button
            ImageView {
                transform: [Translate {x: 197, y: 16.85} ] 
                image: Image { url: "assets/start_btn.png"  }
            },
            // Clear button
            ImageView {
                transform: [Translate {x: 190.5, y: 193.35}] 
                image: Image { url: "assets/clear_btn.png"  }
            },
        ]
}

You use the Canvas object to create a canvas on which you can render graphics. ImageView displays bitmap images (note how the transform attribute is used to position them).

Run the application to verify that it displays the background and buttons. Unfortunately Java and JavaFX Script offer no easy, cross-platform way to support transparent windows. So you can't easily get the nice custom-shaped window effect you did with AIR. Also, you still have to convert a hand and the background artwork into a vector format that JavaFX Script recognizes. You'll find a very good SVG-to-JavaFX converter online (naturally implemented in Java).

Working with the converter is easy. Just open the SVG file and the converter turns it into JavaFX Script source, renders it on the screen, and allows you to save the resulting code. I found only one bug: it doesn't convert the corner radius values used in SVG into the arcWidth/arcHeight attributes used in JavaFX Script, so you have to manually multiply all such values by a factor of two. See Figure 13 for a preview of the Stopwatch SVG artwork displayed within the converter. (Note that corner radiuses are smaller than they should be.)

Figure 13. SVG-to-JavaFX Converter

Converters normally create wrapper classes, which contain functions to access all nodes in the source SVG individually. For this simple demo you can just cut the necessary code from the wrapper class and insert in into your markup.

Next, add the items in Listing 7 to Canvas's content attribute in order to render the digital display and hands.

Note that the arcWidth and arcHeight attributes contain 2* multipliers. That's a small example of JavaFX Script's power. You can mix the code with markup at will (because markup is code too!). So in this example drawHand() is a function, which is defined in Listing 8. This code was copied from the output of the SVG-to-JavaFX converter and wrapped into the drawHand() function. You can efficiently reuse JavaFX UI elements this way.

These pieces combined give you the complete user interface for the stopwatch application. Press F6 to test it before going further.

Implementing the Animation
JavaFX Script offers an interesting approach for implementing dynamic UI behaviors. It uses the bind operator, which allows you to associate a variable or attribute with a certain expression so that every time the expression changes, the attribute changes too. Add the following code right below the original import operators and above the Frame object:

import java.lang.System;
import java.lang.Math;

class stopWatch {
    attribute _is_running: Boolean;
    attribute _startTime: Integer;
    attribute time: Integer;
    attribute timeString: String;
    attribute angleMinutes: Number;
    attribute angleSeconds: Number;
    
    attribute timer: Number;
    operation updateTime();
    operation start();
    operation stop();
    operation clear();
}

attribute stopWatch.angleSeconds = 0.0;
attribute stopWatch.angleMinutes = 0.0;
attribute stopWatch.timeString = "00:00:00.00";
attribute stopWatch._startTime = System.currentTimeMillis();
attribute stopWatch.time = 0;
attribute stopWatch._is_running = false;

var watch = new stopWatch();

With this code you declared the stopWatch class, assigned initial values to the attributes, and created an instance of the class. You can add operations to a class definition without implementing them.

Now you can bind some markup attributes to your class attributes as follows:

1. Change the content of the Text element from "00:00:00.00" to bind watch.timeString.
2. Add the rotate transformations to the second and minute hands, and bind the rotation angles to watch.angleSeconds and watch.angleMinutes, respectively:

   
   // Seconds hand
   Group {
       transform: [Translate{x: 122.38, y: 122.38}
                   Rotate{angle: bind watch.angleSeconds}]
       content: [ drawHand()  ]
   },
   // Minutes hand
   Group {
       transform: [Translate{x: 122.38, y: 75.65}, Scale{x: 0.286, y: 0.286}
                   Rotate{angle: bind watch.angleMinutes}]
       content: [ drawHand()  ]
   },
   

   Square brackets denote a series of objects assigned to the attribute. In this case you applied several transformations simultaneously.

Try altering the initial values and then running the application to see that the UI changes as you modify class attributes.

Now you need a timer. The timer implementation involves creating the attribute (which changes its value periodically using the dur operator), adding a trigger (which fires when that attribute changes), and implementing the handler code within that trigger. To that end, add the following code below the last attribute initialization line:

stopWatch.timer = bind [1..50] dur 1000 linear
while _is_running
continue if true;

trigger on stopWatch.timer = value {
    if (_is_running) {
        time = System.currentTimeMillis() - _startTime;
        updateTime();
    }
}

operation stopWatch.updateTime() {
    var hours: Integer = Math.floor(time / 3600000);
    var rem: Integer = time % 3600000;
    var minutes: Integer = Math.floor(rem / 60000);
    rem %= 60000;
    var seconds: Integer = Math.floor(rem / 1000);
    var milliseconds: Integer = rem % 1000;

    angleMinutes = minutes * 30 + seconds * 0.5;
    angleSeconds = seconds * 6 + milliseconds / 1000 * 6;

    timeString = "{hours format as <<00>>}:{minutes format as <<00>>}:{seconds 
        format as <<00>>}.{milliseconds/10 format as <<00>>}";
}

Your timer triggers display updates 50 times per second. The updateTime() operation uses JavaFX Script's format as operator to format digital display output. The operator supports formatting using conventions of the Java classes java.text.DecimalFormat, java.text.SimpleDateFormat, and java.util.Formatter. Curly brackets allow you to include the code within literal strings. Although a bit unusual, the syntax is very efficient.

Change the initial value of the _is_running attribute to true and test the application to verify that the timer is working.

Adding the Interactivity
First add the implementations for the start(), stop(), and clear() operations:

operation stopWatch.start() {
    _is_running = not _is_running;
    if (_is_running) {
        _startTime = System.currentTimeMillis() - time;
    } else {
        time = System.currentTimeMillis() - _startTime;
    }
}
operation stopWatch.stop() {
    _is_running = false;
    clear();
}
operation stopWatch.clear() {
    _startTime = System.currentTimeMillis();
    time = 0;
    updateTime();
}  

Note that the logical not operator uses not notation, which is different from Java and C++, where you use an exclamation point.

Next, add the appropriate event handlers to the Start/Stop and Clear buttons:

// Start / Stop button
ImageView {
    transform: [Translate {x: 197, y: 16.85} ] 
    image: Image { url: "assets/start_btn.png"  }
    onMousePressed: operation(event) {
        watch.start();
    }
},
// Clear button
ImageView {
    transform: [Translate {x: 190.5, y: 193.35}] 
    image: Image { url: "assets/clear_btn.png"  }
    onMousePressed: operation(event) {
        watch.clear();
    }
},

To set an element's event handler you assign the necessary operation to the appropriate attribute of the element. Mouse event handlers must have one argument, so you wrap the stopWatch class methods inside an in-place operation definition.

Finally, add the following attribute to the Frame element, which directs the application to call the onClose handler when the window is closed:

onClose: operation() {
        watch.stop();
        delete watch;
    }

This assures the application shuts down correctly and prevents it from hanging on exit. Otherwise when a user closes the application while it's running, the GUI thread will exit but the timer thread could hang and prevent the runtime from unloading correctly.

Deployment
Building a JavaFX project with NetBeans produces a stopwatch.jar package, which you can deploy with Java Web Start. The process involves the following steps:

1. Create a JNLP file with an application description.
2. Sign the .jar files (when deploying your JavaFX application, you have to sign javafxrt.jar and swing-layout.jar).
3. Upload the .jar and .jnlp files to your web server.
4. Configure your web server to recognize the .jnlp extension:

   
   AddType application/x-java-jnlp-file JNLP
   

5. Publish the link to the .jnlp file you uploaded.

(The JFX Wiki has a step-by-step guide for deploying JavaFX applications using Java Web Start.)

Click here for a live example of the JavaFX Stopwatch demo deployment.

Bringing Richness to Java UIs
In a sense, Java is the oldest internet applications platform of the three; it's just been missing the "rich" part. JavaFX Script is a big leap in that direction:

• Its declarative syntax for UI markup is done nicely, and its incremental evaluation is convenient for describing complex UIs concisely.
• The SVG-to-JavaFX conversion tool allows efficient import of artwork in the SVG format, which Adobe Illustrator supports. This enables you to split projects between designers and developers—a critical feature of any competitive RIA platform.
• Also notable are the ability to access the power of Java APIs and the compatibility for real cross-platform deployment.

The bad news is it's slow. Classical Java often feels slow but JavaFX Script is even slower. This might spoil all its potential advantages, especially when it comes to highly dynamic, rich user interfaces.

Performance aside, however, JavaFX Script seems to be well positioned against Adobe AIR but it loses out in the ease-of-deployment and convenience departments. JavaFX Script is more hardcore—it offers the experienced programmer more sugar, but if you just want quick results AIR probably is a better choice.

Distinct Approaches, Common Goals
As you no doubt have gathered at this point, Silverlight, AIR, and JavaFX are very different products.

Silverlight is Microsoft's very strong response to Adobe Flash. It allows you to build rich media applications that run in the browser. Microsoft has a tradition of great development tools so Silverlight definitely will appeal to those already building on Microsoft platforms, but it also will attract new developers who are not satisfied with Flash. The single greatest obstacle Silverlight faces is adoption, but Microsoft has a secret weapon called Windows Update, which could help.

Adobe AIR is an attempt to democratize desktop software development by enabling web developers to build applications for the desktop. AIR allows Flex and DHTML applications to run outside of the browser—both online and offline—and interact directly with system hardware. Adobe also created an efficient, Flash-based deployment scheme for AIR, which makes installation transparent to the end user. Both web and desktop developers should pay attention to AIR.

It would be logical for Microsoft to create something similar to AIR based on Silverlight. I think they are not too far from that and it could be a killer platform.

JavaFX Script allows developers to build great-looking user interfaces for Java in a very efficient way. It should help promote Java as a cross-platform, client-side development platform. With JavaFX Script, you can separate UI development from UI implementation, which enables you to build RIAs in Java. However, the old client-side Java problems of slow performance and inconvenient deployment are still evident. The Java runtime is huge when compared with either Silverlight's or AIR's, and the Java Web Start user experience is far from perfect.

Yet as different as these platforms are, they share certain key attributes:

• They support declarative GUI definitions that can be efficiently separated from the code, enabling designers to build GUIs independently from the developers who write the code. In this sense they adopt the best practices of web developers.
• They all (except for DHTML AIR) support rich presentations with vector-based graphics and animation.
• They are to a large degree cross platform.

The RIA is how applications of tomorrow will look—rich, flexible, connected, and cross-platform. Silverlight, AIR, and JavaFX are using different approaches to get developers of all kinds there today.