From e191079d96ac0d512971208e12f06fcd75436ca3 Mon Sep 17 00:00:00 2001
From: Lara Blersch <lb210@hdm-stuttgart.de>
Date: Fri, 23 Jun 2023 09:44:01 +0200
Subject: [PATCH] updatet GUI
---
.../controllers/RecipeCreatorController.java | 1 +
src/main/resources/fxml/recipe-creator.fxml | 141 ++++++++++--------
src/main/resources/fxml/recipe-editor.fxml | 118 ++++++++-------
3 files changed, 145 insertions(+), 115 deletions(-)
diff --git a/src/main/java/mi/hdm/controllers/RecipeCreatorController.java b/src/main/java/mi/hdm/controllers/RecipeCreatorController.java
index 5c879db..19b9b9e 100644
--- a/src/main/java/mi/hdm/controllers/RecipeCreatorController.java
+++ b/src/main/java/mi/hdm/controllers/RecipeCreatorController.java
@@ -208,4 +208,5 @@ public class RecipeCreatorController extends BaseController {
public void changeSceneToHome() {
changeScene(View.MAIN);
}
+
}
diff --git a/src/main/resources/fxml/recipe-creator.fxml b/src/main/resources/fxml/recipe-creator.fxml
index 8a75935..152c54b 100644
--- a/src/main/resources/fxml/recipe-creator.fxml
+++ b/src/main/resources/fxml/recipe-creator.fxml
@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
+<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
-<?import javafx.scene.Cursor?>
-<?import javafx.scene.image.Image?>
-<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
-<?import javafx.scene.text.Font?>
+<?import javafx.scene.text.*?>
+
<AnchorPane prefHeight="800" prefWidth="1200.0" style="-fx-background-color: ffffff;" xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="mi.hdm.controllers.RecipeCreatorController">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" />
@@ -14,59 +14,6 @@
<BorderPane fx:id="borderPane" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<center>
<SplitPane fx:id="topSplitPane" dividerPositions="0.5" prefHeight="160.0" prefWidth="200.0" style="-fx-box-border: transparent; -fx-padding: 0; -fx-split-pane-divider: transparent; -fx-background-color: transparent;" BorderPane.alignment="CENTER">
- <AnchorPane minHeight="0.0" minWidth="300.0" prefHeight="160.0" prefWidth="100.0" style="-fx-background-color: ffffff;">
- <padding>
- <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
- </padding>
- <VBox prefHeight="200.0" prefWidth="100.0" spacing="5.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
- <Label text="Recipe name" />
- <TextField fx:id="nameTextField" promptText="Enter a name for your recipe" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;">
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </TextField>
- <Label text="Recipe description" />
- <TextArea id="recipeCreatorDesctiptionTextField" fx:id="descriptionTextArea" prefHeight="104.0" prefWidth="566.0" promptText="Enter a description for your recipe" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;" stylesheets="@../styles/GUI_extras.css" wrapText="true">
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </TextArea>
- <Label text="Preparation time" />
- <TextField fx:id="prepTimeTextField" promptText="How much time does it take to prepare this recipe in minutes?" style="-fx-background-color: transparent; -fx-border-color: D91C1C; -fx-background-radius: 5; -fx-border-radius: 5; -fx-border-width: 4;">
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </TextField>
- <Label text="Selected categories" />
- <HBox id="recipeCreatorCategoryDisplay" fx:id="categories" minHeight="20.0" prefHeight="33.0" prefWidth="567.0" spacing="5.0" style="-fx-background-color: transparent;">
- <padding>
- <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
- </padding>
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </HBox>
- <Label text="Preparation description" />
- <TextArea id="RecipeCreatorPreparationDescription" fx:id="preparationTextArea" prefHeight="104.0" prefWidth="566.0" promptText="How is your recipe prepared? Add new lines to separate instructions" style="-fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4; -fx-background-color: transparent;" stylesheets="@../styles/GUI_extras.css" wrapText="true">
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </TextArea>
- <Label text="Ingredients" />
- <ScrollPane id="RecipeCreatorIngredients" fx:id="selectedIngredientsScrollPane" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-background-radius: 5; -fx-border-width: 4;" stylesheets="@../styles/GUI_extras.css" />
- <Button mnemonicParsing="false" onAction="#confirmCreateRecipe" style="-fx-background-color: ffffff; -fx-control-inner-background: transparent; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;" text="Create Recipe" textFill="#d91c1c">
- <VBox.margin>
- <Insets top="10.0" />
- </VBox.margin>
- <font>
- <Font name="System Bold" size="13.0" />
- </font>
- <cursor>
- <Cursor fx:constant="HAND" />
- </cursor>
- </Button>
- </VBox>
- </AnchorPane>
<AnchorPane minHeight="0.0" minWidth="300.0" prefHeight="160.0" prefWidth="100.0" style="-fx-background-color: ffffff;">
<padding>
@@ -101,7 +48,7 @@
<Insets bottom="5.0" top="5.0" />
</VBox.margin>
</TextField>
- <ScrollPane fx:id="searchResultsPane" fitToHeight="true" maxHeight="1.7976931348623157E308" prefHeight="509.0" prefWidth="566.0" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-width: 4; -fx-border-color: #D91C1C; -fx-border-radius: 5;" stylesheets="@../styles/GUI_extras.css" />
+ <ScrollPane fx:id="searchResultsPane" fitToHeight="true" maxHeight="1.7976931348623157E308" prefHeight="431.0" prefWidth="567.0" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-width: 4; -fx-border-color: #D91C1C; -fx-border-radius: 5;" stylesheets="@../styles/GUI_extras.css" />
<HBox alignment="TOP_CENTER" prefHeight="45.0" prefWidth="566.0" spacing="15.0">
<Button accessibleRole="DECREMENT_BUTTON" mnemonicParsing="false" onAction="#decrementPageCounter" style="-fx-background-color: #ffffff; -fx-control-inner-background: transparent; -fx-border-color: #D91C1C; -fx-border-radius: 5; -fx-border-width: 2; -fx-padding: 5;" text="<< Previous" textFill="#d91c1c">
<opaqueInsets>
@@ -125,6 +72,77 @@
</HBox>
</VBox>
</AnchorPane>
+ <AnchorPane minHeight="0.0" minWidth="300.0" prefHeight="160.0" prefWidth="100.0" style="-fx-background-color: ffffff;">
+ <padding>
+ <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+ </padding>
+ <VBox prefHeight="200.0" prefWidth="100.0" spacing="5.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+ <Label text="Recipe name" />
+ <TextField fx:id="nameTextField" promptText="Enter a name for your recipe" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;">
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </TextField>
+ <Label text="Recipe description" />
+ <TextArea id="recipeCreatorDesctiptionTextField" fx:id="descriptionTextArea" prefHeight="104.0" prefWidth="566.0" promptText="Enter a description for your recipe" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;" stylesheets="@../styles/GUI_extras.css" wrapText="true">
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </TextArea>
+ <Label text="Preparation time" />
+ <TextField fx:id="prepTimeTextField" promptText="How much time does it take to prepare this recipe in minutes?" style="-fx-background-color: transparent; -fx-border-color: D91C1C; -fx-background-radius: 5; -fx-border-radius: 5; -fx-border-width: 4;">
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </TextField>
+ <Label text="Selected categories" />
+ <HBox id="recipeCreatorCategoryDisplay" fx:id="categories" minHeight="20.0" prefHeight="33.0" prefWidth="567.0" spacing="5.0" style="-fx-background-color: transparent;">
+ <padding>
+ <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+ </padding>
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </HBox>
+ <Label text="Preparation description" />
+ <TextArea id="RecipeCreatorPreparationDescription" fx:id="preparationTextArea" prefHeight="104.0" prefWidth="566.0" promptText="How is your recipe prepared? Add new lines to separate instructions" style="-fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4; -fx-background-color: transparent;" stylesheets="@../styles/GUI_extras.css" wrapText="true">
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </TextArea>
+ <Label text="Ingredients" />
+ <ScrollPane id="RecipeCreatorIngredients" fx:id="selectedIngredientsScrollPane" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-background-radius: 5; -fx-border-width: 4;" stylesheets="@../styles/GUI_extras.css" />
+ <HBox prefHeight="100.0" prefWidth="200.0">
+ <children>
+ <Button fx:id="cancelButton" mnemonicParsing="false" onAction="#changeSceneToHome" style="-fx-background-color: transparent; -fx-border-color: d91c1c; -fx-border-width: 4; -fx-border-radius: 5;" text="Cancel" textFill="#d91c1c">
+ <font>
+ <Font name="System Bold" size="13.0" />
+ </font>
+ <HBox.margin>
+ <Insets right="20.0" />
+ </HBox.margin>
+ </Button>
+ <Button mnemonicParsing="false" onAction="#confirmCreateRecipe" style="-fx-background-color: transparent; -fx-control-inner-background: transparent; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;" text="Create Recipe" textFill="#d91c1c">
+ <font>
+ <Font name="System Bold" size="13.0" />
+ </font>
+ <cursor>
+ <Cursor fx:constant="HAND" />
+ </cursor>
+ </Button>
+ </children>
+ <opaqueInsets>
+ <Insets />
+ </opaqueInsets>
+ <VBox.margin>
+ <Insets top="10.0" />
+ </VBox.margin>
+ <padding>
+ <Insets left="100.0" />
+ </padding>
+ </HBox>
+ </VBox>
+ </AnchorPane>
</SplitPane>
</center>
<top>
@@ -140,11 +158,10 @@
<padding>
<Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
</padding>
- <ImageView accessibleRole="BUTTON" fitHeight="40.0" fitWidth="200.0" onMouseClicked="#changeSceneToHome"
- pickOnBounds="true" preserveRatio="true" GridPane.valignment="CENTER">
- <Image url="@../images/Tasty_Pages_Back_Arrow.png"/>
+ <ImageView accessibleRole="BUTTON" fitHeight="40.0" fitWidth="200.0" onMouseClicked="#changeSceneToHome" pickOnBounds="true" preserveRatio="true" GridPane.valignment="CENTER">
+ <Image url="@../images/Tasty_Pages_Back_Arrow.png" />
<cursor>
- <Cursor fx:constant="HAND"/>
+ <Cursor fx:constant="HAND" />
</cursor>
</ImageView>
<Label alignment="CENTER" contentDisplay="CENTER" prefHeight="17.0" prefWidth="1000.0" text="Create a recipe" textAlignment="CENTER" GridPane.columnIndex="1">
diff --git a/src/main/resources/fxml/recipe-editor.fxml b/src/main/resources/fxml/recipe-editor.fxml
index 22495fb..cda3e92 100644
--- a/src/main/resources/fxml/recipe-editor.fxml
+++ b/src/main/resources/fxml/recipe-editor.fxml
@@ -14,59 +14,6 @@
<BorderPane fx:id="borderPane" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<center>
<SplitPane fx:id="topSplitPane" dividerPositions="0.5" prefHeight="160.0" prefWidth="200.0" style="-fx-box-border: transparent; -fx-padding: 0; -fx-split-pane-divider: transparent; -fx-background-color: transparent;" BorderPane.alignment="CENTER">
- <AnchorPane minHeight="0.0" minWidth="300.0" prefHeight="160.0" prefWidth="100.0" style="-fx-background-color: ffffff;">
- <padding>
- <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
- </padding>
- <VBox prefHeight="200.0" prefWidth="100.0" spacing="5.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
- <Label text="Recipe name" />
- <TextField fx:id="nameTextField" promptText="Enter a name for your recipe" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;">
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </TextField>
- <Label text="Recipe description" />
- <TextArea id="recipeCreatorDesctiptionTextField" fx:id="descriptionTextArea" prefHeight="104.0" prefWidth="566.0" promptText="Enter a description for your recipe" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;" stylesheets="@../styles/GUI_extras.css" wrapText="true">
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </TextArea>
- <Label text="Preparation time" />
- <TextField fx:id="prepTimeTextField" promptText="How much time does it take to prepare this recipe in minutes?" style="-fx-background-color: transparent; -fx-border-color: D91C1C; -fx-background-radius: 5; -fx-border-radius: 5; -fx-border-width: 4;">
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </TextField>
- <Label text="Selected categories" />
- <HBox id="recipeCreatorCategoryDisplay" fx:id="categories" minHeight="20.0" prefHeight="33.0" prefWidth="567.0" spacing="5.0" style="-fx-background-color: transparent;">
- <padding>
- <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
- </padding>
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </HBox>
- <Label text="Preparation description" />
- <TextArea id="RecipeCreatorPreparationDescription" fx:id="preparationTextArea" prefHeight="104.0" prefWidth="566.0" promptText="How is your recipe prepared? Add new lines to separate instructions" style="-fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4; -fx-background-color: transparent;" stylesheets="@../styles/GUI_extras.css" wrapText="true">
- <VBox.margin>
- <Insets bottom="5.0" />
- </VBox.margin>
- </TextArea>
- <Label text="Ingredients" />
- <ScrollPane id="RecipeCreatorIngredients" fx:id="selectedIngredientsScrollPane" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-background-radius: 5; -fx-border-width: 4;" stylesheets="@../styles/GUI_extras.css" />
- <Button mnemonicParsing="false" onAction="#confirmEditRecipe" style="-fx-background-color: ffffff; -fx-control-inner-background: transparent; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;" text="Save Recipe" textFill="#d91c1c">
- <VBox.margin>
- <Insets top="10.0" />
- </VBox.margin>
- <font>
- <Font name="System Bold" size="13.0" />
- </font>
- <cursor>
- <Cursor fx:constant="HAND" />
- </cursor>
- </Button>
- </VBox>
- </AnchorPane>
<AnchorPane minHeight="0.0" minWidth="300.0" prefHeight="160.0" prefWidth="100.0" style="-fx-background-color: ffffff;">
<padding>
@@ -125,6 +72,71 @@
</HBox>
</VBox>
</AnchorPane>
+ <AnchorPane minHeight="0.0" minWidth="300.0" prefHeight="160.0" prefWidth="100.0" style="-fx-background-color: ffffff;">
+ <padding>
+ <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+ </padding>
+ <VBox prefHeight="200.0" prefWidth="100.0" spacing="5.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+ <Label text="Recipe name" />
+ <TextField fx:id="nameTextField" promptText="Enter a name for your recipe" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;">
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </TextField>
+ <Label text="Recipe description" />
+ <TextArea id="recipeCreatorDesctiptionTextField" fx:id="descriptionTextArea" prefHeight="104.0" prefWidth="566.0" promptText="Enter a description for your recipe" style="-fx-background-color: transparent; -fx-background-radius: 5; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;" stylesheets="@../styles/GUI_extras.css" wrapText="true">
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </TextArea>
+ <Label text="Preparation time" />
+ <TextField fx:id="prepTimeTextField" promptText="How much time does it take to prepare this recipe in minutes?" style="-fx-background-color: transparent; -fx-border-color: D91C1C; -fx-background-radius: 5; -fx-border-radius: 5; -fx-border-width: 4;">
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </TextField>
+ <Label text="Selected categories" />
+ <HBox id="recipeCreatorCategoryDisplay" fx:id="categories" minHeight="20.0" prefHeight="33.0" prefWidth="567.0" spacing="5.0" style="-fx-background-color: transparent;">
+ <padding>
+ <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
+ </padding>
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </HBox>
+ <Label text="Preparation description" />
+ <TextArea id="RecipeCreatorPreparationDescription" fx:id="preparationTextArea" prefHeight="104.0" prefWidth="566.0" promptText="How is your recipe prepared? Add new lines to separate instructions" style="-fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4; -fx-background-color: transparent;" stylesheets="@../styles/GUI_extras.css" wrapText="true">
+ <VBox.margin>
+ <Insets bottom="5.0" />
+ </VBox.margin>
+ </TextArea>
+ <Label text="Ingredients" />
+ <ScrollPane id="RecipeCreatorIngredients" fx:id="selectedIngredientsScrollPane" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-background-radius: 5; -fx-border-width: 4;" stylesheets="@../styles/GUI_extras.css" />
+ <HBox prefHeight="100.0" prefWidth="200.0">
+ <children>
+ <Button fx:id="cancelButton" mnemonicParsing="false" onAction="#changeSceneToRecipe" style="-fx-background-color: transparent; -fx-border-color: d91c1c; -fx-border-width: 4; -fx-border-radius: 5;" text="Cancel" textFill="#d91c1c">
+ <font>
+ <Font name="System Bold" size="13.0" />
+ </font>
+ <HBox.margin>
+ <Insets right="20.0" />
+ </HBox.margin>
+ </Button>
+ <Button mnemonicParsing="false" onAction="#confirmEditRecipe" style="-fx-background-color: ffffff; -fx-control-inner-background: transparent; -fx-border-color: D91C1C; -fx-border-radius: 5; -fx-border-width: 4;" text="Save Recipe" textFill="#d91c1c">
+ <font>
+ <Font name="System Bold" size="13.0" />
+ </font>
+ <cursor>
+ <Cursor fx:constant="HAND" />
+ </cursor>
+ </Button>
+ </children>
+ <padding>
+ <Insets left="100.0" />
+ </padding>
+ </HBox>
+ </VBox>
+ </AnchorPane>
</SplitPane>
</center>
<top>
--
GitLab