Difference between revisions of "Efxclipse/Tooling/FXGraph"

(New page: = What is FXGraph? = == A short introduction == FXGraph is a simple DSL for the definition of a JavaFX 2.x object graph. Instead of generating Java source or byte code, it generates FXML, ...)

As you can see, the definition of an object graph with FXGraph looks quite similar to JSON, but because Java (unlike !JavaScript) has the concept of a package, you 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 the {{{component}}} keyword which typically matches the filename - so the above definition would be stored in a file called HelloWorld.fxgraph.

The attribute and its value are separated 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 in a following section of this document as they require a special syntax.

Run 'Hello World'

Among the attachments at the bottom of the page, you will find a simple Java project to run the "Hello_world" example ([[1]]).

Think of the FXGraph file as a source file for your UI. The FXGraph needs to be loaded as a FXML file JavaFX scene. The e(fx)clipse project will translate the FXGraph "Hello_world.fxgraph" specification file to a "Hello_world.fxml" file.

At runtime, your program will look along the directories in the CLASSPATH for program resources. The most simple way to get your UI to display is:

At this point, you have a loaded Java class that matches your FXGraph UI description. To see it on the screen, is the same as any other JavaFX scene:

Scene s =new Scene(p);
primaryStage.setScene(s);
primaryStage.show();

That along with the factory code in [);] shown in [[2]] is enough to show the Hello_world window. Give it a go and then read further. (Please note that the [[3]] demo is a minimal example to launch an FXGraph specification). Have fun ...

Externalising strings

There's more than one language spoken

Often, a UI has to support multiple locales so instead of putting the strings used in the UI directly into the UI definition one puts them into an external resource and loads the correct one based upon the users locale.

A standard Java way for providing such locale information is to put the values into a property file and load them at runtime using java.lang.ResourceBundle.

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:

Connecting to a controller

How to handle UI callbacks

Every modern UI has to respond to user interaction: if a user clicks a button, for instance, we'd like to react on the button click. One typically implements such UI callbacks in a programming language like Java, !JavaScript, etc.

Objects outside the UI tree

How to define and reference

FXML represents the tree structure of your UI but there are some objects living outside this tree. One such example is a toggle group instance that is used to link, e.g., radio buttons together. The creation of an object that is not part of the tree structure and referencing it inside the UI later on is done through so called defines.

The usage of idref is not restricted to elements created through defines. It can be used to reference any other element marked with id.

Using factory methods

You are not a Java bean?

FXGraph allows you to define observable collections (set, list, map) using the factory methods of the FXCollection class as described here. For instance, an observable list that serves as input for a choice box can be defined in the following way:

In this example, the static methods GridPane.setRowIndex(Node child, Integer value) and GridPane.setColIndex(Node child, Integer value are called from the nodes that need to be laid out in the grid pane. You do not have to specify explicitly the child parameter or the class on which the static methods are called since they are implied from the tree structure.

The HelloWorldController can reference the top-level HBox of the World component by the name defined with the as keyword, i.e., world. Furthermore, the WorldController can be referenced from the HelloWorldController using the implied worldController variable:

Defining locations

Resource locations like URLs can be defined in FXGraph using the {{{location}}} keyword. In equivalence with the corresponding CSS element, the location can be specified either absolute (e.g. "!http://...") or relative to the location of the file it is defined in. Here's an example of a button whose image is defined in a local file:

Referencing a root element

FXML allows for defining a <fx:root> element with which you can reference a previously defined root element (see here). This feature is particularly useful when working with custom controls. In order to do the same with your FXGraph component, use the dynamic keyword:

Pimping up the preview

The preview keyword allows you to make elements appear in the live preview without adding them to FXML code. For instance, the following example creates three string items for the choice box that will be shown only in the preview.