Jim has posted 66 posts at DZone. You can read more from them at their website. View Full User Profile

Creating Compiled JavaFX Script Applets - Method Two

03.10.2008
| 7262 views |
  • submit to reddit

In the previous post, I showed you one of the two ways that the JavaFX Script compiler team has provided for creating compiled JavaFX Script applets.  Today's example program demonstrates the second 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:

Bindtofunctionapplet2

This method of creating a compiled JavaFX Script applet is more "JavaFX-like" than the method that I showed you in the previous post.  Using this approach, we:

  • Declaratively express the JavaFX applet using the Applet object as the top level (see BindToFunctionApplet2.fx below).
  • Assign javafx.ui.Applet to the code attribute of the applet element in the HTML file (see BindToFunctionAppletPage2.html below).
  • Specify an AppletClass parameter with the name of the class in which the applet is expressed (in this case BindToFunctionApplet2, see the HTML file below). 

Also, this approach requires that the applet be signed, so in this post I'm going to walk you through the process of creating a JAR file that contains the applet classes, and signing each of the JAR files.

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.

/*
* BindToFunctionApplet2.fx - A compiled JavaFX program that demonstrates
* a "JavaFX-like" 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;

class CircleModel {
attribute diameter:Number;

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

Applet {
var cModel = CircleModel {}
content:
BorderPanel {
center:
Canvas {
content: [
Circle {
cx: 240
cy: 250
radius: bind cModel.diameter * 2
stroke: Color.PURPLE
strokeWidth: 1
fill: Color.MAGENTA
},
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 BindToFunctionAppletPage2.html) that runs the applet:

<html>
<body>
<applet code="javafx.ui.Applet" width=480 height=560
archive="javafxrt.jar,Scenario.jar,BindToFunctionApplet2.jar">
<param name="AppletClass" value="BindToFunctionApplet2">
</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 BindToFunctionApplet2.fx

As I mentioned previously, you'll need to create a JAR file that contains the class files for this applet.  To do this, I used the following command at my operating system prompt:

jar cvf BindToFunctionApplet2.jar BindToFunctionApplet2*.class

You'll also need to sign the JAR file that contains the applet classes, as well as the javafxrt.jar and Scenario.jar files.  To do this, you'll need a signature key, which you can create with the following command:

keytool -genkey -alias jfx -dname "CN=John Doe, O=JFX Inc." (continued on next line)
  -validity 9999 -keystore jfx.keystore -keypass keyPassword -storepass storePassword

Use the following commands to sign the JAR files:

jarsigner -keystore jfx.keystore -verbose -keypass keyPassword (continued on next line) 
 
-storepass storePassword BindToFunctionApplet2.jar jfx
jarsigner -keystore jfx.keystore -verbose -keypass keyPassword (continued on next line)
 
-storepass storePassword javafxrt.jar jfx
jarsigner -keystore jfx.keystore -verbose -keypass keyPassword (continued on next line)
 
-storepass storePassword Scenario.jar jfx

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

appletviewer BindToFunctionAppletPage2.html

Enjoy, and please post a comment if you have any questions!

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

Published at DZone with permission of its author, Jim Weaver.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Serkan Gunes replied on Wed, 2008/03/12 - 4:57am

Am I the only who thinks JavaFX has a horrible syntax?

Rie Maxi replied on Mon, 2008/07/28 - 5:17pm

Applet{

   content:

      BorderPanel{

 

     }

}

 

The above code doesn't compile, because the compiler can not find any property called "content" on the applet class

Jim Weaver replied on Mon, 2008/07/28 - 6:12pm in response to: Rie Maxi

riemaxi,

This is an older example and some of the classes have changed.  The JavaFX SDK Technology Preview is due out at the end of July, 2008 (just a few days from now), and it should have an example of how to create a JavaFX applet.  You will be able to access the Technology Preview Release at http://JavaFX.com

 

Thanks,

Jim Weaver

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.