Setting the Stage to Develop Larger JavaFX Script Apps

The first post in this blog (Develop and Run Your First JavaFX Script Program in the Next Few Minutes) was designed to give you a quick start with JavaFX Script.  In it, I showed you how to invoke JavaFXPad directly from the Project OpenJFX site and paste a Hello World-style program into it.  The second post in this blog (Want to Take a Deep Dive into some JavaFX Script UI Widgets?) introduced you to the JavaFX plug-ins for NetBeans and Eclipse.  JavaFXPad is great for playing around with sample code, but to develop non-trivial applications, I'd suggest using one of these IDEs with the associated JavaFX plug-in.

It's Time to Get the Project OpenJFX Download

Another suggestion for getting serious about JavaFX development is to download the JavaFX runtime, library files, and demo programs from the Project OpenJFX web site. I highly recommend doing this, as it will give you access to the source code for the JavaFX classes, some JavaFX demos, and the JavaFX runtime libraries, in addition to JavaFXPad. You can obtain this great package in both .zip or .tar.gz formats at the following URL:

https://openjfx.dev.java.net/servlets/ProjectDocumentList.

If you prefer direct access to the latest releases in the JavaFX code repository via a Subversion version control client, you can get this same software at the following URL:

https://openjfx.dev.java.net/source/browse/openjfx/.

Please go ahead and obtain the JavaFX software package from the Project OpenJFX site, as some of the instructions in this post and future posts assume that you’ve downloaded it.

<pause waitingOnYou = "true"/>

Now that you've obtained the ProjectOpenJFX download, I want to go ahead and show you a couple of things:

• How to run JavaFXPad locally
• How to run a JavaFX Script program from the command line

Running JavaFXPad Locally

You can run JavaFXPad on your machine by executing the proper script for your platform, located in the trunk/demos/javafxpad folder of the ProjectOpenJFX download. Mine is installed on Windows, so I set the PATH environment variable to that folder and execute the javafxpad.bat file.

Running a JavaFX Script Program from the Command Line

To demonstrate this running a JavaFX Script program from the command line, I'd like you to run the HelloJFXBind program that I showed you in Your Second JavaFX Script Program - The Wonders of Binding to a Model. Please cut that code and paste it into a text editor of your choice, and save it as plain text with an FX file extension (I named mine HelloJFXBind.fx) in a folder named jfx_book.  This folder placement is because the HelloJFXBind program has the following package statement:

package jfx_book;

To run this JavaFX Script program from the command line, set your PATH environment variable to include the trunk/bin folder of the ProjectOpenJFX download.  With the command prompt located in the folder in which the packages for the application are based (in this case the parent folder of the jfx_book folder), run a command similar to the following one, which I used on a Windows platform:

javafx.bat jfx_book.HelloJFXBind

By the way, there is a javafx.sh file in the trunk/bin folder as well. Notice that you need to use the fully qualified name (including the package name) of the JavaFX file that you want to run.

Note: If you have any problem with this step, specifically if you receive a "not found: jfx_book/HelloJFXBind.fx" error, set your CLASSPATH environment variable to nothing, and try it again.

Moving the HelloJFXModel Class into Its Own File

As an application gets more complex, it becomes prudent to organize the code into multiple files, and those files into multiple packages. We’ll take a step in that direction now by splitting the HelloJFXModel class out of the HelloJFXBind.fx file into its own FX file.  When a JavaFX class is in a separate file, in order for it to be found at runtime it needs to be in a file with the same name as the class. The listing below contains the code that I’d like you to save into a file named HelloJFXModel.fx and the listing after that contains the declarative code for the UI that I’d like you to save into a file named HelloJFXBind2.fx (with a minor modification that I’ll tell you about in a moment).

HelloJFXModel.fx

/*
 *  HelloJFXModel.fx - The model behind a JavaFX Script "Hello World" style
 *                     example of binding.
 *
 *  Developed 2007 by James L. Weaver (jim.weaver at lat-inc dot com)
 */
package jfx_book;

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

HelloJFXBind2.fx

