James Weaver’s JavaFX Blog

You Say You Want a (RIA) Revolution?

2008-10-03T14:13:36-04:00

"You say you want a revolution
Well you know
We all want to change the world"
- John Lennon and Paul McCartney

Written by Lennon and McCartney and released on the B-side of The Beatles' Hey Jude single record 40 years ago, these lyrics to "Revolution" have been a rallying cry for causes and corporations. As I was checking referrers to this blog today, I noticed that a fairly new site name RIA Revolution contains a link to my Some Perspective in JavaFX post. According to their About page, "RIA Revolution is a community site for all things RIA [Rich Internet Applications]. The site features news, stories, podcasts, screen casts and videos to keep you updated about the happenings in the RIA World." As I mentioned, it's a new site, but I'm excited about its "revolutionary" tone, and about watching it continue to be populated with "all things RIA".

On that note, a couple of today's RIA revolutionaries are Stephen Chin and Keith Combs. They are co-conspirators on WidgetFX, an open-source desktop widget platform written from the ground up in the JavaFX Script language. Here's a quote from Stephen Chin that resonates well with what I've expressed on this blog:

"The biggest setback for user interface design in the history of modern computing was the marketing push for thin-client, web-based UIs. The whole software industry has been shackled by browser incompatibilities, Javascript limitations, and a document-centric model for web applications. It has taken a decade of engineering and framework design in HTML and Javascript to match what desktop client technology could easily do in the 80s."

2008-2009 promises to be a revolutionary time in Web/Internet application development. The upcoming release of JavaFX SDK 1.0 yet this fall, 2008, will help enable the revolution.

There is an area in which I'd really appreciate some RIA community discussion and feedback: Web 2.0 has a fairly well defined style, captured in documents such as Ben Hunt's Web 2.0 how-to design guide. Should there be a unique style for RIAs, or should it be a variation of Web 2.0 style guidelines, or should we just see if a style evolves as developers and designers create RIAs at an increasing rate?

Food for thought, please communicate yours,

Jim Weaver
JavaFXpert.com

Some Perspective in JavaFX

2008-09-29T23:22:01-04:00

I've been asked to post the slides for the JavaFX presentation that I delivered at JavaZone 2008. Because the presentation itself was written in JavaFX, I've bundled it up so that you can run it from a Java Web Start link. First, however, I'd like to show you some screenshots and provide an explanation of what you'll be looking at:

As shown above, the presentation (entitled Vikings and Wizards in JavaFX) is shown on the faces of a rotating cube. The Norwegian Java Users Group, named javaBin, does a great job in organizing the JavaZone conference, which also explains the graphics on the first "slide".

To view the next or previous slide, you can click the image buttons that have a right or left pointing triangle, respectively. This will rotate the cube, which is accomplished using the PerspectiveTransform effect, located in the javafx.scene.effect package.

Some of the slides are "live" (running JavaFX functionality within them). For example, you can interact with the TetrixJFX game, the "Are You A Viking" wizard, the custom node examples (MenuNode and DeckNode), and the morphing example. For the latter, just click on the yellow circle and watch the morphing begin! To see more information about these applications, visit the blog posts for TetrisJFX, Vikings and Wizards, Rolling Your Own Custom Nodes, and Getting Decked

By the way, the presentation runs in an undecorated Frame, which means that there is no border, Close box, etc. I make my desktop background black and minimize any open windows before presenting so that the cube appears to be rotating in a big dark space. As soon as the graphics designer (Mark Dingman of Malden Labs) gets a chance to create a cool looking graphical Close box, I'll put it in the application. For now, however, you'll have to end the application manually. You'll need JRE 6 to run this, and Java SE 6 update 10 will give you a faster deployment experience. Go ahead and give it a whirl by clicking the Java Web Start button below!

Note: Please keep in mind that this is running with the JavaFX Preview SDK which has not been optimized for performance. Behavior and performance of the PerspectiveTransform on Vista, for example, are definitely sub-optimal at the moment. These are known issues that the JavaFX GUI team is confident have already been corrected in the upcoming JavaFX SDK 1.0 release.

Regards,

Jim Weaver
JavaFXpert.com

Using the Java Deployment Toolkit with JavaFX Applets

2008-09-19T00:26:56-04:00

First, let me apologize for resurrecting the very humble JavaFX program shown below, but I want to keep this example very succinct. This will enable you to use it as "starter code" for JavaFX applet deployment. Note: To see more functional JavaFX programs, please see articles in the JFX Custom Nodes category.

Note: Thanks to reader "mbien" (see comments) for pointing our that the colors of the original applet in this post were hideous (my words). I then consulted graphics designer Mark Dingman of Malden Labs who gave me a graphical mock-up from which I created the above applet. Here's the code for this applet, updated for the JavaFX SDK preview:

