RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


JavaFX Enters the RIA Race : Page 4

JavaFX Script is a new scripting language from Sun meant to provide rich user interfaces to compete with AJAX, Silverlight, and many other RIA technologies. What does JavaFX look like, how does it work, and will it succeed? Those questions and more are answered in this introductory review of JavaFX.

Executing JavaFX
JavaFX applications on the desktop are executed by the FXShell. FXShell is a class provided in the OpenJFX download. To run JavaFX files in NetBeans, right click on the project in the Projects window and select Properties. In the Project Properties window that opens (see Figure 6), select Run in the Categories list and then enter net.java.javafx.FXShell as the Main class and your JavaFX filename (without .fx) in the Arguments list.

Figure 6. Using FXShell: In NetBeans, run a JavaFX file by having the JRE run FXShell and with your JavaFX file as an argument.
Figure 7. Running in Eclipse: Select the JavaFX file, right click on the file, and select Run As, and then Run....

To run JavaFX applications in Eclipse, right click on the JavaFX file in the Package Explorer view and select "Run As" and "Run…" from the menu (see Figure 7).

In the ensuing Run window, select JavaFX Application from the list on the left, and then push the New launch configuration icon at top of the window. This results in a "New_configuration" to be created under JavaFX Application. Optionally, change the name of the configuration to JavaFX. Notice that the main class to execute for this configuration is net.java.javafx.FXShell by default. Next, click on the Arguments tab and enter the name of the JavaFX file (without the .fx extension) in the Program Arguments field. When finished, hit Apply and then Run.

Figure 8. The Investment Calculator: Written entirely in JavaFX, the investment calculator allows the user to dynamically enter and change investment information and have the interface automatically calculate the investment return.

JavaFX Classes, Objects, and Automatic Data Binding
JavaFX is not restricted to user interfaces. You can also define classes. In this next example, you'll build an investment calculator. The user interface allows a user to enter starting principal, annual contribution, rate of return, and amount of investing time data and calculate the investment return (see Figure 8). in The JavaFX code in Listing 4 provides an InvestmentTool class to capture the data entered by the user and calculate the return.

The keyword "class" with the code block ({} notation) obviously defines the InvestmentTool class. Properties are defined with the "attribute" keyword. Each attribute is defined with the following syntax:

attribute AttributeName : AttributeType Cardinality;
In the InvestmentTool example, the cardinality is not used but the cardinality can be used to define an array or optional property, as specified in Table 1.

Cardinality Indicator



Optional (i.e, the attribute is not required and may be null)


One or more


Zero or more

Table 1. Cardinality can be used to define an array or optional property.

Notice that the operations are declared in the class, but the implementation is specified outside the actual class declaration. Chris Oliver, a key member of the JavaFX team, has indicated part of the rationale for this is that "having method bodies in the class declaration clutters it with a mass of implementation details which is detrimental to getting an overview of the actual relationships and operations embodied by the class."

Author's Note: Chris Oliver's weblog is good reading for those interested in more details about JavaFX and provides insight to some of the why's/wherefores of F3, which is the original name of JavaFX.

In JavaFX, "methods" are defined as either functions or operations. A function is a method that may only contain a series of variable declarations and a return statement. So for example, a function to determine the length of a hypotenuse would look like the code below:

function hypotenuseLength (side1, side2){
 var a = side1 * side1;
 var b = side2 * side2;
 var c = Math.sqrt(a+b);
 return c;
An operation, on the other hand, can contain any number of statements (variable declarations, loops, conditionals, etc.). Additionally, similar JavaScript operations and functions can be first class objects and don’t have to be associated to a class—another reason for their being implemented outside of classes.

An instance of the InvestmentTool calculator is associated to the variable calculator in the statement var calculator = InvestmentTool{…} at the bottom of Listing 4. And, while JavaFX classes don’t have explicit constructors, the instance is created using this notation that allows the object instance to be created and attribute values to be initialized.

OK, so how are JavaFX classes and objects used? For example, how is this calculator instance used by a JavaFX user interface? Using a powerful JavaFX process known as automatic data binding, the attribute values of objects like calculator can be associated to properties of the user interface components. As the object changes, so does the components value and vice versa.

Listing 5 shows the JavaFX Frame user interface for the investment calculator. Notice how the "bind" keyword used in the value property of an input widget, like the annual contribution Spinner below. Binding allows the spinner's value and the calculator's annual contribution attribute to be tied to each other.

Spinner {
	min: 0
 max: 1000000
 stepSize: 100
 value: bind calculator.contributionAnnual
 font: Font{faceName: "Arial", size: 18}

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date