JavaFX application file structure (FXML, CSS, properties)

Earth display in equatorial coordinate system with JavaFX 3D (2) -File structure of JavaFX application-

This article is the 13th day of JavaFX Advent Calendar 2017. On the 12th day, HASUNUMA Kenji [About WebGL support of JavaFX 9 WebView](http://www.coppermine.jp/docs/notepad/2017/12/ javafx-9-webview-webgl.html).

This article is a continuation of the 11th day of JavaFX Advent Calendar 2017 Equatorial coordinate system earth display in JavaFX 3D (1).

Introduction

If you try to work on JavaFX from now on, you will probably face various barriers.

--Which is better, write only Java code, write FXML, or write CSS? ――Writing XML called FXML seems to be difficult and troublesome. --I don't really understand CSS ――What should you do with the class structure? Is there a structure like MVC? --How can I define and use a string resource in an external file?

In the earth display program in the equatorial coordinate system created with JavaFX introduced last time, the screen layout is created using the Scene Builder tool, an FXML file is generated, the color to be displayed on the screen is described in the CSS file, and the character string resource is It is described in the property file (English, Japanese).

The class structure is conscious of MVC (Model View Controller), the FXML file that defines the screen layout is the view, and the Java class that is paired with the FXML file is the controller. Models will be added at a later date.

When I first touched JavaFX, I used to use Swing, so it was bothersome and painful to remember and write another language (FXML, CSS) that I could write in Java code. .. However, once I understood how to use it and started to create screens using a tool called Scene Builder, it became very easy to create GUI programs.

Program structure

When you create a project for an application that uses FXML in JavaFX, most build tools (development environments) generate classes that inherit from the javafx.application.Application class, FXML files, and controller classes that pair with FXML.

In the first template of the earth display program in the equatorial coordinate system, the following file structure was used.

• com.torutk.satorbit
  • SatelliteOrbitsApp.java
  • SatelliteOrbitsView.fxml
  • SatelliteOrbitsViewController.java

When you create a new JavaFX FXML application project for NetBeans 8.2, the FXML and Java source files are generated in the same directory. In another build tool (Maven), the FXML file is placed in a different directory from the Java source code due to Maven's directory policy. However, the FXML file becomes a view and is closely related to the controller, so it's better to be in the same location as the controller.

About JavaFX file name naming

In NetBeans, the name of the FXML file given by default is FXMLDocument.fxml, and the source file name of the paired controller class is FXMLDocumentController.java. Therefore, I named it as follows so that I can understand the relationship with MVC.

The application name is closer to the project name than the specific class name. The name of each file is decided based on the application name given here.

The CSS file and the string resources used for the screen are named after the view so that it is clearly related to the view.

You may find it annoying to have a large number of files, but each file is simple.

Use Scene Builder to create views

Creating a view is easier with Scene Builder instead of editing FXML solidly.

Here is the screen that opens SatelliteOrbitsView.fxml in Scene Builder.

On the left side of the Scene Builer is a palette with each control (GUI parts) lined up, the screen layout configuration (tree), on the right side is detailed information on the selected control, and in the middle is the layout screen.

Display preview screen from Scene Builder

Choose Scene Builder's Preview menu> Show Preview in Window to open the screen layout as a separate program.

Even if there is no Java source code, you can execute the screen laid out only with FXML and operate the UI parts on it.

Specify CSS and properties for Scene Builder

Scene Builder's [Preview] menu has [Scene Style Sheets] and [Internationaization], and you can specify a CSS file and a property file to reflect them in the screen layout.

Property file specification

The screen shown above uses Japanese character string resources with SatelliteOrbits_ja.properties specified in the properties file. From the Scene Builder Preview menu> Internationalization> Set Resource ..., you can specify the English property file SatelliteOrbits.properties to change the display to English as follows:

The screen displayed in the preview also reflects the specified English properties as follows.

To use the string resource defined in the property file, prefix the Text property of the control with the% symbol and describe the key name of the item defined in the property file. The following example shows how to specify a string resource in the Text property of the Text control on Scene Builder.

The property file has the following description.

• SatelliteOrbits.properties legend.x_axis.text = X_AXIS

In order for the property file to be loaded by the actual JavaFX application instead of Scene Builder, specify the following in the application class.

SatelliteOrbitsApp.java

    public void start(Stage stage) throws Exception {
        ResourceBundle bundle = ResourceBundle.getBundle("com.torutk.satorbit.SatelliteOrbitsView");
        Parent root = FXMLLoader.load(getClass().getResource("SatelliteOrbitsView.fxml"), bundle);

Use java.util.ResourceBundle to specify the property file (specify by package name + file base name, not file path). Then pass the ResourceBundle generated from the properties file when loading the FXML file.

Specifying a CSS file

In the screen shown above, SatelliteOrbits.css is specified in the CSS file, and the text color of Text (X-axis, Y-axis, Z-axis) in the Legend column is defined from the CSS file.

On Scene Builder, define the definition (Style Class or Id) that can be specified by the CSS selector for the control you want to specify with CSS, and describe the selector and property in the CSS file. The following example shows that the selector name x_axis is specified in the Id property of the Text control.

The CSS file has the following description.

#x_axis {
    -fx-fill: red;
}

When specifying the Id property with the CSS selector, specify it with #.

Caution If you specify a CSS file in Scene Builder's [Preview] menu> [Scene Style Sheets], it will be reflected only in Scene Builder. When executing as a Java program, it is necessary to set to read the CSS file separately. Here are two setting methods.

--Read the CSS file with Java source code (application class) and set it in Scene --Set CSS file in Stylesheets property of top level container in Scene Builder

The following is an example of specifying the CSS file in the Stylesheets property of the top-level container (BorderPane) on Scene Builder in the second method.

Scene Builder Summary

With Scene Builder,

--You don't have to write the FXML file by hand --Layout can be created without writing Java code ――It is possible to quickly check by modifying and displaying on the screen. --Less Java code description required

There are merits such as.