From d2d9a288a8a48d334880ef171114ceddf3c09291 Mon Sep 17 00:00:00 2001
From: leonie <leonie-heidi.schuessler@capgemini.com>
Date: Wed, 16 Nov 2022 13:37:49 +0100
Subject: [PATCH] #1454 added a button to start search, made search bar
 functional

---
 .../com/devonfw/cobigen/gui/Controller.java   |   7 +-
 .../com/devonfw/cobigen/gui/HomeScreen.fxml   | 121 +++---
 .../com/devonfw/cobigen/gui/Primary.fxml      |  11 +-
 .../devonfw/cobigen/gui/SearchResults.fxml    | 387 +++++++++---------
 4 files changed, 280 insertions(+), 246 deletions(-)

diff --git a/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/Controller.java b/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/Controller.java
index 5a147b058d..1ee9380b0d 100644
--- a/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/Controller.java
+++ b/cobigen/gui/src/main/java/com/devonfw/cobigen/gui/Controller.java
@@ -14,7 +14,6 @@
 import javafx.scene.control.Button;
 import javafx.scene.control.ListView;
 import javafx.scene.control.TextField;
-import javafx.scene.input.KeyEvent;
 import javafx.scene.layout.AnchorPane;
 
 /**
@@ -40,6 +39,9 @@ public class Controller implements Initializable {
   @FXML
   public TextField searchBar;
 
+  @FXML
+  public Button goSearch;
+
   // TODO: Transform to ListView<HBox>
   @FXML
   public ListView<String> searchResultsView;
@@ -70,9 +72,10 @@ public void details(javafx.event.ActionEvent actionEvent) throws IOException {
 
   /**
    * @param event
+   * @throws IOException
    */
   @FXML
