Java is still the language used to create JavaFX applications but the user interface for JavaFX applications can be created one of two ways. The older method is to interleave Java layout and control statments into the rest of your Java classes and functions. The newer method is to use something called a FXML file, which is separate from the classes and functions of your application and allows you to “declare” how you want your user interface built.

Let’s jump right into creating the basic interface for Storytron 2.0 and hopefully this will become a bit clearer.

The basic user interface for Storytron 2.0, like most applications, will have a menubar at the top with one or more menus, a toolbar underneath the menubar for some editor-specific controls, and a tabbar underneath the toolbar to dispaly the various editors and allow switching between.

Storytron 2 Main Sketch

The FXML file that defines this very basic interface looks like this (for now we’re ignoring the scene list and the other scene editor components).

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuItem?>

<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.Button?>

<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.Tab?>

<VBox fx:controller="main.Controller" xmlns:fx="http://javafx.com/fxml">
    <children>
        <MenuBar>
            <menus>
                <Menu text="File">
                    <items>
                        <MenuItem text="Save"/>
                    </items>
                </Menu>
                <Menu text="Help">
                    <items>
                        <MenuItem text="About"/>
                    </items>
                </Menu>
            </menus>
        </MenuBar>
        <ToolBar>
            <items>
                <Button text="Back 0"/>
                <Button text="Back 1"/>
                <Button text="Stop"/>
                <Button text="Start"/>
                <Button text="+ Scene"/>
                <Button text="- Scene"/>
            </items>
        </ToolBar>
        <TabPane>
            <Tab text="Scenes"/>
            <Tab text="Actors"/>
        </TabPane>
    </children>
</VBox>

When the JavaFX program is run, the FXML file is used to create the main Storytron 2.0 interface.

Storytron 2 Main

This separation of concerns allows you to keep the code that creates your user interface separate from the code that governs how it functions.

In my next post I’ll tell you more about FXML, how a user interface created with it is organized, and what controls and layouts it offers the builder.