A Veteran JFC/Swing Developer Makes the Leap to JavaFX Script

ver since the Internet emerged, developers and the user community have tried tirelessly to lend Internet application interfaces the same interactivity their desktop applications offered. As the Internet evolved, client-side scripting languages such as JavaScript allowed developers to add dynamic behavior to browser-based applications. However, because different browsers handle JavaScript differently, creating complicated JavaScript code that works across all browsers has been difficult.

Sun Microsystems recently offered Java developers a solution to this challenge with a new scripting language called JavaFX Script. Applications built in JavaFX Script can run on the Internet, the desktop, or even on mobile devices. Unlike predecessors such as applets that tried to accomplish the same cross-platform functionality, JavaFX Script is built from the ground up with performance in mind. Its GUI components and back-end application objects are implemented in Java, and JavaFX Script code is used only to create such components, configure them, and wire them together. Also, because it’s built around the Java language, JavaFX Script inherits great Java features for building large-scale reusable code such as packaging and importing.

For seasoned Java programmers who heretofore have relied on Java Foundation Classes (JFC)/Swing for building GUIs and adding rich graphics functionality to their Java applications, learning JavaFX Script is a no-brainer. This article introduces JavaFX Script language fundamentals, making comparisons to JFC wherever applicable.

Language Fundamentals
JavaFX Script provides two flavors of syntax: declarative and procedural. The declarative syntax is a simple list of human-readable commands, whereas the procedural syntax takes the form of simple programs with curly braces. Both syntaxes are interpreted at run time.

The following are some other notable JavaFX Script fundamentals:

  1. You must store all JavaFX Script files with the extension .fx.
  2. You can use System.out.println from Java to print debug statements to the screen.
  3. Statements inside curly braces ({ }) are executed, even if they are within double quotes (“”).

JavaFX Script provides four primitive data types, which you declare using var: String, Boolean, Number, and Integer. Each data type is tied to a corresponding Java Foundation Class. Hence you can access all the methods provided in the corresponding Java class from JavaFX Script as follows:

var str:String="World" //all methods of java.lang.String //class are available for strstr.substring(1);  // yields "World";

JavaFX Script also introduces cardinality notation while declaring variables:

  • A question mark (?) corresponds to optional cardinality.
  • A plus sign (+) corresponds to one or more cardinality.
  • An asterisk (*) corresponds to zero or more cardinality.

Here are examples of ? and *:

var txt: String?; //txt takes any value or optionally        //nullvar myArr:Number* = [1,2,3] // same as var myArr=[1,2,3]

Functions Versus Operations
JavaFX Script offers both function and operation keywords. Functions usually are simple statements without complicated logic, while operations could have complex logic with exception handling. Use operations for writing complex APIs and functions for simple arithmetic functions.

Arrays
Arrays in JavaFX Script have many enhanced features compared with arrays in other languages. The accompanying source code contains a working example (Array.fx) to demonstrate the array features such as INSERT, DELETE, and SELECT provided by JavaFX Script.

The syntax and semantics of JavaFX Script arrays are so close to human-readable text that you can almost read them like an instruction manual:

var myarr = [11,12,13]Insert 10 as first into myarr;Insert 14 as last into myarr;Insert 9 before myarr[0];Insert 15 after myarr[. ==14]

You can obtain implicit access to context objects using a dot operator as follows:

var nums = [1,2,3,4,11,13,14];var valsGreaterThanEleven = nums[. > 11]; System.out.println("valsGreaterThanEleven = {valsGreaterThanEleven}"); 

The dot in the above code corresponds to the array object nums. The built-in functions do the comparison and return all values greater than 11.

The most intriguing feature of JavaFX Script arrays, however, is the ability to query them using select statements. Using a SELECT query to retrieve data from an array is similar to retrieving data from a relational database:

var ans2 = select n from n in [1,2,3,4,5] where n % 2 ==0;System.out.println("ans2={ans2}");//the above snippet prints all the even numbers from the array. 

See Listing 1. Array.fx for all the code related to JavaFX Script arrays. The code is easy to read and understand.

New Operators in JavaFX Script
Along with standard arithmetic and relational operators, JavaFX Script provides two new operators: format as and bind. The format as operator’s function is pretty straightforward:

var v_int =42545;var v_format= v_int.intValue() format as <<'$'###,###.##>>;System.out.println("v_format={v_format}"); //displays $42,545

The Bind operator lets you bind two variable values. For example, you could bind the text of a label to a variable so that anytime the value of the variable changes, the change is reflected in the text of the label as well. Think of the bind functionality like plugging formulas into spreadsheet cells. The cells display values that are based on a formula.

