Develop and Run Your First JavaFX Script Program in the Next Few Minutes

There are several environments in which you can develop and run JavaFX Script programs. I’d like to help you become a JavaFX Script programmer in the next few minutes, so I’m going to show you the fastest route that I know of to get there, which includes using a tool that Sun created called JavaFXPad.

1. You’ll need the Java Runtime Environment (JRE) 1.5 or higher (Mac OS requires the latest JRE 1.5 release or JRE 1.6)
2. Run JavaFXPad straight from the Internet by accessing the following URL: http://download.java.net/general/openjfx/demos/javafxpad.jnlp. This will launch JavaFXPad via Java Web Start, which is a Java application deployment technology. Each time you access this URL it will check for the latest version of JavaFXPad, download it, and automatically execute it.
3. Cut and paste the following code into JavaFXPad, replacing the code that is already there.

/*
 *  HelloJFX.fx - A JavaFX Script "Hello World" style example
 *
 *  Developed 2007 by James L. Weaver (jim.weaver at jmentor dot com)
 */
package jfx_book;

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

Frame {
  title: "Hello World-style example for JavaFX Script"
  height: 100
  width: 400
  content:
    Canvas {
      content:
        Text {
          font:
            Font {
              faceName: "Sans Serif"
              style: BOLD
              size: 24
            }
          x: 10
          y: 10
          content: "Hello JavaFX Script Developer!"
        }
    }
  // Show the Frame on the screen
  visible: true
}
// End of listing




Let’s walk through the code:

Comments

