Aufgabe 4 Designanpassung.

code/Calculator/build.gradle

@@ -6,6 +6,14 @@ plugins {
     id 'java'
     // Apply the application plugin to add support for building a CLI application.
     id 'application'
+    // Adding JavaFX support and dependencies
+    id 'org.openjfx.javafxplugin' version '0.0.12'
+}
+
+// Configuration for JavaFX plugin
+javafx {
+    version = '17'
+    modules = [ 'javafx.controls', 'javafx.fxml' ]
 }
 
 // Project/Module information

code/Calculator/src/main/java/ch/zhaw/prog2/calculator/Main.java

@@ -3,8 +3,6 @@ package ch.zhaw.prog2.calculator;
 
 import javafx.application.Application;
 import javafx.application.Platform;
-import javafx.beans.value.ChangeListener;
-import javafx.beans.value.ObservableValue;
 import javafx.event.ActionEvent;
 import javafx.event.EventHandler;
 import javafx.geometry.Insets;
@@ -17,8 +15,28 @@ import javafx.scene.paint.Color;
 import javafx.stage.Stage;
 
 public class Main extends Application {
-
+    private static int VERTICAL_GAP = 5;
+    private static int HORIZONTAL_GAP = 10;
 	private Stage primaryStage;
+    private CheckMenuItem clearInitialAmount = new CheckMenuItem("Initial amount");
+    private CheckMenuItem clearReturnInPercent = new CheckMenuItem("Return in %");
+    private CheckMenuItem clearAnnualCosts = new CheckMenuItem("Annual Costs");
+    private CheckMenuItem clearNumberOfYears = new CheckMenuItem("Number of years");
+    private TextField initialAmount = new TextField();
+    private TextField returnInPercent = new TextField();
+    private TextField annualCost = new TextField();
+    private TextField numberOfYears = new TextField();
+    private TextArea results = new TextArea();
+
+    private static final String INFO = """
+        Enter valid values to
+        - Initial amount (> 0)
+        - Return in % (can be +/- or 0)
+        - Annual Costs (> 0)
+        - Number of years (> 0)
+        Calculate displays the annual balance development!";
+        """;
+
 
 	public static void main(String[] args) {
 		launch(args);
@@ -37,10 +55,14 @@ public class Main extends Application {
 	private void mainWindow() {
 		try {
 			BorderPane rootPane = new BorderPane();
-			//BorderPane top
-	        MenuBar menuBar = new MenuBar();
+            createMenu(rootPane);
 
-			// Create scene with root node with size
+
+            createInputOutputPanel(rootPane);
+
+            createButtons(rootPane);
+
+            // Create scene with root node with size
 			Scene scene = new Scene(rootPane, 600, 400);
 			// scene.getStylesheets().add(getClass().getResource("MyLabel.css").toExternalForm());
 			primaryStage.setMinWidth(280);
@@ -55,6 +77,132 @@ public class Main extends Application {
 		}
 	}
 
+    private void createButtons(BorderPane rootPane) {
+        HBox buttons = new HBox(HORIZONTAL_GAP);
+        buttons.setAlignment(Pos.BASELINE_CENTER);
+
+        Button closeButton = new Button("Close");
+        Button calculateButton = new Button("Calculate");
+        closeButton.setOnAction(e -> Platform.exit());
+        calculateButton.setOnAction(new EventHandler<ActionEvent>() {
+            @Override
+            public void handle(ActionEvent event) {
+                ValueHandler valueHandler = new ValueHandler();
+                valueHandler.checkValuesAndCalculateResult(initialAmount.getText(), returnInPercent.getText(), annualCost.getText(), numberOfYears.getText());
+                String result = valueHandler.getResultBound();
+                if(valueHandler.areValuesOk()){
+                    showResult(result, true, Color.GREEN);
+                } else {
+                    showResult(result, false, Color.RED);
+                }
+            }
+        });
+
+        buttons.getChildren().addAll(calculateButton, closeButton);
+        buttons.setPadding(new Insets(VERTICAL_GAP, HORIZONTAL_GAP, VERTICAL_GAP, HORIZONTAL_GAP));
+        rootPane.setBottom(buttons);
+    }
+
+    private void createInputOutputPanel(BorderPane rootPane) {
+        VBox inputOutputPanel = new VBox(VERTICAL_GAP);
+        GridPane inputPanel = new GridPane();
+        VBox resultRows = new VBox();
+        inputOutputPanel.getChildren().add(inputPanel);
+        inputOutputPanel.getChildren().add(resultRows);
+
+        createInputPanel(inputPanel);
+
+        resultRows.getChildren().add(new Label("Results:"));
+        resultRows.getChildren().add(results);
+        resultRows.setPadding(new Insets(VERTICAL_GAP, HORIZONTAL_GAP, VERTICAL_GAP, HORIZONTAL_GAP));
+
+        rootPane.setCenter(inputOutputPanel);
+    }
+
+    private void createInputPanel(GridPane inputPanel) {
+        inputPanel.setVgap(5);
+        inputPanel.setHgap(5);
+        inputPanel.add(new Label("Initial amount"), 0, 1);
+        inputPanel.add(new Label("Return rate in %"), 0, 2);
+        inputPanel.add(new Label("Annual cost"), 0, 3);
+        inputPanel.add(new Label("Number of years"), 0, 4);
+        inputPanel.add(initialAmount, 1, 1);
+        inputPanel.add(returnInPercent, 1, 2);
+        inputPanel.add(annualCost, 1, 3);
+        inputPanel.add(numberOfYears, 1, 4);
+        inputPanel.setPadding(new Insets(VERTICAL_GAP, HORIZONTAL_GAP, VERTICAL_GAP, HORIZONTAL_GAP));
+    }
+
+    private void createMenu(BorderPane rootPane) {
+        //BorderPane top
+        MenuBar menuBar = new MenuBar();
+
+        Menu clearMenu = new Menu("Clear");
+        Menu helpMenu = new Menu("?");
+
+        // Create MenuItems
+        MenuItem clearValues = new MenuItem("Clear values");
+        clearValues.setId("clearValues");
+        MenuItem clearResults = new MenuItem("Clear results");
+        clearResults.setId("clearResults");
+        MenuItem helpShowText = new MenuItem("Show help");
+
+        clearMenu.getItems().addAll(clearInitialAmount, clearReturnInPercent, clearAnnualCosts, clearNumberOfYears);
+        clearMenu.getItems().addAll(new SeparatorMenuItem(), clearValues, new SeparatorMenuItem(), clearResults);
+        helpMenu.getItems().add(helpShowText);
+
+        menuBar.getMenus().addAll(clearMenu, helpMenu);
+        //using an inner class
+        ClearHandler clearHandler = new ClearHandler();
+        clearValues.addEventHandler(ActionEvent.ACTION, clearHandler);
+        clearResults.addEventHandler(ActionEvent.ACTION, clearHandler);
+
+        helpShowText.setAccelerator(KeyCombination.keyCombination("F1"));
+        helpShowText.setOnAction(new EventHandler<ActionEvent>() {
+            @Override
+            public void handle(ActionEvent event) {
+                showResult(INFO, true, Color.BLUE);
+            }
+        });
+        rootPane.setTop(menuBar);
+    }
+
+    /*
+     * Handler to clear the controls
+     */
+    private class ClearHandler implements EventHandler<ActionEvent> {
+
+        @Override
+        public void handle(ActionEvent event) {
+            switch (((MenuItem) event.getSource()).getId()) {
+                case "clearValues" -> {
+                    if (clearInitialAmount.isSelected()) {
+                        initialAmount.clear();
+                    }
+                    if (clearAnnualCosts.isSelected()) {
+                        annualCost.clear();
+                    }
+                    if (clearNumberOfYears.isSelected()) {
+                        numberOfYears.clear();
+                    }
+                    if (clearReturnInPercent.isSelected()) {
+                        returnInPercent.clear();
+                    }
+                }
+                case "clearResults" -> results.clear();
+            }
+        }
+    }
+
+    private void showResult(String text, boolean clearFirst, Color backColor){
+        if(clearFirst) {
+            results.setText(text);
+        }else{
+            results.appendText("\n" + text);
+        }
+        results.setBorder(new Border(new BorderStroke(backColor, BorderStrokeStyle.SOLID, CornerRadii.EMPTY, new BorderWidths(1))));
+    }
+
 
 }
 

code/FXML-Calculator/build.gradle

@@ -34,7 +34,7 @@ application {
 // Configuration for JavaFX plugin
 javafx {
     version = '17'
-    modules = [ 'javafx.controls' ]
+    modules = [ 'javafx.controls', 'javafx.fxml' ]
 }
 
 // Java plugin configuration

code/FXML-Calculator/src/main/java/ch/zhaw/prog2/fxmlcalculator/IsObservable.java

@@ -0,0 +1,18 @@
+package ch.zhaw.prog2.fxmlcalculator;
+/**
+ * Most basic interface for observing an object
+ * @author bles
+ *
+ */
+public interface IsObservable {
+	/**
+	 * Add an observer that listens for updates
+	 * @param observer
+	 */
+	void addListener(IsObserver observer);
+	/**
+	 * Remove an observer from the list
+	 * @param observer
+	 */
+	void removeListener(IsObserver observer);
+}

code/FXML-Calculator/src/main/java/ch/zhaw/prog2/fxmlcalculator/IsObserver.java

@@ -0,0 +1,13 @@
+package ch.zhaw.prog2.fxmlcalculator;
+/**
+ * Most basic interface for beeing an observer
+ * @author bles
+ *
+ */
+public interface IsObserver {
+	/**
+	 * This method is always called when an observed object
+	 * changes
+	 */
+	void update();
+}

code/FXML-Calculator/src/main/java/ch/zhaw/prog2/fxmlcalculator/Main.java

@@ -5,19 +5,33 @@ import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
 import javafx.scene.layout.Pane;
 import javafx.stage.Stage;
+
+import java.io.IOException;
+
 /**
  * Main-Application. Opens the first window (MainWindow) and the common ValueHandler
- * @author 
+ * @author
  * @version 1.0
  */
 public class Main extends Application {
 
     private ValueHandler valueHandler;
 
+    private static final String INFO = """
+        Enter valid values to
+        - Initial amount (> 0)
+        - Return in % (can be +/- or 0)
+        - Annual Costs (> 0)
+        - Number of years (> 0)
+        Calculate displays the annual balance development!";
+        """;
+
 	public static void main(String[] args) {
 		launch(args);
 	}
 
+
+
 	@Override
 	public void start(Stage primaryStage) {
 		valueHandler = new ValueHandler();
@@ -26,7 +40,31 @@ public class Main extends Application {
 
 	private void mainWindow(Stage primaryStage) {
 		//load main window
+        try {
+
+
+            FXMLLoader mainWindowLoader = new FXMLLoader(getClass().getResource("MainWindow.fxml"));
+            Pane rootNode = mainWindowLoader.load();
+
+            MainWindowController mainWindowController = mainWindowLoader.getController();
+            mainWindowController.setValueHandler(new ValueHandler());
+            mainWindowController.setHelpText(INFO);
+            Scene mainWindowScene = new Scene(rootNode);
+
+            primaryStage.setScene(mainWindowScene);
+            primaryStage.setMinWidth(400);
+            primaryStage.setMinHeight(320);
+            primaryStage.show();
+        } catch(Exception e) {
+            e.printStackTrace();
+        }
 	}
 
+
+
+
+
+
+
 }
 

code/FXML-Calculator/src/main/java/ch/zhaw/prog2/fxmlcalculator/MainWindowController.java

@@ -1,22 +1,136 @@
 package ch.zhaw.prog2.fxmlcalculator;
 
-
+import javafx.application.Platform;
+import javafx.event.ActionEvent;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
 import javafx.scene.control.CheckMenuItem;
+import javafx.scene.control.Label;
 import javafx.scene.control.TextArea;
 import javafx.scene.control.TextField;
 import javafx.scene.layout.*;
 import javafx.scene.paint.Color;
 import javafx.stage.Stage;
+import javafx.scene.Scene;
+
+import javax.xml.transform.Result;
+import java.io.IOException;
 
-/**
- * Controller for the MainWindow. One controller per mask (or FXML file)
- * Contains everything the controller has to reach in the view (controls)
- * and all methods the view calls based on events.
- * @author
- * @version 1.0
- */
 public class MainWindowController {
-	// please complete
+    ValueHandlerDecorator valueHandlerDecorator;
+    ValueHandler valueHandler;
+    String helpText;
+
+    @FXML
+    private TextField annualCost;
+
+    @FXML
+    private CheckMenuItem clearAnnualCosts;
+
+    @FXML
+    private CheckMenuItem clearInitialAmount;
+
+    @FXML
+    private CheckMenuItem clearNumberOfYears;
+
+    @FXML
+    private CheckMenuItem clearReturnInPercent;
+
+    @FXML
+    private TextField initialAmount;
+
+    @FXML
+    private TextField numberOfYears;
+
+    @FXML
+    private TextArea results;
+
+    @FXML
+    private TextField returnInPercent;
+
+    @FXML
+    void calculate(ActionEvent event) {
+        valueHandlerDecorator.checkValuesAndCalculateResult(initialAmount.getText(), returnInPercent.getText(), annualCost.getText(), numberOfYears.getText());
+        if(valueHandler.areValuesOk()){
+            results.setBorder(new Border(new BorderStroke(Color.GREEN, BorderStrokeStyle.SOLID, CornerRadii.EMPTY, new BorderWidths(2))));
+        }else {
+            results.setBorder(new Border(new BorderStroke(Color.RED, BorderStrokeStyle.SOLID, CornerRadii.EMPTY, new BorderWidths(2))));
+        }
+    }
+
+    @FXML
+    void clearResults(ActionEvent event) {
+        valueHandlerDecorator.clearResult();
+        results.setBorder(null);
+    }
+
+
+    @FXML
+    void clearValues(ActionEvent event) {
+        if(clearAnnualCosts.isSelected()){
+            annualCost.clear();
+        }
+        if(clearReturnInPercent.isSelected()){
+            returnInPercent.clear();
+        }
+        if(clearNumberOfYears.isSelected()){
+            numberOfYears.clear();
+        }
+        if(clearInitialAmount.isSelected()){
+            initialAmount.clear();
+        }
+    }
+
+    @FXML
+    void close(ActionEvent event) {
+        Platform.exit();
+    }
+
+    @FXML
+    void openResultWindow(ActionEvent event) {
+
+        FXMLLoader resultWindowLoader = new FXMLLoader(getClass().getResource("ResultWindow.fxml"));
+        Pane resultNode = new StackPane();
+        try {
+            resultNode = resultWindowLoader.load();
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+        ResultWindowController resultWindowController = resultWindowLoader.getController();
+        resultWindowController.setValueHandler(valueHandler, valueHandlerDecorator);
+        Scene resultScene = new Scene(resultNode);
+
+        // New window (Stage)
+        Stage resultStage = new Stage();
+        resultStage.setTitle("Results");
+        resultStage.setScene(resultScene);
+
+        resultStage.show();
+
+        valueHandlerDecorator.informListener();
+    }
+
+
+    @FXML
+    void showHelp(ActionEvent event) {
+        valueHandlerDecorator.showHelp(helpText);
+        results.setBorder(new Border(new BorderStroke(Color.BLUE, BorderStrokeStyle.SOLID, CornerRadii.EMPTY, new BorderWidths(2))));
+    }
+
+    public void setValueHandler(ValueHandler valueHandler){
+        this.valueHandler = valueHandler;
+        valueHandlerDecorator = new ValueHandlerDecorator(valueHandler);
+        valueHandlerDecorator.addListener(new IsObserver() {
+            @Override
+            public void update() {
+                results.setText(valueHandler.getResultBound());
+            }
+        });
+    }
+
+    public void setHelpText(String helpText){
+        this.helpText = helpText;
+    }
 
 }

code/FXML-Calculator/src/main/java/ch/zhaw/prog2/fxmlcalculator/ResultWindowController.java

@@ -1,6 +1,9 @@
 package ch.zhaw.prog2.fxmlcalculator;
 
+import javafx.fxml.FXML;
 import javafx.scene.control.TextArea;
+import javafx.scene.layout.*;
+import javafx.scene.paint.Color;
 import javafx.stage.Stage;
 
 /**
@@ -11,15 +14,26 @@ import javafx.stage.Stage;
  * @version 1.0
  */
 public class ResultWindowController {
-    // add datafields
+    ValueHandler valueHandler;
+    ValueHandlerDecorator valueHandlerDecorator;
 
-	//@FXML
+	@FXML
     private TextArea results;
 
-	//@FXML
+	@FXML
 	private void closeWindow() {
 		Stage stage = (Stage) results.getScene().getWindow();
 		stage.close();
 	}
 
+    public void setValueHandler(ValueHandler valueHandler, ValueHandlerDecorator valueHandlerDecorator){
+        this.valueHandler = valueHandler;
+        valueHandlerDecorator.addListener(new IsObserver() {
+            @Override
+            public void update() {
+                results.setText(valueHandler.getResultBound());
+            }
+        });
+    }
+
 }

code/FXML-Calculator/src/main/java/ch/zhaw/prog2/fxmlcalculator/ValueHandlerDecorator.java

@@ -0,0 +1,60 @@
+package ch.zhaw.prog2.fxmlcalculator;
+
+import ch.zhaw.prog2.fxmlcalculator.IsObservable;
+import ch.zhaw.prog2.fxmlcalculator.IsObserver;
+import ch.zhaw.prog2.fxmlcalculator.ValueHandler;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Scene;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.StackPane;
+import javafx.stage.Stage;
+
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
+/**
+ * Adds observable functionality to one Value Handler.
+ * The decorator uses the original methods of the WordModel-object.
+ * @author bles
+ *
+ */
+public class ValueHandlerDecorator implements IsObservable {
+    private final ValueHandler valueHandler;
+    private List<IsObserver> listener = new ArrayList<>();
+
+    public ValueHandlerDecorator(ValueHandler valueHandler) {
+        this.valueHandler = valueHandler;
+    }
+
+    @Override
+    public void addListener(IsObserver observer) {
+        listener.add(observer);
+    }
+
+    @Override
+    public void removeListener(IsObserver observer) {
+        listener.remove(observer);
+    }
+
+    public void checkValuesAndCalculateResult(String initialAmount, String returnInPercent, String annualCost, String numberOfYears) {
+        valueHandler.checkValuesAndCalculateResult(initialAmount, returnInPercent, annualCost, numberOfYears);
+        informListener();
+    }
+
+    public void showHelp(String text) {
+        valueHandler.setResultBound(text);
+        informListener();
+    }
+
+    public void clearResult(){
+        valueHandler.clearResult();
+        informListener();
+    }
+
+    public void informListener() {
+        for(IsObserver observer : listener) {
+            observer.update();
+        }
+    }
+
+}

code/FXML-Calculator/src/main/resources/ch/zhaw/prog2/fxmlcalculator/MainWindow.fxml

@@ -1,8 +1,115 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import javafx.scene.layout.AnchorPane?>
-
-<AnchorPane xmlns:fx="http://javafx.com/fxml/1">
-	<!-- TODO Add Nodes -->
-</AnchorPane>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.CheckMenuItem?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Menu?>
+<?import javafx.scene.control.MenuBar?>
+<?import javafx.scene.control.MenuItem?>
+<?import javafx.scene.control.SeparatorMenuItem?>
+<?import javafx.scene.control.TextArea?>
+<?import javafx.scene.control.TextField?>
+<?import javafx.scene.input.KeyCodeCombination?>
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.VBox?>
 
+<BorderPane prefHeight="400.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.zhaw.prog2.fxmlcalculator.MainWindowController">
+   <top>
+      <MenuBar BorderPane.alignment="CENTER">
+         <menus>
+            <Menu mnemonicParsing="false" text="Clear">
+               <items>
+                  <CheckMenuItem fx:id="clearInitialAmount" mnemonicParsing="false" text="Initial amount" />
+                  <CheckMenuItem fx:id="clearReturnInPercent" mnemonicParsing="false" text="Return in%" />
+                  <CheckMenuItem fx:id="clearAnnualCosts" mnemonicParsing="false" text="Annual Cost" />
+                  <CheckMenuItem fx:id="clearNumberOfYears" mnemonicParsing="false" text="Number of years" />
+                  <SeparatorMenuItem mnemonicParsing="false" />
+                  <MenuItem mnemonicParsing="false" onAction="#clearValues" text="Clear values" />
+                  <SeparatorMenuItem mnemonicParsing="false" />
+                  <MenuItem mnemonicParsing="false" onAction="#clearResults" text="Clear results" />
+               </items>
+            </Menu>
+            <Menu mnemonicParsing="false" text="?">
+               <items>
+                  <MenuItem mnemonicParsing="false" onAction="#showHelp" text="Show help F1">
+                     <accelerator>
+                        <KeyCodeCombination alt="ANY" code="F1" control="ANY" meta="ANY" shift="ANY" shortcut="ANY" />
+                     </accelerator></MenuItem>
+               </items>
+            </Menu>
+         </menus>
+      </MenuBar>
+   </top>
+   <center>
+      <VBox prefHeight="0.0" prefWidth="0.0" BorderPane.alignment="CENTER">
+         <children>
+            <GridPane hgap="5.0" vgap="5.0">
+              <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+              </columnConstraints>
+              <rowConstraints>
+                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+              </rowConstraints>
+               <children>
+                  <Label text="Initial amount" />
+                  <Label text="Return in %" GridPane.rowIndex="1" />
+                  <Label text="Annual cost" GridPane.rowIndex="2" />
+                  <Label text="Number of years" GridPane.rowIndex="3" />
+                  <TextField fx:id="initialAmount" GridPane.columnIndex="1" />
+                  <TextField fx:id="returnInPercent" GridPane.columnIndex="1" GridPane.rowIndex="1" />
+                  <TextField fx:id="annualCost" GridPane.columnIndex="1" GridPane.rowIndex="2" />
+                  <TextField fx:id="numberOfYears" GridPane.columnIndex="1" GridPane.rowIndex="3" />
+               </children>
+               <opaqueInsets>
+                  <Insets />
+               </opaqueInsets>
+            </GridPane>
+            <Label text="Results:">
+               <VBox.margin>
+                  <Insets top="10.0" />
+               </VBox.margin>
+            </Label>
+            <TextArea fx:id="results" prefHeight="200.0" prefWidth="380.0" />
+         </children>
+         <padding>
+            <Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
+         </padding>
+      </VBox>
+   </center>
+   <bottom>
+      <HBox alignment="BASELINE_CENTER" prefHeight="0.0" prefWidth="0.0" BorderPane.alignment="CENTER">
+         <padding>
+            <Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
+         </padding>
+         <children>
+            <Button lineSpacing="10.0" mnemonicParsing="false" onAction="#calculate" text="Calculate">
+               <HBox.margin>
+                  <Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
+               </HBox.margin>
+            </Button>
+            <Button mnemonicParsing="false" onAction="#close" text="Close">
+               <HBox.margin>
+                  <Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
+               </HBox.margin>
+            </Button>
+            <Button mnemonicParsing="false" onAction="#openResultWindow" text="Open result window">
+               <HBox.margin>
+                  <Insets bottom="5.0" left="10.0" right="10.0" top="5.0" />
+               </HBox.margin>
+            </Button>
+         </children>
+         <BorderPane.margin>
+            <Insets />
+         </BorderPane.margin>
+      </HBox>
+   </bottom>
+</BorderPane>

code/FXML-Calculator/src/main/resources/ch/zhaw/prog2/fxmlcalculator/ResultWindow.fxml

@@ -4,12 +4,12 @@
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.TextArea?>
-<?import javafx.scene.layout.*?>
+<?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
 
-<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="250.0" minWidth="400.0" prefHeight="250.0" prefWidth="400.0"
-            xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
-            fx:controller="ch.zhaw.prog2.fxmlcalculator.ResultWindowController">
+<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="250.0" minWidth="400.0" prefHeight="250.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.zhaw.prog2.fxmlcalculator.ResultWindowController">
    <center>
       <VBox minWidth="300.0" BorderPane.alignment="TOP_CENTER">
          <children>
@@ -35,7 +35,7 @@
    <bottom>
       <HBox alignment="BOTTOM_RIGHT" BorderPane.alignment="CENTER">
          <children>
-            <Button fx:id="closeForm" mnemonicParsing="false" onMouseClicked="#closeWindow" text="Close">
+            <Button fx:id="closeForm" mnemonicParsing="false" onAction="#closeWindow" text="Close">
                <HBox.margin>
                   <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                </HBox.margin>

code/FXML-WordCloud/build.gradle

@@ -28,7 +28,7 @@ dependencies {
 // Configuration for Application plugin
 application {
     // Define the main class for the application.
-    mainClass = 'ch.zhaw.prog2.application.WordModel'
+    mainClass = 'ch.zhaw.prog2.application.App'
 }
 
 // Configuration for JavaFX plugin

code/FXML-WordCloud/src/main/java/ch/zhaw/prog2/application/App.java

@@ -0,0 +1,12 @@
+/*
+ * This Java source file was generated by the Gradle 'init' task.
+ */
+package ch.zhaw.prog2.application;
+
+import javafx.application.Application;
+
+public class App {
+    public static void main(String[] args) {
+        Application.launch(MainWindow.class, args);
+    }
+}

code/FXML-WordCloud/src/main/java/ch/zhaw/prog2/application/MainWindow.java

@@ -0,0 +1,37 @@
+package ch.zhaw.prog2.application;
+
+import javafx.application.Application;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Scene;
+import javafx.scene.layout.Pane;
+import javafx.stage.Stage;
+
+public class MainWindow extends Application {
+
+    WordModel wordModel = new WordModel();
+
+	@Override
+	public void start(Stage primaryStage) throws Exception {
+		openMainWindow(primaryStage);
+	}
+
+	private void openMainWindow(Stage stage) {
+		try {
+			FXMLLoader loader = new FXMLLoader(getClass().getResource("MainWindow.fxml"));
+
+            Pane rootNode = loader.load();
+
+			MainWindowController mainWindowController = loader.getController();
+			//mainWindowController.connectProperties(); //nicht benötigt, da in der Methode MainWindowController in initialize aufgerufen wird.
+            mainWindowController.setWordModel(wordModel);
+
+			Scene scene = new Scene(rootNode);
+
+            stage.setScene(scene);
+            stage.show();
+		} catch(Exception e) {
+			e.printStackTrace();
+		}
+
+	}
+}

code/FXML-WordCloud/src/main/java/ch/zhaw/prog2/application/MainWindowController.java

@@ -0,0 +1,57 @@
+package ch.zhaw.prog2.application;
+
+import javafx.event.ActionEvent;
+import javafx.fxml.FXML;
+import javafx.scene.control.Label;
+import javafx.scene.control.TextArea;
+import javafx.scene.control.TextField;
+
+import java.util.Locale;
+
+public class MainWindowController {
+
+
+    WordModelDecorator wordModelDecorator;
+
+	public void initialize(){
+		connectProperties();
+	}
+
+	@FXML
+	private Label labelTitel;
+
+	@FXML
+	private TextField textEingabe;
+
+	@FXML
+	private TextArea textHistory;
+
+	@FXML
+	void hinzufuegenText(ActionEvent event) {
+        String[] text = textEingabe.getText().toLowerCase().split(" ");
+        for(String word : text) {
+	    	wordModelDecorator.addWord(word);
+	    }
+    }
+
+	@FXML
+	void leerenTextEingabe(ActionEvent event) {
+		textEingabe.clear();
+	}
+
+    void setWordModel(WordModel wordModel){
+        wordModelDecorator = new WordModelDecorator(wordModel);
+        wordModelDecorator.addListener(new IsObserver() {
+            @Override
+            public void update() {
+                textHistory.setText(wordModel.toString());
+            }
+        });
+    }
+
+	void connectProperties() {
+		// erste Möglichkeit
+		labelTitel.textProperty().bind(textEingabe.textProperty());
+	}
+
+}

code/FXML-WordCloud/src/main/resources/ch/zhaw/prog2/application/MainWindow.fxml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import java.lang.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.layout.AnchorPane?>
+
+<AnchorPane prefHeight="480.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.zhaw.prog2.application.MainWindowController">
+    <children>
+        <VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0" spacing="10.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+            <children>
+                <Label fx:id="labelTitel" text="Label" />
+                <TextField fx:id="textEingabe" maxWidth="300.0" />
+                <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="10.0">
+                    <children>
+                        <Button mnemonicParsing="false" onAction="#hinzufuegenText" text="Hinzufügen Text" />
+                        <Button mnemonicParsing="false" onAction="#leerenTextEingabe" text="Löschen Eingabefeld" />
+                    </children>
+                </HBox>
+                <TextArea fx:id="textHistory" editable="false" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
+            </children>
+            <padding>
+                <Insets top="10.0" />
+            </padding>
+        </VBox>
+    </children>
+    <padding>
+        <Insets bottom="20.0" />
+    </padding>
+</AnchorPane>

code/FXML-WordCloud/src/main/resources/ch/zhaw/prog2/fxmlcalculator/MainWindow.fxml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-<?import javafx.scene.layout.AnchorPane?>
-
-<AnchorPane xmlns:fx="http://javafx.com/fxml/1">
-	<!-- TODO Add Nodes -->
-</AnchorPane>
-