James Weaver’s JavaFX Blog

Putting My CTO Hat On - Our Company's Plans for Using JavaFX Script

In this post I want to share with you some things about JavaFX Script, leading up to our company's (LAT, Inc.) perspective and plans for using JavaFX Script.

1. JavaFX Script's relationship to Java
2. Some features and advantages of JavaFX Script
3. The current status of JavaFX Script
4. Two very informative JavaFX Script mailing lists.
   
5. Our company's plans for using JavaFX Script

Some of the content in this post is from my Apress book: JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications.

JavaFX Script’s Relationship to Java

If you’ve done much Java development, especially Java Swing development, you know that Java and Java Swing have an amazing amount of functionality, and at the same time are very complex.

JavaFX leverages all of the power of Java, because JavaFX code can fully utilize the Java libraries. For example, it can call methods of, and instantiate, Java classes. Much of the user interface (UI) capability of JavaFX makes use of the Java Swing classes behind the scenes.

The net effect is that content developers and application developers can use a simple and elegant language that harnesses the power of Java and Java Swing. I am excited about how JavaFX has found, in the words of Albert Einstein, the “simplicity on the other side of complexity.”

Features and Advantages of JavaFX Script

The following list describes some of the strengths of JavaFX Script:

• Its simple, declarative syntax used to express user interfaces, including a very rich set of layout widgets that make easy work of laying out a user interface in a platform-independent way. Content developers can create great looking, functional user interfaces without being expert programmers.
• Its innate ability to support the model-view-controller pattern because of its very powerful bind capability. This complements and enables the declarative programming syntax because attributes of objects, including user interface objects, can be bound to values contained in model classes, often bidirectionally.
• The concept of triggers (functionality that is automatically invoked when certain conditions take place, such as when the value of an attribute changes). This enables the declarative syntax as well, and makes UI development relatively easy, because setters and getters are replaced by triggers that are automatically invoked when the value of an attribute changes.
• JavaFX programs will run anywhere Java programs will run, because they run within the context of a Java Virtual Machine (JVM). There is a project underway, called the OpenJFX Compiler Project, whose mission is to create a compiler for JavaFX code that will turn it into JVM bytecode. When this is fully implemented, execution speeds of JavaFX Script will rival Java code.
• Its very powerful syntax for defining, modifying, and querying sequences (think arrays).

A side benefit is that it is enables fast development of application prototypes. Another side benefit is that it would be a great language to use in schools to teach programming concepts.

Current Status of JavaFX Script

JavaFX Script, with the help of Java libraries, is currently very functional and reliable. JavaFX Script syntax is in a state of flux as it is continually being improved, and JavaFX Script class libraries are being fleshed out continually. Because Project OpenJFX is an open project, the JavaFX community is contributing to the ideas and development of JavaFX Script. This community, which includes development tool providers, will continually improve the capability of JavaFX Script development tools, adding capabilities such as refactoring. JavaFX Script is currently under an evaluation license, but will soon be open source.

Two Very Informative Mailing Lists

There are several forums and mailing lists associated with Project OpenJFX and OpenJFX Compiler projects.  The forums are web-based and require more effort to answer posts, so very little useful information is currently exchanged on them.  There are a couple of mailing lists, on the other hand, that are very informative and useful for getting questions answered.  These are:

• users@openjfx.dev.java.net - a mailing list for discussions about the current, interpreted version of JavaFX Script.  You can subscribe to this list and view archives from this page.
• dev@openjfx-compiler.dev.java.net - a mailing list whose content is mainly communication among the team of people that are carrying the effort of creating the compiler version of the JavaFX Script language, and of course the compiler itself.  Judging by the messages on the list, this team of compiler and language design gurus is working around the clock, including on weekends, to make this happen.  I have a high degree of respect for this team, and mostly just lurk, gleaning what I can from the *very* technical discussions.  Sometimes I understand enough of what they are talking about to actually offer some input :).  You can subscribe to this list and view archives from this page.