/*
 *  BindToFunctionApplet.fx - A compiled JavaFX program that demonstrates
 *                            how to create JavaFX applets.
 *                            It also demonstrates binding to a function.
 *
 *  Developed 2008 by Jim Weaver (development) and Mark Dingman (graphic design)
 *  to serve as a JavaFX Script example.
 */
package com.javafxpert.bind_to_function;

import javafx.application.*;
import javafx.ext.swing.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.scene.transform.*;
import java.lang.Math;

class CircleModel {
  attribute diameter:Integer;
  
  bound function getArea():Number {
    Math.PI * Math.pow(diameter / 2, 2);
  }
}

Application {
  var cModel = CircleModel {};
  var componentViewRef:ComponentView;
  var stageRef:Stage;
  stage: 
    stageRef = Stage {
      var labelFont = Font {
        name: "Sans Serif"
        style: FontStyle.PLAIN
        size: 32
      }
      fill:
        LinearGradient {
          startX: 0.0
          startY: 0.0
          endX: 0.0
          endY: 1.0
          stops: [
            Stop { 
              offset: 0.0 
              color: Color.rgb(0, 168, 255) 
            },
            Stop { 
              offset: 1.0 
              color: Color.rgb(0, 65, 103) 
            }
          ]
        }
      content: [
        Circle {
          centerX: 250
          centerY: 250
          radius: bind cModel.diameter / 2
          fill:
            LinearGradient {
              startX: 0.0
              startY: 0.0
              endX: 0.0
              endY: 1.0
              stops: [
                Stop { 
                  offset: 0.0 
                  color: Color.rgb(74, 74, 74) 
                },
                Stop { 
                  offset: 1.0 
                  color: Color.rgb(9, 9, 9) 
                }
              ]
            }
        },
        Text {
          font: labelFont
          x: 30
          y: 70
          fill: Color.BLACK
          content: bind "Diameter: {cModel.diameter}"
        },
        Text {
          font: labelFont
          x: 260
          y: 70
          fill: Color.BLACK
          content: bind "Area: {%3.2f cModel.getArea()}"
        },
        componentViewRef = ComponentView {
          transform: bind 
            Translate.translate(40, stageRef.height - 30 -
                                   componentViewRef.getHeight())
          component:
            Slider {
              minimum: 0
              maximum: 400
              preferredSize: bind [stageRef.width - 80, 20]
              value: bind cModel.diameter with inverse
            }
        }
      ]
    }
}

Why Use the Java Deployment Toolkit for Java Applets?

According to Sun's Java Deployment Toolkit overview page, "Desktop clients have a wide variety of Java Platforms installed, from the Microsft VM to Sun's latest Java SE 6 updates. They run various operating systems from Sun, Microsoft, Apple, Red Hat, and others, and are connected to the internet at a wide range of connection speeds. How are content providers to deliver Java content to all of these clients with the best possible user experience?

Various sources have published JavaScript techniques for detecting and deploying the Java Platform for use by Java Plug-In applets and Java Web Start applications. These scripts generally have serious limitations and fail to support the varied combinations of browser, OS, and configuration options found on today's clients.

The Java Deployment Toolkit allows developers to easily deploy applets and applications to a large variety of clients with JavaScripts. It also provides advice on using some of the most powerful features available in Java Web Start and Java Plug-In, and an outline of the differences between these two deployment vehicles."

In a nutshell, the Java Deployment Toolkit is a JavaScript library maintained by Sun and always available at runtime by your HTML code. This library has several methods that perform tasks such as sensing Java-related infrastructure and installing the JRE on client machines. We'll use one of these methods, namely runApplet, to run a JavaFX applet with a specified minimum JRE version. Here's the HTML and JavaScript code I'm using to deploy today's example applet:

<html>
<script src="http://java.com/js/deployJava.js"></script>
<script>
  var attributes = {codebase:'http://jmentor.com/JFX/BindToFunctionApplet',
    code:'javafx.application.Applet.class',
    archive:'BindToFunctionApplet.jar, javafxrt.jar, Scenario.jar, javafxgui.jar, javafx-swing.jar',
    width:500, height:500, java_arguments:'-Djnlp.packEnabled=true'};
  var parameters = {"ApplicationClass":"com.javafxpert.bind_to_function.BindToFunctionApplet",
                    "draggable":"true"};
  var version = '1.6.0' ;
  deployJava.runApplet(attributes, parameters, version);
</script>
</html>

Notice that the above code enables dragging the applet onto the desktop, as well as using Pack200 formatted JAR files, if the client machine has Java SE 6 update 10 installed. Give the applet a whirl to see its deployment behavior on your machine. By the way, according to the Java SE 6 Update 10 plug-in docs, "by default, the gesture to drag the applet out of the web browser is Alt + Left click + Drag."

Thanks,
Jim Weaver
JavaFXpert.com weblog