There are two types of comments in JavaFX: multiline comments and single-line comments. Multiline comments begin with the two characters /* and end with the same two characters in reverse order (*/). JavaFX will ignore anything in between. The beginning of the listing shows an example of a multiline comment. Single-line comments begin with the two characters (//). Anything that follows these two characters on a single line will be ignored. An example of a single-line comment is shown near the bottom of the code listing.

The package Declaration

JavaFX packages are analogous to folders in a file system. They provide a way to logically organize the source code files that comprise an application. The package in the preceding example is jfx_book, which indicates that the HelloJFX.fx source code is located in a folder named jfx_book. Package names may consist of more than one node (e.g., com.jmentor.jfx_book), in which case the source code file would be located in a folder named jfx_book that is located in a folder named jmentor, and so on. In fact, it is customary for a package name to begin with the domain name of the company or organization that developed the application (in reverse order, beginning with the top-level domain name, such as com or org).

The package declaration is optional, but it is a very good practice to use it in all but the most trivial programs. If used, the package statement must be at the top of the source code (excluding whitespace and comments).

import Statements

JavaFX programs typically use libraries that consist of JavaFX (and optionally Java) code. In this example, each import statement indicates the location (package) of the JavaFX classes that the code in the rest of this HelloJFX.fx file depends on for outputting widgets and drawing to the screen. An import statement can end with an asterisk (*), indicating that the program may use any of the classes in the package. An alternative form is to specifically name each class being used, as in the following example:

import javafx.ui.Frame;

All but the most trivial applications should organize their source code via package declarations. A source code file uses import statements to indicate its use of classes contained in source code files that have a different package statement.

An import statement may appear anywhere in your JavaFX source code, and whenever one is encountered, the imported JavaFX file is run as deemed appropriate.

Declarative Code That Defines the User Interface

One of the most exciting features of JavaFX is its ability to express a graphical user interface (GUI) using a simple, consistent, and powerful declarative syntax. Declarative programming, as opposed to procedural programming, consists of a single expression (rather than multiple expressions that are executed sequentially). JavaFX supports both types of programming, but it is good practice to use declarative syntax whenever possible.

In this example, the entire program (excluding the package and import statements) is declarative, in that it consists of one expression. This declarative expression begins by defining a Frame object followed by an open curly brace, and ends with the matching curly brace in the last line of the program. Nested within that are attributes of the Frame object, including the content attribute, which is assigned a Canvas widget (GUI component). Nested within that is the content attribute of the Canvas widget, which is assigned a Text object, and so on.

Declarative code automatically creates an instance (also known as an object) of each JavaFX class in the expression. It also assigns values to the attributes of the new instance. For example, look at the portion of code that creates an instance of the Font class:

Font {
  faceName: "Sans Serif"
  style: BOLD
  size: 24
}

This code creates an instance of the JavaFX Font class, and assigns the value Sans Serif to the faceName attribute of the new Font instance. Notice that the attribute name is always followed by a colon (:), which in JavaFX declarative syntax means “assign the value of the expression on the right to the attribute on the left.” These same concepts are true for all of the classes (Frame, Canvas, and Text) in this script. Let’s look at each of these classes individually.


Using the Frame Class

A Frame represents a GUI window, which has its own border, and can contain other GUI components within it.

Note: In this trivial HelloJFX.fx example, as shown in the graphic above, JavaFXPad renders the Frame object as a rectangular area within the output area, as opposed to a separate window. In slightly less trivial JavaFX programs, JavaFXPad renders the Frame object as a separate window.

As with any class, the Frame class has a set of attributes. The set of attributes that Frame widgets have, as shown in the following code snippet from the listing, are as follows:

1. A title that appears in the title bar of the window (again, not shown by JavaFXPad in this trivial program).
   
2. A height and width (in pixels) that determine how high and wide the window will initially be.  
3. A content attribute that defines what the contents of the Frame object will be. In this case, the Frame object will contain a Canvas widget on which you’ll draw a Text object that contains the message to be displayed.
4. A visible attribute (after the closing brace of the Canvas widget) that controls whether the Frame object is to be shown on the screen just yet.

Frame {
  title: "Hello World-style example for JavaFX Script"
  height: 100 width: 400 content:
  ...some code omitted...
  // Show the Frame on the screen
  visible: true
}

Creating String Literals

One of the data types that JavaFX has is the String, which consists of zero or more characters strung together. As shown in the following title attribute of the Frame object, a String literal is defined by enclosing a set of characters in double quotes:

title: "Hello World-style example for JavaFX Script"

Alternatively, String literals may be enclosed in single quotes.

Using the Canvas GUI Widget

The purpose of the Canvas widget is to draw two-dimensional (2D) graphics, including lines, shapes, and text. It is a JavaFX class, but I’m referring to it as a widget here because it is a subclass of the JavaFX Widget class. As shown following, the content attribute of the Canvas widget indicates what will be drawn on the canvas, in this case some text:

Canvas {
  content: Text {
  …some code omitted…
  }
}

Drawing Text

To draw some text on the canvas, you use the Text class, supplying as attributes the x and y location (in pixels) at which the upper left-hand corner of the text should appear. The content attribute of the Text class contains the string that will be drawn, and the font attribute specifies the appearance of the text that will be drawn.

Text {
  font: Font {
    faceName: “Sans Serif”
    style: BOLD
    size: 24
  }
  x: 10
  y: 10
  content: “Hello JavaFX Script Developer!”
} 

Defining Fonts

And finally, at the innermost level of the declarative script that defines the UI for this application, we find the Font class (see the preceding code snippet). This class is used to specify the characteristics of the Text widget using the faceName, style, and size attributes shown.

Summary

Hopefully, you've achieved the objective of creating your first JavaFX Script program.  Feel free to play with the source code in the JavaFXPad window and watch the effects (for example, change the values assigned to the x, y, or content attributes of the Text object). Some future posts will build on the knowledge that you've gained in this one.  This post by the way, is an excerpt from my recently published book entitled "JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications", which is published by Apress.

Regards, and please provide feedback on the sort of JavaFX-related content that you'd like to see in this blog.

James L. (Jim) Weaver

 

Comments

[Thejesh GN]

javafxpad.jnlp is not signed. I am getting security warning!

[Jim Weaver]

Pavel,

Wow. That behavior in your http://link.imgshare.us/a1jo7Q screenshot is bizarre. I'm going to write a post shortly that discusses downloading the Project OpenJFX code, including JavaFXPad, to run locally. I'll be interested if the behavior on your machine improves when running JavaFXPad locally instead of via JNLP.

Regarding the cut and paste from this blog's code samples into JavaFXPad -- I'll see if there's a better way to represent code in this blog software that includes linefeeds.

[Pavel]

Hi,

I have run the demo again. This time the FXPad and the canvas on the desktop where not repainting like in this image http://link.imgshare.us/a1jo7Q . After about 20-30 seconds (may depend of moving other windows on top of FXPad) the FXPad window and the canvas is repainting (although the canvas is not painted correctly). I call the canvas the rectangle in the left up corner of the screenshot.

Putting another piece of code in the FXPad will work ok but will not remove the painted "canvas" from the desktop: http://link.imgshare.us/a1jo3T

Other minor issue:
Copy pasting code from current blog page get's on a single line in the FXPad. Posting from https://openjfx.dev.java.net/Learning_More_About_JavaFX.html is ok.

Thank you,
Pavel

[Jim Weaver]

Pavel,

Out of curiosity, did you/could you try that again and see if you get the same results?

Thanks,
Jim Weaver