Develop Rich Apps Easily with JavaFX

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:

From the plugin Manager of the IDE, select the JavaFX options to install the JavaFX script plugins

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.

TextViewer app, when expanded shows the package structure. During execution the TextViewer app appears as shown above

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.