Professional Programming: Results of practical exercises, week 12: JavaFX + SceneBuilder + AnchorPanes

professional-programming-summer-2017-week-12.md

Today we extended the project from week 11 and created a base template. This base template contains an AnchorPane, where FX-elements from other FXML files can be appended to. Therefore, we can change on click our UI and load new elements to it.

// src/main/java/Main.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class Main extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root = FXMLLoader.load(getClass().getResource("base.fxml"));
        primaryStage.setTitle("Developer's Diary");
        primaryStage.setScene(new Scene(root, 640, 400));
        primaryStage.show();
    }
}

// src/main/java/Controller.java

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;

import java.io.IOException;

public class Controller {
    @FXML
    Label label;
    @FXML
    Button button;
    @FXML
    private AnchorPane pane = new AnchorPane();

    @FXML
    public void showNewEntryScene(ActionEvent actionEvent) throws IOException {
        AnchorPane subpane = FXMLLoader.load(getClass().getResource("new_entry.fxml"));
        pane.getChildren().setAll(subpane);
    }
    
    @FXML
    public void clickButton(MouseEvent event) throws IOException {
        System.out.println("Button clicked");
    }
}

<!-- src/main/resources/base.fxml -->

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<VBox prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8.0.131" xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="Controller">
    <children>
        <MenuBar VBox.vgrow="NEVER">
            <menus>
                <Menu text="Diary">
                    <items>
                        <MenuItem onAction="#showNewEntryScene" text="New Entry"/>
                    </items>
                </Menu>
            </menus>
        </MenuBar>
        <AnchorPane fx:id="pane" prefHeight="376.0" prefWidth="640.0"/>
    </children>
</VBox>

<!-- src/main/resources/new_entry.fxml -->

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.AmbientLight?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.TextFlow?>
<AnchorPane xmlns="http://javafx.com/javafx/8.0.131"
            xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controller">
    <VBox>
        <children>
            <AnchorPane maxHeight="-1.0" maxWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS">
                <children>
                    <Label alignment="CENTER" layoutX="155.0" layoutY="177.0" style="&#10;"
                           text="Drag components from Library here…" textAlignment="CENTER" textFill="#9f9f9f"
                           wrapText="false">
                        <font>
                            <Font size="18.0"/>
                        </font>
                    </Label>
                    <DatePicker fx:id="startDate" layoutX="31.0" layoutY="11.0" promptText="Start date"/>
                    <TextArea layoutX="31.0" layoutY="128.0" prefHeight="167.0" prefWidth="580.0" promptText="Content"/>
                    <TextField layoutX="31.0" layoutY="89.0" prefHeight="26.0" prefWidth="580.0" promptText="Title"/>
                    <DatePicker layoutX="413.0" layoutY="11.0" promptText="End date"/>
                    <Button fx:id="saveButton" layoutX="31.0" layoutY="317.0" mnemonicParsing="false"
                            text="Save Entry" textAlignment="CENTER"/>
                    <TextField layoutX="31.0" layoutY="50.0" promptText="Start time"/>
                    <TextField layoutX="412.0" layoutY="50.0" promptText="End time"/>
                    <AmbientLight color="CHARTREUSE" layoutX="320.0" layoutY="63.0" lightOn="true"/>
                </children>
            </AnchorPane>
            <TextFlow prefHeight="200.0" prefWidth="200.0"/>
        </children>
    </VBox>
</AnchorPane>

Result: