All you wanted to know about JavaFX

BANGALORE, INDIA: Developers and content authors have always been under pressure to cater to the growing demands of delivering rich and interactive apps that are not only lightweight, but also loaded with functionalities. JavaFX Script proves to be a boon in such cases; it's a simple scripting language that can utilize client's Java platform libraries for running applications. The developers can use it to create GUIs having Swing and Java 2D components as the language provides libraries for both.

JavaFX Script is a declarative and statically typed scripting language. It has first-class functions, declarative syntax, list-comprehensions, and incremental dependency-based evaluation as some of the features. It is designed to optimize the creativity of designers and developers for creating rich and compelling applications by leveraging the usage of Java Swing, Java 2D and 3D functionalities. The RIAs or other apps thus created can be reused across platforms like desktops, mobile devices, and set-top boxes without local installation. You can incorporate animations as well as effects for text and graphics for the apps just by using few lines of code. JavaFX Script even allows you to wrap the Java or HTML code within the script as well.

In the following article, we will build a text document viewer application that will be able to read a text document file from the client's machine and display its contents.

Prerequisites

All you need is a Java SE 5 or Java SE 6 for the support to JavaFX Scripting development. You can start developing your first application on JavaFX with your Eclipse or NetBeans 5.5 or later IDEs and by incorporating the necessary plugins for them. We will be using NetBeans 6.0 as the IDE and Java SE 6 as the platform in the following article. Once you have successfully installed the Java development kit and the NetBeans IDE, the next step is to download and install the JavaFX Script plugin. For this go to the main menu of the NetBeans 6.0 IDE, and then select Tools > Plugins. Now under the 'Settings' tab in the Plugins window, select all the Update Centers and check the 'URL for the NetBeans Beta update center' checkbox. If the URL is not set or is different from the URL mentioned below, then change it to the following:

http://updates.netbeans.org/netbeans/ updates/6.0/uc/final/beta/catalog.xml.gz

Now, move onto the 'Available Plugins' tab and click the 'Reload Catalog' button. After the list has been refreshed, locate and select the JavaFX Script plugin. Click on Install, follow the steps, and after the plugin has been installed restart the IDE.

Developing the App

We intend to develop a simple text viewer that displays the text content of any text file picked up from the client's machine. To begin with, start a new project by clicking File > New Project. Now, in the 'New Projects' window, under the 'Categories' pane select 'JavaFX' option, and from the 'Projects' pane select the 'JavaFX Script Application' option. Then name the project as TextViewer and select the checkbox 'Create the Main Class', it will automatically create the Main class for the project. Once you click on the 'Finish' button, the project gets created. On expanding the project package TextViewer, under the 'source packages' folder, you will find the default Textviewer package, where you will find the created Main.fx file. The Main.fx is the file that runs first when the application gets executed.

Now we have to begin with the coding part. Start by editing the Main.fx file. For importing the libraries of JavaFX we have to use the javafx.ui package as imports. As we have to read a file and display its contents, so first we will create a class named TextViewer as follows.

class TextViewer {

attribute fileName: String;

attribute fileContent: String;

operation openFile(file: File);

}

The class in JavaFX is declared simply with class keyword as shown in the code above. The operations are declared after the class, but the operation keyword has to be specified. For operation openFile, we have to read the contents of the selected file. For this we'll use BufferedReader to read from the file. The reader reads a line from the text file, and through use of StringBuilder class we'll append each line that is read to the variable builder, which will eventually hold the content of the file. The following code snippet shows the openFile operation.

operation TextViewer.openFile(file: File) {

var reader = new BufferedReader(new FileReader(file));

var builder = new StringBuilder();

while (true) {

var line = reader.readLine();

if (line == null) {break; }

builder.append(line);

builder.append('\n');

}

reader.close();

this.fileName = file.canonicalPath;

this.fileContent = builder.toString();

}

Once we have declared the class and its operation, we can design the interface. Most JavaFX uses the 'Frame' object that corresponds to the top-level window of the interface. The following code snippet from the Main.fx file makes the interface of the application, where the menu-bar gets created and corresponding to each menu-item an action operation is defined.

var model = new TextViewer;

Frame {

var: win

width: 450

height: 300

visible: true

content: RootPane {

menubar: MenuBar {

menus: <

Menu {

text: "File"

items: bind <

MenuItem {

text: "Open"

action: operation() {

var fc = FileChooser {

action: operation(file: File) {

model.openFile(file);

}

};

fc.showOpenDialog(win);

} },...

}

content: TextArea {

text: bind model.fileContent

}

}

};

For instance when File >Open is selected a 'File' dialog box appears. Also the contents of the files are displayed on the TextArea. Both TextArea and MenuBar are added to the Frame through content keyword.

In JavaFX, one interesting thing to talk about is the bind keyword. JavaFX lets you bind i.e. link an attribute, so that once that attribute changes, all attributes bound to it will automatically reflect the change. Here we have bound the fileContent attribute to the TextArea, so when the content of fileContent attribute changes the same is reflected on the TextArea as well.

Finally, we are through with the coding for the app. Press F6 or click on the Run > Run Main Project to execute the project. Through File > Open we can open the 'Windows Open File' dialog box to select a text file and the contents of that file gets displayed on the TextArea space of the application. You can further add more modifications to this application- by adding the code for 'Save file' option, whereby the changes made to the file content would be reflected to the original file as well.

JavaFX Script is new and easy to work with. You can browse through OpenJFX community in java.net to learn more about this scripting language.