Introduction to JavaFX Script




by Anghel Leonard, OnJava.com


What Is JavaFX?

In the spring of 2007 Sun released a new framework called JavaFX. This is a generic name because JavaFX has two major components, Script and Mobile, and, in the future, Sun will develop more components for it.

The core of JavaFX is JavaFX Script, which is a declarative scripting language. It is very different from Java code, but has a high degree of interactivity with Java classes. Many classes of the JavaFX Script are designed for implementing Swing and Java 2D functionalities more easily. With JavaFX Script you can develop GUIs, animations, and cool effects for text and graphics using only a few straightforward lines of code. And, as a plus, you can wrap Java and HTML code into JavaFX Script.

The second component, JavaFX Mobile, is a platform for developing Java applications for portable devices. It will eventually be a great platform for JavaFX Script, but for now is largely irrelevant to the content of this article.

Some Examples of JavaFX Applications

Before we start learning a new language, let's see some examples of JavaFX code. A good resource for examples can be found at the official JavaFX site. To download the examples, please click on JavaFX Script 2D Graphics Tutorial. After the download is complete just double-click the tutorial.jnlp file. In a few seconds you should see something like Figure 1 (if you don't see this image, then you have to configure Java Web Start for the .jnlp extension).

Running the tutorial.jnlp
Figure 1. Running the tutorial.jnlp tutorial

Take your time looking over these examples and the source code. There are many interesting effects that can be obtained with just a few JavaFX lines.

If you are still skeptical about the utility of JavaFX, take a look at these two demos; they are partial re-creations of StudioMoto and Tesla Motors sites. You can download them demos from Project OpenJFX by clicking JavaFX Script Studiomoto Demo and JavaFX Script Tesla Demo. They require Java Web Start in order to run, but depending on your machine configuration they may start automatically, or you may have to find and run the downloaded .jnlp file.

Download and Install JavaFX

If you are interested in learning to develop JavaFX applications, then you should know that there are at least three methods for working with JavaFX. Also, it is important to know that JavaFX applications are not browser-based. The simplest and quickest method is based on a lightweight tool called JavaFXPad. The major advantage of using this tool is that you can almost immediately see the effect of the changes you are making in the editor. You can download this tool from Project OpenJFX by clicking JavaFX Script JavaFXPad Demo. Again, running this requires Java Web Start (see Figure 2).

Running the javafxpad editor
Figure 2. Running the JavaFXPad editor

Another way to work with JavaFX is to use the JavaFX Script Plug-in for NetBeans 5.5 or a JavaFX Script Plug-in for Eclipse 3.2 (of course, before downloading and installing any of these plug-ins you must have NetBeans 5.5 or Eclipse 3.2 already installed).

If you decide to start with the JavaFX plug-in for NetBeans 5.5, the instructions on Project OpenJFX for JavaFX for NetBeans will help you. Similarly, if you want to use the JavaFX plug-in for Eclipse, then go to JavaFX for Eclipse. Notice that all the examples from this article were tested with JavaFX plug-in for NetBeans 5.5, but should work in any of the other listed methods.

Testing the Hello World Application with JavaFX Plug-In for NetBeans 5.5

As always when learning a new language, we have to write the obligatory Hello World application:

Listing 1
import javafx.ui.*;
import java.lang.System;
Frame {
    centerOnScreen: true
    visible: true
    height: 50
    width: 350
    title: "HelloWorld application..."
    background: yellow
    onClose: operation() {System.exit(0);}
    content: Label {
        text: "Hello World"
        }
    }

To develop and run this simple example in NetBeans 5.5 follow these steps:

  1. Launch NetBeans 5.5.
  2. From the main menu select File -> New Project.
  3. In the New Project window, select the General category and Java Application project (click Next).
  4. In the New Java Application window, type "FXExample" in the Project Name text field.
  5. In the same window use the Browse button to select the location of the project.
  6. Uncheck the "Set as main project" and "Create main class" checkboxes (click Finish).
  7. Right-click on the FXExample -> Source Packages and select New -> File/Folder.
  8. In the New File window select the Other category and the JavaFX File file type (click Next).
  9. In the New JavaFX File window, type "HelloWorld" for File Name and "src" for Folder (click Finish).
  10. Copy the code from Listing 1 and paste it in HelloWorld.fx.
  11. Right-click an FXExample project and select Properties.
  12. In the Project Properties – FXExample, select the Run node from the Categories pane.
  13. In the Arguments text field, type "Hello World" (click OK).
  14. Right-click on FXExample project and select Run Project option.

If everything works, you should see a frame like in Figure 3:

Running the Hello World application
Figure 3. Running the Hello World application in NetBeans 5.5

Now you have the software support for developing and running any JavaFX application.

JavaFX Syntax

Before starting with JavaFX, let's go over some of the fine points of the syntax. If you are already familiar with the syntax of the Java language, most of this will look very familiar, but some of it is quite different.

JavaFX Primitive Types

JavaFX supports four primitive types: String (for java.lang.String), Boolean (for java.lang.Boolean), Number (for java.lang.Number) and Integer (for byte,short,int,long,BigInteger).