Multithreading in JavaFX Script
No scripting language supported multithreading until JavaFX Script came along. It supports multithreading with the unlikely programming keywords “do” and “do later”. JavaFX Script will run/interpret any code inside the do block with a separate execution thread. How you use these multithreading features in GUI development is up to your imagination. An intelligent application of them would be designing GUIs so they don’t hang up by making part of the code execute in parallel.

User-Defined Classes
JavaFX Script lets you define your own classes. It supports complete data encapsulation, adhering to the standard rules of Java encapsulation. So you can use all the data encapsulation keywords (private, protected, default and public).

JavaFX Script also supports multiple inheritance. In Listing 2. Class.fx for example, SubClass1 extends directly from SuperClass1 and SuperClass2. Interestingly, JavaFX Script does not support declaration and initialization of class attributes at the same time. However, you could initialize the attributes outside the class declaration using the attribute ClassName.attrName.

Though JavaFX Script does not support the constructor concept, it provides a trigger concept that lets you do some initial processing during object initialization:

class Foo {              attribute bar: String;}trigger on new Foo {bar = "foobar";}

In the above code snippet whenever a new object of class Foo is created, the trigger is invoked, initializing the value “foobar” to the variable bar.

The GUI Features
JavaFX Script greatly simplifies the coding needed to develop rich Internet applications. All the Swing components and containers are available in JavaFX Script, along with their default content layout managers. The runtime library javafxrt.jar contains all the Java classes that interact with underlying Java components. The implementation details are beyond the scope of this article, but avid architects could look into javafxrt.jar to find out how the factory patterns are used to instantiate the underlying JDK classes at runtime.

The GUI Components
All the AWT/Swing components are available in JavaFX Script, and except for the layout managers they carry the same naming conventions. You call JavaFX components as widgets, similar to the x-windows naming convention. Within JavaFX Script, all widgets inherit from the base Widget class. The Widget class in turn has a read-only reference to the underlying Java component class using generics.

In JavaFX Script, you could instantiate a Label component using the following code:

Label {      text: "Hello World Label"        }

Even though the width and height attributes of the label can be set, the underlying layout manager controls how the label is displayed.

Similarly you could initialize a Button using this code:

Button {	     text: "I'm a button!"	     mnemonic: I	     action: operation() {	     System.out.println("button clicked..");	     }      }

These simple lines implement the complete button functionality (refer to FrontendSample1.fx for a complete example of GUI components).

Besides the attributes defined in the above snippet, the following self-explanatory attributes also are available for the Button class:

  • Icon
  • selectedIcon
  • pressedIcon
  • rolloverIcon
  • rolloverSelectedIcon
  • rolloverEnabled
  • disabledIcon
  • disabledSelectedIcon

By default whenever you create a Button, JavaFX Script adds an action listener with a reference to the user-defined action attribute.

All JavaFX components that receive user input extend from ActionWidget, which has an attribute action registered as a function. If the action attribute is defined, it is automatically registered as a callback function. Similarly TextField and TextArea are defined and implemented.

Layout Managers
All the layout managers from Swing are available in JavaFX Script, but you refer them with a slightly different naming convention. The Layout portion of the layout manager name is replaced with Panel. For example:

  • FlowPanel corresponds to FlowLayout
  • GridPanel corresponds to GridLayout

The functionality remains the same, however. For example:

  • FlowPanel arranges the components in a flow honoring the width and height of the widgets.
  • BorderPanel provides the entire space for the widgets placed inside them without honoring the width and height of the contained widgets.
  • GridbagPanel provides all the attributes to control the layout and dynamic behavior of the components.

Figure 1 shows the use of the BorderPanel, FlowPanel, GridPanel, and GridbagPanel layouts. Each layout retains all the properties from its Java counterpart.

Click to enlarge

Figure 1. Layout Managers in Use

You also can add components to the container by placing them within brackets ([ ]) separated by commas.

What’s Next?
While not much JavaFX Script documentation is available currently, you can get a head start on the language by downloading the script files inside accompanying source code. Once you get the hang of it, you may have second thoughts about ever using Java Swing again. Why would you when JavaFX Script enables you to build highly responsive Internet and desktop applications so much more easily?

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

microsoft careers

Top Careers at Microsoft

Microsoft has gained its position as one of the top companies in the world, and Microsoft careers are flourishing. This multinational company is efficiently developing popular software and computers with other consumer electronics. It is a dream come true for so many people to acquire a high paid, high-prestige job

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS