by February 1, 2008 0 comments

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.

Direct Hit!

Applies To: Java Swing developers
USP: Speedy development of RIAs
Primary Link: /script/
Keywords: Java FX
On CD:

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.

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 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; }
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) {
} },…
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 to learn more about this scripting language.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.