Our Company's Plans for using JavaFX Script

In 2000, my business partner Dan Wright and I founded LAT, Inc.,  a relatively small software development company (currently about 12 employees).  In those days, our basic application architecture was rich client Java interacting with Enterprise Java Beans.  Deployment to the masses became an issue mainly because of Java plug-in download time.  We have since evolved to traditional Java/Javascript-based web application frameworks, AJAX libraries, etc.  As the CTO, however, I have never stopped wanting to get back to the simplicity of a rich-client architecture.  I am very hopeful that JavaFX in combination with initiatives such as Java SE 6 Update N (formerly known as Consumer JRE) will allow us to get there.  Here is an excerpt from a recent post that I made to the users@openjfx.dev.java.net mailing list that articulates our plans as a company for using JavaFX Script:

"I am using currently JavaFX on projects that aren't mission critical (e.g. internal utilities such as an object database browser).  I have found it to be very reliable, but do recognize that the syntax of the language is undergoing some significant changes.  This will require modifying the code at some point, but the benefits of using JavaFX now in my experience have outweighed the anticipated work in modifying code.  It is my understanding that the user interface APIs will be expanded, but not radically changed.

After the compiled version of JavaFX Script is released and feels stable, we'll begin using JavaFX Script for some customer applications and some of our products.  I expect that to occur for us in Q2 2008.  What I'm really hoping for in the 2008-early 2009 timeframe is that the deployment for JavaFX applications (including the JRE) will be so fast and easy that we'll be writing rich-client JavaFX applications in most cases (rather than defaulting to browser-based applications)."

As always, your feedback in the form of comments to this post are encouraged.

Regards,

James L. (Jim) Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

 

Let's Visit Planet JFX and Explore Binding a Little More!

Planet JFX is a great place for viewing JavaFX Script code examples, demos, mini-tutorials, and various other resources.  According to the site:

"Planet JFX is an open-source documentation wiki for the JavaFX scripting platform.  We are a community  of early adopters, developers and Java enthusiasts.  Our topics include tips and tricks, how-to's, technical gotchas, code samples, tutorials, and the inevitable workarounds.  We invite everyone interested to contribute to this wiki and help develop a knowledge base about the practical use of JavaFX."

I'd like to direct your attention to a great little tutorial on Planet JFX that goes into more detail on binding than my previous post on the subject did.  Why don't you go ahead and do the tutorial, and come back here where I'll discuss a couple of additional JavaFX concepts that I haven't covered with you yet.

<pause waitingOnYou = "true"/>

So, how did you like the bind tutorial?  I *think* that it was originally created by J. David Eisenberg, who is the same developer that originally created a Javadoc-like program to reflect on the JavaFX Script classes and generate web pages of documentation on the JavaFX Script UI classes.

So, here are the additional concepts from the bind tutorial that I'd like to cover:

Structure of a JavaFX Class

class Counter {
	attribute value: Integer;
	operation increase( );
	operation decrease( );
}

attribute Counter.value = 0;

operation Counter.increase( )
{
	value++;
}

operation Counter.decrease( )
{
	value--;
}

As shown in the Counter class above, the class definition contains attribute and operation declarations.  Below that is an attribute initializer, which as you may have guessed initializes the value of an attribute when an instance of a class is created:

attribute Counter.value = 0;

Note that the value attribute is qualified with the Counter class.  JavaFX classes can also have operations and functions, which need to be qualified by the class name as well.  The operations shown here have no parameters, and return no values, but in the near future I'll go into some detail about JavaFX operations, functions, as well as triggers.

Two Ways of Creating an Instance of a Class

You may have noticed that there are two ways of creating an instance of a class:

• Using object literal syntax.  An example of this occurred in my last post about binding.  Here's the sample:

var hellojfxModel =
   HelloJFXModel {
     greeting: "Hello JavaFX Script Developer!"
   };

