Creating Compiled JavaFX Applets - Method One (of Two)

DZone's Guide to

Creating Compiled JavaFX Applets - Method One (of Two)

James Weaver

Mar. 09, 08 · Java Zone ·

Free Resource

Like (0)

Comment (1)

Save

{{ articles[0].views | formatCount}} Views

Java-based (JDBC) data connectivity to SaaS, NoSQL, and Big Data. Download Now.

The JavaFX Script compiler team has provided two ways of creating compiled JavaFX Script applets. Today's example program demonstrates one of these ways, by converting the Binding to a Function example into a compiled JavaFX Script applet. Here's a screenshot of the JavaFX Script applet, running in Firefox 3:

This way of creating a JavaFX Applet is more "Java-like" in that it uses the approach of extending the javafx.ui.Applet class. Notice that it overrides a couple of applet life-cycle functions to demonstrate that ability. Compare the following code with the Binding to a Function example, the major difference being the absence of the Frame object. It isn't required since the applet provides its own UI container.

/*
 *  BindToFunctionApplet1.fx - A compiled JavaFX program that demonstrates
 *                             one way of creating compiled JavaFX applets.
 *                             It also demonstrates binding to a function.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a JavaFX Script example.
 */

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.Math;
import java.lang.System;

public class BindToFunctionApplet1 extends Applet {
  public function start(): Void {
    System.out.println("BindToFunctionApplet1.start()");
  }
  public function stop(): Void {
    System.out.println("BindToFunctionApplet1.stop()");
  }
}

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

BorderPanel {
  var cModel = CircleModel {}
  background: Color.WHITE
  center:
    Canvas {
      content: [
        Circle {
          cx: 240
          cy: 250
          radius: bind cModel.diameter * 2
          stroke: Color.PURPLE
          strokeWidth: 1
          fill: Color.CYAN
        },
        Text {
          font: 
            Font {
              face: FontFace.SANSSERIF
              style: FontStyle.BOLD
              size: 24
            }
          x: 20
          y: 10
          stroke: Color.RED
          fill: Color.RED
          content: bind "Diameter: {cModel.diameter}"
        },
        Text {
          font: 
            Font {
              face: FontFace.SANSSERIF
              style: FontStyle.BOLD
              size: 24
            }
          x: 240
          y: 10
          stroke: Color.RED
          fill: Color.RED
          content: bind "Area: {%3.2f cModel.getArea()}"
        }
      ]
    }
  bottom:
    Slider {
      min: 0
      max: 100
      border: 
        TitledBorder {
          title: "Diameter:"
        }
      value: bind cModel.diameter with inverse
      minorTickSpacing: 5
      majorTickSpacing: 10
      paintTicks: true
      paintLabels: true
      labels: [
        SliderLabel {
          value: 0
          label: 
            SimpleLabel {
              text: "0"
            }
        },
        SliderLabel {
          value: 50
          label: 
            SimpleLabel {
              text: "50"
            }
        },
        SliderLabel {
          value: 100
          label: 
            SimpleLabel {
              text: "100"
            }
        }
      ]
    }
}

Supplying an HTML File to Run the Applet

Here is the HTML file (that I've named BindToFunctionAppletPage1.html) that runs the applet:

<html>
  <body>
    <applet code="BindToFunctionApplet1" width=480 height=560
     archive="javafxrt.jar, Scenario.jar">
    </applet>
  </body>
</html>

You'll need to put the JAR files (shown in the archive tag above) in the same directory as the HTML file. You can get these files from the compiler download in the dist/lib directory. To compile this applet, I used the -target parameter so that it will run within browsers that have JRE 5 or later:

javafxc -target 1.5 BindToFunctionApplet1.fx

To execute this compiled JavaFX Script applet, either open the BindToFunctionAppletPage1.html file in a browser, or use appletviewer as shown below:

appletviewer BindToFunctionAppletPage1.html

Enjoy, and please post a comment if you have any questions! The next post will cover the other way of creating compiled JavaFX Script applets.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Connect any Java based application to your SaaS data. Over 100+ Java-based data source connectors.