Skip to main content

the fxjs logo - A Smarter FXML Alternative

the fxjs logo is a smarter alternative to FXML and the JavaFX API. It has the following features.

  • A FXML alternative that uses JavaScript for declarative GUI definition
  • A way of writing JavaFX applications entirely or partly in JavaScript
  • APIs that enable Java (and other JVM language) programs to use the fxjs logo

The current version of the fxjs logo already (August 2012) has most of the above features. Examples of its use can be seen in More UI Examples. The interpreter is small enough (< 50 Kb) to easily embed in other programs.

To start using the fxjs logo go to the Quick Start Guide. For more information about the fxjs logo check the links in the left margin.

Hello World in the fxjs logo

Let's try to write the JavaFX tutorial's Hello World program in the fxjs logo. Enter the following text into a file called HelloWorld.js:

{T: fxStage, title: "Hello World!",
  scene: {T: fxScene, width: 300, height: 250, 
    root: {T: fxStackPane, 
      children: [
        {T: fxButton, text: "Say 'Hello World'", onAction: 
             function (e) {println('Hello World!');}}
      ]
    }
  }
}

Then use the commands described in Quick Start Guide to run the script. The window shown in Figure-1 below should be displayed, and clicking the button should print "Hello World" in the console window.

the hello-world window
Figure-1. The "Hello World" program

An FXML Example

The following text is an the fxjs logo translation of the FXML text in Using FXML to Create a User Interface.

{T: fxStage, title: "JavaFX Welcome",
  scene: {T: fxScene, width: 300, height: 275, 
    root: {T: fxGridPane, vgap: 10, hgap: 10, alignment: fxCENTER,
      padding: {T: fxInsets, top: 25, right: 25, bottom: 25, left: 25}, 
      stylesheets: "file:Login.css", 
      children: [
        {T: fxText, id: "welcome-text", text: "Welcome", 
            font: {T: fxFont, name: "Tahoma", size: 20},
            rowIndex: 0, columnIndex: 0, columnSpan: 2, rowSpan: 1},
        {T: fxLabel, text: "User Name:", rowIndex: 1, columnIndex: 0},
        {T: fxTextField, rowIndex: 1, columnIndex: 1},
        {T: fxLabel, text: "Password:", rowIndex: 2, columnIndex: 0},
        {T: fxPasswordField, rowIndex: 2, columnIndex: 1},
        {T: fxHBox, spacing: 10, rowIndex: 4, columnIndex: 1, 
          alignment: fxBOTTOM_RIGHT,
          children: [{T: fxButton, text: "Sign in", 
            onAction: function (e) {
              this.actiontarget.setFill(fxFIREBRICK);
              this.actiontarget.setText("Sign in button pressed");
            }
          }]
        }, 
        {T: fxText, fxid: "actiontarget", rowIndex: 6, columnIndex: 1},
      ]
    }
  }
}

Running this the fxjs logo script as described above should present the JavaFX window shown in Figure-2 below. Remember to download the stylesheet supporting files from Login.css and background.jpg.

the Welcome window
Figure-2. The "Welcome" window

To start using the fxjs logo go to the Quick Start Guide.

Future Roadmap

the fxjs logo exists to simplify the creation of JavaFX applications. It will enable users to reduce the number and types of files required to create JavaFX applications to the extent desired. It should also allow JavaFX applications to be written entirely in JavaScript. Current development status and future plans are detailed in the Roadmap

 
 
Close
loading
Please Confirm
Close