Like with any other language let's start with an Hello World application to explain the main building blocks

package at.bestsolution.efxclipse.tutorial.fxgraph
import javafx.scene.control.*
import javafx.scene.layout.*
component HelloWorld {
  BorderPane {
    center : Button {
      text : "Hello World"
    }
  }
}

As you'll directly notice the language looks quite similar to JSON to define an object graph but because Java unlike JavaScript has the concept of a package on can import classes from a package so that you don't have to specify the fully qualified name.

Another difference to JSON is that the definition starts with a component keyword which typically matches the filename so you the above definition is stored in a file called HelloWorld.fxgraph

The attribute and its value are seperated by the ":" (colon) and the following simple values are supported directly:

• String
• Number (integer and decimal numbers)
• Object-Definition

More complex values (method references, object references, ...) are described later in the document because they require a special syntax

Normally every UI has to support multiple locales and so instead of putting the UI-Strings directly in to the UI-Definition one puts them into an external resource and loads the correct one based upon the users locale.

A standard way in java to provide such locale informations is that one puts them values in a Properties-File and loads them using java.lang.ResourceBundle at runtime.

Let's suppose you have a message.properties file located next to your HelloWorld.fxgraph-File with the following content:

mybutton.label = Hello World

You can reference the file and the property in your fxgraph-File like this:

package at.bestsolution.efxclipse.tutorial.fxgraph
import javafx.scene.control.*
import javafx.scene.layout.*
component HelloWorld resourcefile "messages.properties" {
  BorderPane {
    center : Button {
      text : rstring "button.label"
    }
  }
}

An UI that does not respond to user interaction is quite meaningless so e.g. if a user clicks a button we'd like to react on the button press. One typically implements such UI callbacks in a programming language like Java, JavaScript, ... .

Let's react on the button press using a controller like this:

package at.bestsolution.efxclipse.tutorial.fxgraph;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
public class HelloWorldController {
  @FXML
  public void clicked(ActionEvent event) {
    System.out.println("Button clicked");
  }
}

Referencing methods like the above is quite easy using the "controllermethod" keyword:

package at.bestsolution.efxclipse.tutorial.fxgraph
import javafx.scene.control.*
import javafx.scene.layout.*
import at.bestsolution.efxclipse.tutorial.fxgraph.*
component HelloWorld controlledby HelloWorldController resourcefile "messages.properties" {
  BorderPane {
    center : Button {
      text : rstring "button.label"
      onAction : controllermethod clicked
    }
  }
}

FXML propagates a clean seperation between UI defined in the FXML-File and business logic implemented in a programming language like Java, JavaScript, ... .

A controller could look like this:

package at.bestsolution.efxclipse.tutorial.fxgraph;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
public class HelloWorldController {
  @FXML
  public Button myButton;
  @FXML
  public void clicked(ActionEvent event) {
    System.out.println("Button clicked");
  }
}

You can make the FXMLLoader set the myButton-Field by using the id keyword

package at.bestsolution.efxclipse.tutorial.fxgraph
import javafx.scene.control.*
import javafx.scene.layout.*
import at.bestsolution.efxclipse.tutorial.fxgraph.*
component HelloWorld controlledby HelloWorldController resourcefile "messages.properties" {
  BorderPane {
    center : Button id myButton {
      text : rstring "button.label"
      onAction : controllermethod clicked
    }
  }
}

FXGraph files can be previewed while rendering but because most UI-Themeing informations in JavaFX applications are configured through CSS the preview needs to know which css-File it should apply.

package at.bestsolution.efxclipse.tutorial.fxgraph
import javafx.scene.control.*
import javafx.scene.layout.*
import at.bestsolution.efxclipse.tutorial.fxgraph.*
component HelloWorld controlledby HelloWorldController styledwith ["hello.css"] resourcefile "messages.properties" {
  BorderPane {
    center : Button id myButton {
      text : rstring "button.label"
      onAction : controllermethod clicked
    }
  }
}

Inside the square bracket you can provide multiple css-files. The path you are allowed to use are:

• Relative to the fxgraph-File
  e.g. hello.css
• Absolute to the project by starting the path using "/"
  e.g. /css/test.css
• Absolute to the workspace by using "platform:/resource/${projectname}/..."
  e.g. platform:/resource/at.bestsolution.efxclipse.testcases.fxgraph/css/test.css

Having only one CSS-File is a very common usecase so you can omit the square brackets if you only want to reference a single css-File

package at.bestsolution.efxclipse.tutorial.fxgraph
import javafx.scene.control.*
import javafx.scene.layout.*
import at.bestsolution.efxclipse.tutorial.fxgraph.*
component HelloWorld controlledby HelloWorldController styledwith "hello.css" resourcefile "messages.properties" {
  BorderPane {
    center : Button id myButton {
      text : rstring "button.label"
      onAction : controllermethod clicked
    }
  }
}

FXML represents the tree structure of UI but there are some objects living outside this tree. One such an example is a ToggleGroup-instance which is used to link e.g. RadioButtons together. To create an object which is not part of the tree structure and reference it inside the UI later on is done through so called defines.

Defines can be added at the beginning of the component definition:

package at.bestsolution.efxclipse.tutorial.fxgraph
import javafx.scene.control.*
import javafx.scene.layout.*
import at.bestsolution.efxclipse.tutorial.fxgraph.*
component HelloWorld controlledby HelloWorldController styledwith "hello.css" resourcefile "messages.properties" {
  define ToggleGroup id myRadioGroup
  BorderPane {
    center : Button id myButton {
      text : rstring "button.label"
      onAction : controllermethod clicked
    }
  }
}

If you now have to reference such an element you do this using the idref keyword.

package at.bestsolution.efxclipse.tutorial.fxgraph
import javafx.scene.control.*
import javafx.scene.layout.*
import at.bestsolution.efxclipse.tutorial.fxgraph.*
component HelloWorld controlledby HelloWorldController styledwith "hello.css" resourcefile "messages.properties" {
  define ToggleGroup id myRadioGroup
  BorderPane {
    top : HBox {
      children : [
        RadioButton {
          text : "Option 1",
          toggleGroup : idref myRadioGroup
        },
        RadioButton {
          text : "Option 2",
          toggleGroup : idref myRadioGroup
        }
      ]
    },
    center : Button id myButton {
      text : rstring "button.label"
      onAction : controllermethod clicked
    }
  }
}

The useage of the idref is not restricted to elements created through defines but can be used to reference any other element marked with an id