Creating Compiled JavaFX Script Applets - Method Two

Important Note:  As of the JavaFX SDK Preview, this article is technically outdated.  Please see the Using the Java Deployment Toolkit with JavaFX Applets article for an updated example of creating and deploying JavaFX Applets.

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:

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

Comments

[Sunite]

Get the best out os the best by going to http://w-aw.com , get WareZ for free, just search, or go to one of the topics and get that thing. Its ALL FREE! Scripts like Able Dating 2.4 NULLED! is NOW! available. Also the latest version of vBulletin and mods are now available. WaW Info :- 14000+ FREE SCRIPTS, 3400+ FREE TEMPLATES, 9000+ FREE COMPONENTS, 1000+ FREE MOVIES, 1800+ FREE TOOLS, 7400+ FREE ICONS, 3200+ FREE SONGS, 16000+ FREE APPLICATIONS, 70000 NEWS REPORT, 1900 SEO TOOLS, 8000 GAMES FOR PC, PS2/3, XBOX, XBOX LIVE, MOBILE, PSP AND LOADS MORE. Http://w-aw.com

[Jim Weaver]

Matthew Ryan,

Thanks for your great feedback, and yes, my recent trip to Sydney was very enjoyable!

[Matthew Ryan]

Hey James,

I think that to bring life back to Applet development and JavaFX development for Applets the tools need to get a little better. Or at least as good as they used to be.

When I worked with AWT/Swing day to day I was using JBuilder and it was great. (JBuilder 2006 and before, not this Eclipse based one.) You could hack code in the 'code view', switch to 'design view' and see your changes in the 'design view', obviously make changes in the 'design view' and see them in the 'code view'. And if you were working with an Applet project just run the project and it would fire up the AppletViewer so you could see the result.

Working with Applets need to get back to this and a bit better.

Signing Jars need to be something to configure in Project Properties and happen behind the scenes. After which an FTP of the build directory should be as much as you need to get your 'good stuff' up on the web.

I work with Adobe Flex day to day and it's that easy. Code and test locally and FTP up the build directory.

I guess my gripe is with Jar signing. It's one step too many.

Anyway, really enjoying JavaFX, on the desktop. I'm still to get productive with JavaFX for Applets.

All the best from down under. Hope your recent visit was good.

Regards,

Matthew

p.s. It's possible you can do all this in NetBeans and I just haven't looked hard enough. I have few opportunities to touch Java at the moment.

[Autoversicherung]

This is my Favorit Blog. Greatfull Report. Best Regards Autoversicherung

[maishat sana]

Hello,

I am new to javafx and i created a simple javafx application in netbeans. I want to know where the class files for *.fx files are created when the project is build.And how to run the .fx file through commandline using javafxc

thanks

[Thank you]

JavaFX is great and your blog is definitely the best JavaFX blog I know. I read it every day. James, thank you for your enthusiasm.