-  public void search(KeyEvent event) {
+  public void search(javafx.event.ActionEvent event) throws IOException {
 
     this.searchResultsView.getItems().clear();
     this.searchResultsView.getItems().addAll(searchTemplateSets(this.searchBar.getText(), this.templateSets));
diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/HomeScreen.fxml b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/HomeScreen.fxml
index 4c070d27fa..e359709704 100644
--- a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/HomeScreen.fxml
+++ b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/HomeScreen.fxml
@@ -2,57 +2,70 @@
 
 <?import javafx.scene.layout.AnchorPane?>
 
-          <AnchorPane fx:id="detailsPane" minHeight="0.0" minWidth="0.0" prefHeight="459.0" prefWidth="455.0">
-               <children>
-                  <SplitPane fx:id="horizontalSplitPane" dividerPositions="0.1119186046511628" orientation="VERTICAL" prefHeight="461.0" prefWidth="432.0">
-                    <items>
-                      <AnchorPane fx:id="headerPane" minHeight="0.0" minWidth="0.0" prefHeight="57.0" prefWidth="429.0">
-                           <children>
-                              <Text fx:id="headersText" layoutX="5.0" layoutY="31.0" strokeType="OUTSIDE" strokeWidth="0.0" text="HOME">
-                                 <font>
-                                    <Font size="18.0" />
-                                 </font>
-                              </Text>
-                           </children>
-                        </AnchorPane>
-                      <AnchorPane fx:id="detailsPane" minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
-                           <children>
-                              <Label fx:id="howItWorksLabel" layoutX="6.0" layoutY="6.0" text="How it Works">
-                                 <font>
-                                    <Font size="14.0" />
-                                 </font>
-                              </Label>
-                              <Separator fx:id="howItWorksSeparator" layoutX="2.0" layoutY="35.0" prefHeight="3.0" prefWidth="432.0" />
-                              <Text layoutX="9.0" layoutY="59.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Search for template sets in the search bar on the left" wrappingWidth="340.80274963378906" />
-                              <Text layoutX="19.0" layoutY="117.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Install Template Set" wrappingWidth="108.13612365722656" />
-                              <Text layoutX="165.0" layoutY="117.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Delete Template Set" wrappingWidth="108.13612365722656" />
-                              <Text layoutX="305.0" layoutY="117.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Update Template Set" wrappingWidth="114.13612365722656" />
-                              <Button layoutX="59.0" layoutY="73.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="+" textFill="WHITE">
-                                 <font>
-                                    <Font name="System Bold" size="12.0" />
-                                 </font>
-                              </Button>
-                              <Button layoutX="207.0" layoutY="73.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="*" textFill="WHITE">
-                                 <font>
-                                    <Font name="System Bold" size="12.0" />
-                                 </font>
-                              </Button>
-                              <Button layoutX="346.0" layoutY="73.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="~" textFill="WHITE">
-                                 <font>
-                                    <Font name="System Bold" size="12.0" />
-                                 </font>
-                              </Button>
-                              <Label layoutX="7.0" layoutY="300.0" text="Wiki">
-                                 <font>
-                                    <Font size="14.0" />
-                                 </font>
-                              </Label>
-                              <Separator fx:id="wikiSeparator" layoutX="-1.0" layoutY="329.0" prefHeight="3.0" prefWidth="432.0" />
-                              <Text layoutX="9.0" layoutY="351.0" strokeType="OUTSIDE" strokeWidth="0.0" text="More information can be found in our Wiki: --&gt; https://github.com/devonfw/cobigen/wiki" wrappingWidth="246.13607788085938" />
-                              <Text layoutX="36.0" layoutY="208.0" strokeType="OUTSIDE" strokeWidth="0.0" text="&quot;Tree view for example template set with increments and templates&quot;" />
-                           </children>
-                        </AnchorPane>
-                    </items>
-                  </SplitPane>
-               </children>
-            </AnchorPane>
+<AnchorPane fx:id="detailsPane" minHeight="0.0" minWidth="0.0" prefHeight="459.0" prefWidth="455.0">
+  <children>
+    <SplitPane fx:id="horizontalSplitPane" dividerPositions="0.1119186046511628" orientation="VERTICAL"
+      prefHeight="461.0" prefWidth="432.0">
+      <items>
+        <AnchorPane fx:id="headerPane" minHeight="0.0" minWidth="0.0" prefHeight="57.0" prefWidth="429.0">
+          <children>
+            <Text fx:id="headersText" layoutX="5.0" layoutY="31.0" strokeType="OUTSIDE" strokeWidth="0.0"
+              text="HOME">
+              <font>
+                <Font size="18.0"/>
+              </font>
+            </Text>
+          </children>
+        </AnchorPane>
+        <AnchorPane fx:id="detailsPane" minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
+          <children>
+            <Label fx:id="howItWorksLabel" layoutX="6.0" layoutY="6.0" text="How it Works">
+              <font>
+                <Font size="14.0"/>
+              </font>
+            </Label>
+            <Separator fx:id="howItWorksSeparator" layoutX="2.0" layoutY="35.0" prefHeight="3.0"
+              prefWidth="432.0"/>
+            <Text layoutX="9.0" layoutY="59.0" strokeType="OUTSIDE" strokeWidth="0.0"
+              text="Search for template sets in the search bar on the left" wrappingWidth="340.80274963378906"/>
+            <Text layoutX="19.0" layoutY="117.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Install Template Set"
+              wrappingWidth="108.13612365722656"/>
+            <Text layoutX="165.0" layoutY="117.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Delete Template Set"
+              wrappingWidth="108.13612365722656"/>
+            <Text layoutX="305.0" layoutY="117.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Update Template Set"
+              wrappingWidth="114.13612365722656"/>
+            <Button layoutX="59.0" layoutY="73.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0"
+              style="-fx-background-color: BLUE;" text="+" textFill="WHITE">
+              <font>
+                <Font name="System Bold" size="12.0"/>
+              </font>
+            </Button>
+            <Button layoutX="207.0" layoutY="73.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0"
+              style="-fx-background-color: BLUE;" text="*" textFill="WHITE">
+              <font>
+                <Font name="System Bold" size="12.0"/>
+              </font>
+            </Button>
+            <Button layoutX="346.0" layoutY="73.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0"
+              style="-fx-background-color: BLUE;" text="~" textFill="WHITE">
+              <font>
+                <Font name="System Bold" size="12.0"/>
+              </font>
+            </Button>
+            <Label layoutX="7.0" layoutY="300.0" text="Wiki">
+              <font>
+                <Font size="14.0"/>
+              </font>
+            </Label>
+            <Separator fx:id="wikiSeparator" layoutX="-1.0" layoutY="329.0" prefHeight="3.0" prefWidth="432.0"/>
+            <Text layoutX="9.0" layoutY="351.0" strokeType="OUTSIDE" strokeWidth="0.0"
+              text="More information can be found in our Wiki: --&gt; https://github.com/devonfw/cobigen/wiki"
+              wrappingWidth="246.13607788085938"/>
+            <Text layoutX="36.0" layoutY="208.0" strokeType="OUTSIDE" strokeWidth="0.0"
+              text="&quot;Tree view for example template set with increments and templates&quot;"/>
+          </children>
+        </AnchorPane>
+      </items>
+    </SplitPane>
+  </children>
+</AnchorPane>
diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/Primary.fxml b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/Primary.fxml
index e3a6cdc062..4650c8f58d 100644
--- a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/Primary.fxml
+++ b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/Primary.fxml
@@ -18,7 +18,7 @@
 <?import javafx.scene.text.Font?>
 <?import javafx.scene.text.Text?>
 
-<AnchorPane fx:id="outerPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="463.0" prefWidth="652.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.devonfw.cobigen.gui.Controller">
+<AnchorPane fx:id="outerPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="463.0" prefWidth="652.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.devonfw.cobigen.gui.Controller">
    <children>
       <SplitPane fx:id="verticalSplitPane" dividerPositions="0.33008213552361404" prefHeight="463.0" prefWidth="652.0">
         <items>
@@ -64,14 +64,17 @@
                   </AnchorPane>
                 <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="30.0">
                      <children>
-                        <TextField fx:id="searchBar" onKeyPressed="#search" prefHeight="25.0" prefWidth="211.0" promptText="Search Template Sets" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
-                        <AnchorPane prefHeight="200.0" prefWidth="200.0" />
-                        <Button fx:id="clearSearchResultsButton" layoutX="189.0" layoutY="-1.0" mnemonicParsing="false" onAction="#clearSearchResults" style="-fx-background-color: TRANSPARENT;" text="x" textFill="#0000004d" AnchorPane.rightAnchor="0.0" />
+                        <AnchorPane layoutX="6.0" prefHeight="200.0" prefWidth="200.0">
+                           <children>
+                              <Button fx:id="goSearch" ellipsisString="o-" layoutX="151.0" layoutY="1.0" mnemonicParsing="false" onAction="#search" prefHeight="9.0" prefWidth="27.0" text="o-" />
+                           </children></AnchorPane>
+                        <Button fx:id="clearSearchResultsButton" layoutX="189.0" layoutY="-1.0" mnemonicParsing="false" onAction="#clearSearchResults" prefHeight="25.0" prefWidth="27.0" style="-fx-background-color: TRANSPARENT;" text="x" textFill="#0000004d" AnchorPane.rightAnchor="0.0" />
                         <ScrollPane prefHeight="436.0" prefWidth="211.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="28.0">
                            <content>
                               <ListView fx:id="searchResultsView" />
                            </content>
                         </ScrollPane>
+                        <TextField id="searchBar" fx:id="searchBar" prefHeight="25.0" prefWidth="157.0" promptText="Search Template Sets" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="54.0" />
 
                         <!-- TODO: Search Results as ListView of HBox -->
 
diff --git a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/SearchResults.fxml b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/SearchResults.fxml
index 1e4d21a308..67220a18d9 100644
--- a/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/SearchResults.fxml
+++ b/cobigen/gui/src/main/resources/com/devonfw/cobigen/gui/SearchResults.fxml
@@ -3,191 +3,206 @@
 <?import javafx.scene.layout.AnchorPane?>
 
 <AnchorPane xmlns:fx="http://javafx.com/fxml/1">
-	<VBox fx:id="searchResultsVBox" layoutY="25.0" prefHeight="409.0" prefWidth="211.0">
-                                 <children>
-                                    <HBox fx:id="searchResult" alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
-                                       <children>
-                                          <Label fx:id="searchResultTitle" alignment="CENTER" text="TemplateSet 1">
-                                             <HBox.margin>
-                                                <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-                                             </HBox.margin>
-                                          </Label>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="+" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="35.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="*" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="~" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                       </children>
-                                    </HBox>
-                                    <Separator prefWidth="200.0" />
-                                    <HBox alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
-                                       <children>
-                                          <Label alignment="CENTER" text="TemplateSet 2">
-                                             <HBox.margin>
-                                                <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-                                             </HBox.margin>
-                                          </Label>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="+" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="35.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="*" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="~" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                       </children>
-                                       <VBox.margin>
-                                          <Insets top="-3.0" />
-                                       </VBox.margin>
-                                    </HBox>
-                                    <Separator prefWidth="200.0" />
-                                    <HBox alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
-                                       <children>
-                                          <Label alignment="CENTER" text="TemplateSet 3">
-                                             <HBox.margin>
-                                                <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-                                             </HBox.margin>
-                                          </Label>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="+" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="35.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="*" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="~" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                       </children>
-                                       <VBox.margin>
-                                          <Insets top="-3.0" />
-                                       </VBox.margin>
-                                    </HBox>
-                                    <Separator prefWidth="200.0" />
-                                    <HBox alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
-                                       <children>
-                                          <Label alignment="CENTER" text="TemplateSet 4">
-                                             <HBox.margin>
-                                                <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-                                             </HBox.margin>
-                                          </Label>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="+" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="35.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="*" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="~" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                       </children>
-                                       <VBox.margin>
-                                          <Insets top="-3.0" />
-                                       </VBox.margin>
-                                    </HBox>
-                                    <Separator prefWidth="200.0" />
-                                    <HBox alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
-                                       <children>
-                                          <Label alignment="CENTER" text="TemplateSet 5">
-                                             <HBox.margin>
-                                                <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
-                                             </HBox.margin>
-                                          </Label>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="+" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="35.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="*" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;" text="~" textFill="WHITE">
-                                             <font>
-                                                <Font name="System Bold" size="12.0" />
-                                             </font>
-                                             <HBox.margin>
-                                                <Insets left="5.0" />
-                                             </HBox.margin>
-                                          </Button>
-                                       </children>
-                                       <VBox.margin>
-                                          <Insets top="-3.0" />
-                                       </VBox.margin>
-                                    </HBox>
-                                    <Separator prefWidth="200.0" />
-                                 </children>
-                              </VBox>
+  <VBox fx:id="searchResultsVBox" layoutY="25.0" prefHeight="409.0" prefWidth="211.0">
+    <children>
+      <HBox fx:id="searchResult" alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
+        <children>
+          <Label fx:id="searchResultTitle" alignment="CENTER" text="TemplateSet 1">
+            <HBox.margin>
+              <Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
+            </HBox.margin>
+          </Label>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="+" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="35.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="*" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="~" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+        </children>
+      </HBox>
+      <Separator prefWidth="200.0"/>
+      <HBox alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
+        <children>
+          <Label alignment="CENTER" text="TemplateSet 2">
+            <HBox.margin>
+              <Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
+            </HBox.margin>
+          </Label>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="+" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="35.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="*" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="~" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+        </children>
+        <VBox.margin>
+          <Insets top="-3.0"/>
+        </VBox.margin>
+      </HBox>
+      <Separator prefWidth="200.0"/>
+      <HBox alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
+        <children>
+          <Label alignment="CENTER" text="TemplateSet 3">
+            <HBox.margin>
+              <Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
+            </HBox.margin>
+          </Label>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="+" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="35.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="*" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="~" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+        </children>
+        <VBox.margin>
+          <Insets top="-3.0"/>
+        </VBox.margin>
+      </HBox>
+      <Separator prefWidth="200.0"/>
+      <HBox alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
+        <children>
+          <Label alignment="CENTER" text="TemplateSet 4">
+            <HBox.margin>
+              <Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
+            </HBox.margin>
+          </Label>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="+" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="35.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="*" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="~" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+        </children>
+        <VBox.margin>
+          <Insets top="-3.0"/>
+        </VBox.margin>
+      </HBox>
+      <Separator prefWidth="200.0"/>
+      <HBox alignment="CENTER_LEFT" prefHeight="33.0" prefWidth="211.0">
+        <children>
+          <Label alignment="CENTER" text="TemplateSet 5">
+            <HBox.margin>
+              <Insets bottom="5.0" left="5.0" right="5.0" top="5.0"/>
+            </HBox.margin>
+          </Label>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="+" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="35.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="*" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+          <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="7.0" style="-fx-background-color: BLUE;"
+            text="~" textFill="WHITE">
+            <font>
+              <Font name="System Bold" size="12.0"/>
+            </font>
+            <HBox.margin>
+              <Insets left="5.0"/>
+            </HBox.margin>
+          </Button>
+        </children>
+        <VBox.margin>
+          <Insets top="-3.0"/>
+        </VBox.margin>
+      </HBox>
+      <Separator prefWidth="200.0"/>
+    </children>
+  </VBox>
 </AnchorPane>