/*
 *  HelloJFXBind2.fx - A JavaFX Script "Hello World" style example 
 *                     binding to a model that is located in its own file.
 *
 *  Developed 2007 by James L. Weaver (jim.weaver at lat-inc dot com)
 */
package jfx_book;

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

/**
 * This is a JavaFX Script that binds to data from the model.
 */
Frame {
  var hellojfxModel = 
    HelloJFXModel {
      greeting: "Howdy JavaFX Script Developer!"
    }
  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
}

Notice that both files are in the same package (jfx_book), so they both need to be located in a folder named jfx_book. To run this program, use the following from the command line:

javafx.bat jfx_book.HelloJFXBind2

When the code that references the HelloJFXModel class is encountered (see the following code snippet), the JavaFX runtime will look for a file named HelloJFXModel.fx in the jfx_book folder and make an instance of the class.

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

The preceding code snippet is the minor modification that I told you about, by the way.  It demonstrates the idea that you can declare variables in the midst of declarative code. In this case, I’ve moved this code snippet from directly above the declarative code block that begins with Frame to inside that block. You may have noticed that it was necessary to remove the semicolon from the end of the statement, because it is no longer a single statement, but rather part of the larger declarative expression. The variable that is declared only exists within the block in which it is declared, so the scope of the hellojfxModel variable is from the Frame opening curly brace to the matching closing curly brace. If we had declared it in the Canvas block, the scope would have been limited to that block.

Special Instructions for Running This Example with JavaFXPad

When using one of the IDEs, your project will have a base from which it will look for the necessary FX files at runtime. When using javafx from the command line, the current folder is the base.  When using JavaFXPad, you have to tell it what that base folder is. In this case, it is the parent folder of the jfx_book folder that you created. From the Run ➤ Source Path menu option in JavaFXPad, choose that folder. Load the HelloJFXBind2.fx file located in the jfx_book folder (using the File ➤ Open menu), and you should see the output shown below:

Note: In JavaFXPad, unless you specify otherwise in the Run menu, a program file that you Open will run automatically.

Before closing out this post, I'd like to show you a very commonly used way of deploying your JavaFX Script applications.

Deploying a JavaFX Script Application Via Java Web Start (JNLP)

You may recall that in the Spotting JavaFX Apps in the Wild - A Freebase Browser post, the Freebase Browser is deployed via Java Web Start.  There is an excellent resource on PlanetJFX that explains how to deploy a JavaFX Script application via Java Web Start.  It demonstrates how to create a jar file, create a jnlp file, create a signature key, and sign the jars, etc.  Note that there are a couple of jar files that you'll want to put on your web server that come with the Project OpenJFX download (see how this all ties together)? :-)  These files are discussed in the PlanetJFX article, and may be found in the trunk/lib folder of the download.  There is a third file not mentioned, named Filters.jar, that you'll need to sign and put on your web server if you are using any of the 2D filters in your JavaFX application.  Let's save 2D graphics for another day.

Portions of this post are excerpts from my JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications book, published by Apress.  As always, your feedback, comments and questions are welcome!

Regards,
Jim Weaver

Comments

[hypnoman]

Thanks for the info, very enlightening..enjoyed the info...thanks again!

[Jim Weaver]

Antonov,

Thanks for your kind words about my book. The folks at Sun will be happy to know that you're enjoying NetBeans!

Thanks,
Jim Weaver

[Antonov]

Thank you so much for your response. Before running this sample I have installed Eclipse JavaFX plug-in. I make this sample with the same package and class name but it not work. But it work successfully in NetBeans 6. I like the develope environment in NetBean after this test. It`s JavaFX interface seem more rich than Eclipse. Last, your book is a good reference help me geting start to learn JavaFX quickly. Thank you.

[Jim Weaver]

Antonov,
I assume that you are trying to run the example in this post. You said that you are using Eclipse. Are you using the JavaFX plug-in with Eclipse and running it within Eclipse? If so, did you create the package named jfx_book and put both source files in that package? Please verify all of this, and let me know if it does or does not run successfully.
Thanks,
Jim Weaver