• Using the new operator.  An example of this was in the bind mini-tutorial that you just did on the Planet JFX site (you did do the tutorial, didn't you?)

var count:Counter = new Counter();

Explicitly Typing a Variable

I've got another JavaFX concept to tell you about in this example, concerning the line of code shown above.  The type of the variable named count is explicitly typed as a reference to a Counter instance.  This would not be necessary, as JavaFX would have ascertained this from the value assigned (a Counter instance).  Please note that JavaFX Script (unlike, say, JavaScript) is statically typed, which means that the type of each variable is known at compile time, and cannot change at runtime.

Layout Widgets

The bind tutorial on the Planet JFX site used one of several available layout widgets, specifically the FlowPanel widget.  Here's a code snippet:

FlowPanel {
  content: [
    Label {
      text: "0"
    },
    Button {
      text: "Add 1"
    },
    Button {
      text: "Subtract 1"
    }
  ]
}

The FlowPanel layout widget flows the array of UI widgets in its content attribute from left to right.  The purpose of layout widgets are to layout the UI of an application in a cross-platform environment.  The declarative coding style used in JavaFX makes this simple and powerful.  I'll discuss other layout widgets in future posts.

Hopefully this post has been helpful to you.  Please leave a comment if you have any questions or feedback.

Regards,

James L. (Jim) Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

Your Second JavaFX Script Program - The Wonders of Binding to a Model

Note: This post has been superseded by the HelloJFXBind: Book Example Updated for JavaFX Script SDK post. 

Also, if you've been directed here by a blog post citing this JavaFX demo as one that "just look[s] a bit nasty", please take a look at the Watch for Falling Blocks: Take TetrisJFX for a Spin post. The Tetris example is meant to look more appealing, as opposed to being a very basic example of binding in JavaFX Script.  By the way, I very much appreciate the spirit in which Matt Stephens wrote that article, and agree with his sense of urgency.  Thanks Matt!

Now that you’ve learned some JavaFX concepts by running and examining the HelloJFX.fx code in a previous post, I’d like to introduce you to some more concepts. You’ll get a taste of what it is like to create classes and objects in JavaFX, as well as how to create variables and use constants. You’ll also learn about a deceptively simple but powerful concept in JavaFX: binding a view to a model. Let’s walk through these concepts in the context of the HelloJFXBind application, which builds on the previous application.

Running and Examining the HelloJFXBind Application

Run the HelloJFXBind.fx program in your JavaFX tool of choice; the output should be a
window that looks something like the following screen shot:

Now let’s examine the source code for the HelloJFXBind.fx Program, making special note of the added
concepts:

package jfx_book;

import javafx.ui.*;
import javafx.ui.canvas.*;

/**
 * This class serves as the model behind the user interface
 */
class HelloJFXModel {
  attribute greeting:String;
}

/**
 * This is a JavaFX Script that binds to data from the model.
 */
var hellojfxModel =
   HelloJFXModel {
     greeting: "Hello JavaFX Script Developer!"
   };

Frame { 
  title: "JavaFX Script example that binds to a model" 
  height: 100
  width: 400
  content:
    Canvas {
      content:
        Text {
          font:
            Font {
              faceName: "Sans Serif"
              // Example of an attribute with a collection of values
              style: [
                BOLD,
                ITALIC
              ]
              size: 24
            }
          // Put some color into the app
          stroke: red
          fill: red
          x: 10
          y: 10
          content: bind hellojfxModel.greeting
       }
    }
  visible: true
}

Structure of a Minimal JavaFX Class

One of the first differences you’ll notice from the previous example is that this program defines a class named HelloJFXModel in the following lines of code:

class HelloJFXModel {
  attribute greeting:String;
}

This is a very minimal class, as it doesn’t have many of the possible characteristics (which you’ll learn about later), but it’s a good place to start.

The class Declaration

The declaration of a class always includes the class keyword and, as shown in the preceding code snippet, has opening and closing curly braces. There are other JavaFX keywords, such as public and extends, that modify the class keyword.

attribute Declarations

There is one attribute in the HelloJFXModel class, named greeting, and its data type is String. As mentioned previously, an attribute is a variable that is associated with an object.  When instances of this class are created, each one will be able to hold a string named greeting.

Note: As shown in the example, there is a third type of comment used in JavaFX files, called Javadoc comments. These comments start with the /** characters and end with the */ characters. Their purpose is to support automatic generation of documentation for Java classes, and I anticipate that there will be tools created for JavaFX that use Javadoc-style comments to generate documentation for JavaFX classes.

Making an Instance of the Class

Now that the HelloJFXModel class has been defined, the program goes on to create an instance of that class using the same declarative syntax that was used earlier to create a UI:

var hellojfxModel =
  HelloJFXModel {
    greeting: "Hello JavaFX Script Developer!"
  };

The greeting attribute of this new instance contains a string with the value of Hello JavaFX Script Developer!.

Declaring and Assigning Variables

As just shown, the program uses the var keyword to declare a variable named hellojfxModel. Using an assignment operator (=), this variable is assigned a reference to a newly created instance of the HelloJFXModel class. You’re going to need the hellojfxModel variable a little later to get a reference to this instance. It is worth noting that you should always assign a value to a variable declared with the var keyword before using it. There are rules and conventions for the names that you give to variables (identifiers that are declared with either the var or attribute keywords):

• The rules: Variables must begin with a letter, an underscore character (_), or a dollar
  sign ($). Subsequent characters in the variable name can be numbers, letters,
  underscore characters, or dollar signs.
• The conventions: Variables start with a lowercase letter, don’t usually have
  underscores, never contain dollar signs, and consist of one or more camel case words.
  Numbers are used where appropriate. For example, the variable used in the
  HelloJFXModel class is named greeting. A variable that holds the name of a planet
  could be named planetName.

Variable names can be as long as practical, and should convey meaning. In addition, variables, like most everything in JavaFX, are case-sensitive.

Understanding Binding

Please jump down in the current example to the declaration of the Text object, shown here:

Text {
  font:
    Font {
      faceName: "Sans Serif"
      // Example of an attribute with a collection of values
      style: [
        BOLD,
        ITALIC]
      size: 24
    }
    // Put some color into the app
  stroke: red
  fill: red
  x: 10
  y: 10
  content: bind hellojfxModel.greeting
}

There are some new concepts in this block of code (the code between any opening curly brace and its matching closing curly brace is called a block). The concept I’d like to point out now is binding the view (user interface) of an application to the model (data) of the application. In the last line of code, you’ll notice that the content attribute of the Text instance contains the bind operator. This results in binding (incrementally updating) the content of the Text instance with the greeting attribute of the HelloJFXModel instance. If the greeting attribute changes, JavaFX will automatically cause the content of the Text instance to change, resulting in the immediate update of the message displayed in the application. The following graphic represents this binding behavior, with the containment hierarchy of the UI components on the left side, and a class diagram of the HelloJFXModel class on the right side.

Assigning Color Constants to the Text Object

JavaFX has many predefined constants for your use, as well as support for creating your own constants. Here, I’d like to point out how to assign constants in your code. In the following code snippet from the current example, notice that the stroke and fill attributes of the Text object are both assigned the color red:

Text {
  font:
    Font {
      ...some code omitted...
    }
    // Put some color into the app
  stroke: red
  fill: red
  x: 10
  y: 10
  content: bind hellojfxModel.greeting
}

The stroke attribute for any graphical element, including this Text object, defines the color that the outline will have. The fill attribute for any graphical element defines the color with which the area inside the outline will be filled.

The Paint class in JavaFX currently has about 140 predefined constants that represent colors. Here are some of these constants:

• red
• green
• blue
• yellow
• orange
• black
• white
• lightblue
• lemonchiffon
• lightgoldenrodyellow

Assigning an Array of Values to an Attribute

Arrays (also known as sequences) are the main data structures in JavaFX. At this point, I’d like to just broach the subject by showing you how to create and assign an array to an attribute in declarative code. In the following code snippet from the current example, the style attribute of the Font object is being assigned two values, which you probably have guessed correctly are constants:

Font {
  faceName: "Sans Serif"
  // Example of an attribute with a collection of values
  style: [
    BOLD,
    ITALIC]
  size: 24
}

The style attribute of the Font class accepts one or more values, and to represent those
values, an array is literally being defined here. As shown in the preceding code snippet, an
array literal consists of an opening square bracket, followed by comma-separated elements,
followed by a closing square bracket. The available constants for the style attribute of the
Font class are as follows:

• BOLD
• PLAIN
• ITALIC

Summary

In this post you've learned how to create a simple JavaFX class, and have experienced the power and elegance of binding attributes to a model. This post, by the way, is an excerpt from my recently published book entitled "JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-Side Applications", which is available from Apress.

Regards,
James L. (Jim) Weaver

Spotting JavaFX Apps in the Wild - A Freebase Browser

Occasionally I'll showcase a JavaFX Script app in this blog that I've found on the net.  This one is an app that I'm developing to serve as a browser for the Freebase database.  Freebase is a structured data approach similar to the Wikipedia concept, where the public contributes facts into a database (see freebase.com).

As Doctor Emmett Brown said in the movie Back to the Future, "please excuse the crudity of this model, I didn't have time to build it to scale or to paint it".  In other words, this app is still under development, but it's functional.  I'll be the first to admit that I'm graphically challenged, so it's not "pretty" (I'll showcase some apps with cool graphics in future posts, and you'll know that I didn't create them). Anyway, here's the Java Web Start (jnlp) link.  You'll need JRE 1.5 or later to run JavaFX Script applications.

When you start the Freebase Browser, the Freebase ID for the band U2 is preloaded into the Freebase Object ID text field.  Click the Go button (or just press Enter because it's the default button).  You can then click and expand items in the tree in the left pane, or click links in the right pane, navigating to related topics.  In the upper left hand corner are Back and Forward buttons, similar to a browser. In addition to clicking links, you can type Freebase object IDs in the text field (e.g. /topic/en/james_gosling or /topic/en/star_wars) and click Go.

If you're interested in the application architecture, here's a high level diagram that shows how the UI, application layer, and data layers are related.  JavaFX Script very naturally implements the model-view-controller pattern.

By the way, the JavaFX InfiniteProgressPanel that you'll see when clicking links is part of the JavaFX UI library, and was originated by Romain Guy, the coauthor of the book Filthy Rich Clients.

Enjoy,
James L. (Jim) Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

Want to Take a Deep Dive into some JavaFX Script UI Widgets?

A great resource to help you climb the JavaFX Script learning curve is the Project OpenJFX site.  According to the site, "Project OpenJFX is a project of the OpenJFX community for sharing early versions of the JavaFX Script language and for collaborating on its development. In the future, the JavaFX Script code will be open sourced. The governance, licensing, and community models will be worked out as the project evolves."

The Project OpenJFX site contains some tutorials, one of which concentrates on some of the user interface widgets available with JavaFX Script.  It comes in two parts:

1. Part 1 is very short, and contains information on using NetBeans with a plug-in to create a simple JavaFX Script program.  By the way, in my previous post I showed you how to use JavaFXPad to create a JavaFX Script program.
2. Part 2 takes a deep dive into many of the JavaFX Script widgets including layout widgets (components that enable you to layout the UI in a cross-platform manner).  Under the covers, these widgets are actually Java Swing components and Java Layout Managers, but JavaFX Script's declarative syntax makes quick work of creating and using them.

By the way, if you prefer Eclipse, you can use the tutorial above with the Eclipse JavaFX plug-in as well.

Enjoy,
James Weaver

Develop and Run Your First JavaFX Script Program in the Next Few Minutes

There are several environments in which you can develop and run JavaFX Script programs. I’d like to help you become a JavaFX Script programmer in the next few minutes, so I’m going to show you the fastest route that I know of to get there, which includes using a tool that Sun created called JavaFXPad.

1. You’ll need the Java Runtime Environment (JRE) 1.5 or higher (Mac OS requires the latest JRE 1.5 release or JRE 1.6)
2. Run JavaFXPad straight from the Internet by accessing the following URL: http://download.java.net/general/openjfx/demos/javafxpad.jnlp. This will launch JavaFXPad via Java Web Start, which is a Java application deployment technology. Each time you access this URL it will check for the latest version of JavaFXPad, download it, and automatically execute it.
3. Cut and paste the following code into JavaFXPad, replacing the code that is already there.

/*
 *  HelloJFX.fx - A JavaFX Script "Hello World" style example
 *
 *  Developed 2007 by James L. Weaver (jim.weaver at jmentor dot com)
 */
package jfx_book;

import javafx.ui.*;
import javafx.ui.canvas.*;

Frame {
  title: "Hello World-style example for JavaFX Script"
  height: 100
  width: 400
  content:
    Canvas {
      content:
        Text {
          font:
            Font {
              faceName: "Sans Serif"
              style: BOLD
              size: 24
            }
          x: 10
          y: 10
          content: "Hello JavaFX Script Developer!"
        }
    }
  // Show the Frame on the screen
  visible: true
}
// End of listing




Let’s walk through the code:

Comments

There are two types of comments in JavaFX: multiline comments and single-line comments. Multiline comments begin with the two characters /* and end with the same two characters in reverse order (*/). JavaFX will ignore anything in between. The beginning of the listing shows an example of a multiline comment. Single-line comments begin with the two characters (//). Anything that follows these two characters on a single line will be ignored. An example of a single-line comment is shown near the bottom of the code listing.

The package Declaration

JavaFX packages are analogous to folders in a file system. They provide a way to logically organize the source code files that comprise an application. The package in the preceding example is jfx_book, which indicates that the HelloJFX.fx source code is located in a folder named jfx_book. Package names may consist of more than one node (e.g., com.jmentor.jfx_book), in which case the source code file would be located in a folder named jfx_book that is located in a folder named jmentor, and so on. In fact, it is customary for a package name to begin with the domain name of the company or organization that developed the application (in reverse order, beginning with the top-level domain name, such as com or org).

The package declaration is optional, but it is a very good practice to use it in all but the most trivial programs. If used, the package statement must be at the top of the source code (excluding whitespace and comments).

import Statements

JavaFX programs typically use libraries that consist of JavaFX (and optionally Java) code. In this example, each import statement indicates the location (package) of the JavaFX classes that the code in the rest of this HelloJFX.fx file depends on for outputting widgets and drawing to the screen. An import statement can end with an asterisk (*), indicating that the program may use any of the classes in the package. An alternative form is to specifically name each class being used, as in the following example:

import javafx.ui.Frame;

All but the most trivial applications should organize their source code via package declarations. A source code file uses import statements to indicate its use of classes contained in source code files that have a different package statement.

An import statement may appear anywhere in your JavaFX source code, and whenever one is encountered, the imported JavaFX file is run as deemed appropriate.

Declarative Code That Defines the User Interface

One of the most exciting features of JavaFX is its ability to express a graphical user interface (GUI) using a simple, consistent, and powerful declarative syntax. Declarative programming, as opposed to procedural programming, consists of a single expression (rather than multiple expressions that are executed sequentially). JavaFX supports both types of programming, but it is good practice to use declarative syntax whenever possible.

In this example, the entire program (excluding the package and import statements) is declarative, in that it consists of one expression. This declarative expression begins by defining a Frame object followed by an open curly brace, and ends with the matching curly brace in the last line of the program. Nested within that are attributes of the Frame object, including the content attribute, which is assigned a Canvas widget (GUI component). Nested within that is the content attribute of the Canvas widget, which is assigned a Text object, and so on.

Declarative code automatically creates an instance (also known as an object) of each JavaFX class in the expression. It also assigns values to the attributes of the new instance. For example, look at the portion of code that creates an instance of the Font class:

Font {
  faceName: "Sans Serif"
  style: BOLD
  size: 24
}

This code creates an instance of the JavaFX Font class, and assigns the value Sans Serif to the faceName attribute of the new Font instance. Notice that the attribute name is always followed by a colon (:), which in JavaFX declarative syntax means “assign the value of the expression on the right to the attribute on the left.” These same concepts are true for all of the classes (Frame, Canvas, and Text) in this script. Let’s look at each of these classes individually.


Using the Frame Class

A Frame represents a GUI window, which has its own border, and can contain other GUI components within it.

Note: In this trivial HelloJFX.fx example, as shown in the graphic above, JavaFXPad renders the Frame object as a rectangular area within the output area, as opposed to a separate window. In slightly less trivial JavaFX programs, JavaFXPad renders the Frame object as a separate window.

As with any class, the Frame class has a set of attributes. The set of attributes that Frame widgets have, as shown in the following code snippet from the listing, are as follows:

1. A title that appears in the title bar of the window (again, not shown by JavaFXPad in this trivial program).
   
2. A height and width (in pixels) that determine how high and wide the window will initially be.  
3. A content attribute that defines what the contents of the Frame object will be. In this case, the Frame object will contain a Canvas widget on which you’ll draw a Text object that contains the message to be displayed.
4. A visible attribute (after the closing brace of the Canvas widget) that controls whether the Frame object is to be shown on the screen just yet.

Frame {
  title: "Hello World-style example for JavaFX Script"
  height: 100 width: 400 content:
  ...some code omitted...
  // Show the Frame on the screen
  visible: true
}

Creating String Literals

One of the data types that JavaFX has is the String, which consists of zero or more characters strung together. As shown in the following title attribute of the Frame object, a String literal is defined by enclosing a set of characters in double quotes:

title: "Hello World-style example for JavaFX Script"

Alternatively, String literals may be enclosed in single quotes.

Using the Canvas GUI Widget

The purpose of the Canvas widget is to draw two-dimensional (2D) graphics, including lines, shapes, and text. It is a JavaFX class, but I’m referring to it as a widget here because it is a subclass of the JavaFX Widget class. As shown following, the content attribute of the Canvas widget indicates what will be drawn on the canvas, in this case some text:

Canvas {
  content: Text {
  …some code omitted…
  }
}

Drawing Text

To draw some text on the canvas, you use the Text class, supplying as attributes the x and y location (in pixels) at which the upper left-hand corner of the text should appear. The content attribute of the Text class contains the string that will be drawn, and the font attribute specifies the appearance of the text that will be drawn.

Text {
  font: Font {
    faceName: “Sans Serif”
    style: BOLD
    size: 24
  }
  x: 10
  y: 10
  content: “Hello JavaFX Script Developer!”
} 

Defining Fonts

And finally, at the innermost level of the declarative script that defines the UI for this application, we find the Font class (see the preceding code snippet). This class is used to specify the characteristics of the Text widget using the faceName, style, and size attributes shown.

Summary

Hopefully, you've achieved the objective of creating your first JavaFX Script program.  Feel free to play with the source code in the JavaFXPad window and watch the effects (for example, change the values assigned to the x, y, or content attributes of the Text object). Some future posts will build on the knowledge that you've gained in this one.  This post by the way, is an excerpt from my recently published book entitled "JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications", which is published by Apress.

Regards, and please provide feedback on the sort of JavaFX-related content that you'd like to see in this blog.

James L. (Jim) Weaver