JavaFX Variables

A JavaFX variable is declared by using the var keyword. See the following examples:

var x:Number = 0.9;
var name:String = "John";
var y:Integer = 0;
var flag:Boolean = true;

var numbers:Number = [1,2,3,4,5];

JavaFX Operators

The well-known Java operators &&, ||, and ! are displayedlike this in JavaFX:

  • Java: &&
    JavaFX: and
  • Java: ||
    JavaFX: or
  • Java: !
    JavaFX: not

JavaFX Functions

JavaFX supports functions. Here are example simple functions with arguments, variable declarations, and a return statement. 

function taxes(x) {
    var t:Number = (19.0/100.0)*x;
    return t;
    }

JavaFX if Statement

In JavaFX you can use conditional blocks by using the if statement. Curly braces are required with this statement . If the else clause is another if statement, then you can skip curly braces:

if (place_your_condition_here) {
        //do something
    } else if (place_your_condition_here) {
        //do something
    } else {
        //do something
    }

JavaFX while Statement

The while statement is similar to while in Java. Curly braces are always required with this statement.

while (place_your_condition_here)
    {
    //do something

    }

JavaFX for Statement

The for statement can be used to loop over an interval (intervals are represented using brackets [] and the .. symbol).

//i will take the values: 0, 1, 2, 3, 4, 5
for (i in [0..5])
    {
    //do something with i
    }

JavaFX Procedures

JavaFX procedures are marked by the operation keyword. Here is a simple example:

operation startClock() {
do{
    while(true)
        {
        if(seconds>=360)
    {seconds = 0; seconds = [0,6..360] dur 60000 linear;}
        if(minutes>=360)
    {minutes = 0; minutes = [0,6..360] dur 3600000 linear;}
        if(hours>=360)
    {hours = 0; hours = [0,6..360] dur 43200000 linear;}
        }
    }
}

JavaFX Classes

JavaFX classes are marked by the class keyword. A JavaFX class may extend more classes by specifying the extends keyword and a comma separated list with the names of those classes. Between curly braces you can place attributes, functions, and operations, like in the next example:

class Order {
    attribute order_nr: String;
    attribute ordertype: Order inverse Order.products;
    attribute products: Order* inverse Order.ordertype;
    function getOrderNr(): String;
    operation addOrder(order: Order);
    }

Notice that attributes are declared using the attribute keyword and that the body of the function and procedures are not in the class body. Their compartments are defined after the class declaration, as you will see soon.

The inverse clause is optional and it shows a bidirectional relationship to another attribute in the class of the attributes' type. In this case, JavaFX will automatically perform updates (insert, replace, and delete).

You can find a more complete tutorial on Java.net.

Playing Around with JavaFX

In this section, you will see a set of examples that covers a variety of JavaFX possibilities and particularities. The main purpose of these examples is to get you familiar with JavaFX code writing and with the logic of a JavaFX application. The second goal is to convince you that JavaFX deserves a closer look when you need to develop cool GUIs, animations, and nice effects with only a few lines of code. All the examples presented will introduce skills that are specific to JavaFX.

Every example is preceded by a short description, so don't expect line by line comments. All of these should be accessible enough to run yourself, so let's begin.

When you need to print the value of a variable/attribute with System.out.println you can place the name of it inside quoted strings, as shown in Listing 2:

Listing 2
//expressions within quoted text
import java.lang.System;
var mynumber:Number = 10;
System.out.println("Number is: {mynumber}");

Result: Number is: 10

JavaFX supports a useful facility known as the cardinality of the variable. This facility is implemented with the next three operators:

  • ?: Optional (may be null)
  • +: One or more
  • *: Zero or more
Listing 3
//cardinality of the variable
import java.lang.System;
var mynumbers:Number* = [1,2,7];
System.out.println("Numbers are: {mynumbers}");

Result: Numbers are: 1 2 7

In JavaFX, it is possible to not specify the type of a variable in its declaration. This will not be an error, because JavaFX will automatically find out the type of the variable from its use.

Listing 4
//the variable's type is optional
import java.lang.System;
var days = ["Monday,","Friday,","Sunday"];
System.out.println("You have to work: {days}");

Result: You have to work: Monday, Friday, Sunday

To get the size of an array, you can use the sizeof operator:

Listing 5
//getting the size of an array
import java.lang.System;
var lotto = [21,30,11,40,5,6];
System.out.println("Array size:{sizeof lotto}");

Result: Array size: 6

To get an array from a subarray that satisfies a condition, you can use the [] operator. The condition is placed between [] and is evaluated as a Boolean. This is similar with the XPath predicates.

Listing 6
//using the [] operator - similar to its use in XPath
import java.lang.System;
var mynumbers = [1,2,7,3,30,15,14,6,4];
var numbers = mynumbers[n|n < 10];
System.out.println("Numbers smaller that 10 are: {numbers}");

Result: Numbers smaller than 10 are: 1 2 7 3 6 4

To get the ordinal position of an element within an array, you can use the indexof operator:

Listing 7
//returning the ordinal position of an element within an array
import java.lang.System;
var mynumbers = [1,2,7,3,30,15,14,6,4];
var number_four = mynumbers[indexof . == 4];
System.out.println("Number four:{number_four}");

Result: Number four: 30

When you want to insert an element into an array you can use the insert statement and one of the following:

  • as first: for inserting into the first position
  • as last: for inserting into the last position (this is the default)
  • before: for inserting before a position
  • after: for inserting after a position

When you want to delete an element from an array, you can use the delete statement.

Listing 8
//insert and delete statement
import java.lang.System;
var mynumbers = [1,2,7];
System.out.println("Before inserting anything:
    {mynumbers}");
insert 10 into mynumbers;
System.out.println("After inserting at the end
    the \"10\" value:{mynumbers}");
insert [8,6,90] as first into mynumbers;
System.out.println("After inserting at the first
    positions the \"8,6,90\" values:{mynumbers}");
insert 122 as last into mynumbers;
System.out.println("After inserting at the
    end the \"122\" value:{mynumbers}");
insert 78 before mynumbers[3];
insert 11 after mynumbers[3];
System.out.println("After inserting the \"78\"
    and \"11\" values before/after the 3rd
    element:{mynumbers}");
delete mynumbers[. == 122];
System.out.println("After deleting:{mynumbers}");

Result:
Before inserting anything: 1 2 7
After inserting the 10 value at the end: 1 2 7 10
After inserting the 8, 6, and 90 values at the first positions: 8 6 90 1 2 7 10
After inserting the 122 value at the end: 8 6 90 1 2 7 10 122
After inserting the 78 and 11 values before/after the 3rd element: 8 6 90 78 11 1 2 7 10 122
After deleting: 8 6 90 78 11 1 2 7 10

A great facility of JavaFX is its list comprehensions. This facility is implemented by the select and foreach operators. Here are two examples (one with select and one with foreach) for getting the odd numbers from an interval.

Listing 9
//JavaFX select and foreach operators
import java.lang.System;
function odd(p:Number) {
    return select i from i in [1.0 ..p]
        where (i%2 == 0.0);
    }
var result = odd(10.0);
System.out.println("Odd numbers:{result}");

Result: Odd numbers: 2.0 4.0 6.0 8.0 10.0

Listing 10 (same as Listing 9, but with foreach)
//JavaFX select and foreach operators
import java.lang.System;
function odd(p:Number) {
    return foreach (i in [1.0 ..p] where (i%2 == 0.0)) i;
    }
var result = odd(10.0);
System.out.println("Odd numbers:{result}");

This example illustrates that foreach can be very useful for creating nice effects.

Listing 11
//JavaFX select and foreach operators
import java.lang.*;
import javafx.ui.*;
import javafx.ui.canvas.*;
Frame {
    centerOnScreen: true
    visible: true
    height: 500
    width: 500
    title: "Foreach demo..."
    onClose: operation() {System.exit(0);}
    content: ScrollPane {
    background: white
    view: Canvas {
        content: bind foreach (i in [1..8], j in [1..8])
        Rect {
        x: i*30
        y: j*30
        width:30
        height:30
        fill: Color {red: (100+i) green: (100+j) blue: (100+(i*j))}
        stroke:white
        strokeWidth:1
        }
    }
    }
}

Running listing 11
Figure 4. Running Listing 11

When you need to use a variable or attribute that has the same name as a JavaFX keyword you must insert that name between double angle brackets, like this:

Listing 12
//Identifier quotes
import java.lang.System;
for (<<for>> in [0..3]) {
    System.out.println("for = {<<for>>}");
    }

Result: for = 0   for = 1   for = 2    for = 3

JavaFX can be a great tool when you need to develop Swing interfaces, because JavaFX considerably reduces the amount of code and cooperates well with the javax.swing.* packages. In an earlier section (Testing the Hello World application with JavaFX plug-in for NetBeans 5.5), you saw how easy it is to create a simple frame. Here are two more examples, creating a Button and a TextField:

Listing 13
import javafx.ui.*;
import java.lang.System;
Frame{
    content: Button {
    text: "Exit"
    action: operation() {
    System.exit(0);
    }
    }
    visible: true
}

Running listing 13
Figure 5. Running Listing 13

Listing 14
import javafx.ui.*;
Frame {
    content: GroupPanel {
    var myRow = Row { alignment: BASELINE }
    var label_col = Column { alignment: TRAILING }
    var field_col = Column { alignment: LEADING  }
    rows: [myRow]
    columns: [label_col, field_col]
    content:
    [SimpleLabel {
    row: myRow
    column: label_col
    text: "Type your text here:"
    },
    TextField {
    row: myRow
    column: field_col
    columns: 50
    }]
    }
    visible: true
};

Running listing 14
Figure 6. Running Listing 14

Java.net also has a tutorial on creating Swing interfaces with JavaFX.

>> Weiterlesen auf Seite 2 >>


Themen

Buchreihen

Special Interest

International Sites

O'Reilly China O'Reilly France O'Reilly USA O'Reilly Japan O'Reilly Taiwan