title: JavaFX How to add elements eg. Buttons dynamically created from items stored in the database Mysql?
body: <p>There is this video in youtube <a href="https://www.youtube.com/watch?v=Idtm2Y6I23w" rel="nofollow noreferrer">https://www.youtube.com/watch?v=Idtm2Y6I23w</a> 
  Whereby the person has dynamically populated buttons created from the items that are stored in the database.For instance in this picture 
  <a href="https://i.stack.imgur.com/Cx0om.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cx0om.jpg" alt="enter image description here"></a></p>
  
  <p>It has some categories that includes <code>Tables</code>,<code>Stock</code>,<code>Reports</code> and <code>Users</code>
  When a user clicks on the <code>Table</code> category it displays <code>Buttons</code> dynamically created from items stored in the database mysql. For instance this is the result image: <a href="https://i.stack.imgur.com/rUfQ0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rUfQ0.jpg" alt="enter image description here"></a> </p>
  
  <p>How does one get to develop like that?
  Is there a for loop statements that is going to be used?</p>
  
  <p>EDIT </p>
  
  <p>This is how i did it.This is the source code.</p>
  
  <pre><code>public class OrderController implements Initializable {
  
      @FXML
      private ListView&lt;Button&gt; listvieww;
  
      @FXML
      private HBox hboxx;
  
      List&lt;String&gt; listOfSomething = null;
  //@FXML
  //    private Pane panedynamic;
      private DBConnection database = new DBConnection();
      private Connection connection;
      private Statement statement;
      private ResultSet resultSet;
  
      private ObservableList&lt;Button&gt; buttons = FXCollections.observableArrayList();
  
      /**
       * Initializes the controller class.
       */
      @Override
      public void initialize(URL url, ResourceBundle rb) {
      hboxx.getChildren().add(buttons)
      }
  
      @FXML
      void acttable(ActionEvent event) {
  
          // TODO
          String sqlQuery = "SELECT * FROM restauranttables;";
          try {
              connection = database.getConnection();
              statement = connection.createStatement();
              resultSet = statement.executeQuery(sqlQuery);
              while (resultSet.next()) {
                  String current = resultSet.getString("tablename");
                  ObservableList&lt;String&gt; list = FXCollections.observableArrayList(current);
                  Button b = new Button(list.toString());
                  buttons.add(b);
  
              }
  
          } catch (SQLException e) {
              e.printStackTrace();
          }
  
      }
  
      @FXML
      void actlogout(ActionEvent event) {
  
      }
  
      @FXML
      void actnew(ActionEvent event) {
  
      }
  
      @FXML
      void actorder(ActionEvent event) {
  
      }
  
      @FXML
      void actreports(ActionEvent event) {
  
      }
  
      @FXML
      void actstock(ActionEvent event) {
  
      }
  
  
  
      @FXML
      void actusers(ActionEvent event) {
  
      }
  
  }
  </code></pre>
  
  <p>this is how my scene builder looks like</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import com.jfoenix.controls.JFXButton?&gt;
  &lt;?import com.jfoenix.controls.JFXTextField?&gt;
  &lt;?import javafx.scene.control.Menu?&gt;
  &lt;?import javafx.scene.control.MenuBar?&gt;
  &lt;?import javafx.scene.control.MenuItem?&gt;
  &lt;?import javafx.scene.control.TableColumn?&gt;
  &lt;?import javafx.scene.control.TableView?&gt;
  &lt;?import javafx.scene.layout.AnchorPane?&gt;
  &lt;?import javafx.scene.layout.ColumnConstraints?&gt;
  &lt;?import javafx.scene.layout.GridPane?&gt;
  &lt;?import javafx.scene.layout.HBox?&gt;
  &lt;?import javafx.scene.layout.RowConstraints?&gt;
  &lt;?import javafx.scene.layout.StackPane?&gt;
  
  &lt;AnchorPane id="AnchorPane" prefHeight="600.0" prefWidth="1080.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controllers.OrderController"&gt;
      &lt;children&gt;
          &lt;AnchorPane layoutX="55.0" layoutY="29.0" prefHeight="600.0" prefWidth="1080.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"&gt;
              &lt;children&gt;
                  &lt;TableView layoutX="21.0" layoutY="49.0" prefHeight="386.0" prefWidth="413.0"&gt;
                      &lt;columns&gt;
                          &lt;TableColumn prefWidth="122.0" text="Description" /&gt;
                          &lt;TableColumn prefWidth="57.0" text="Price" /&gt;
                          &lt;TableColumn prefWidth="81.0" text="Sub Total" /&gt;
                          &lt;TableColumn prefWidth="96.0" text="Table Id" /&gt;
                          &lt;TableColumn prefWidth="57.0" text="Price" /&gt;
                      &lt;/columns&gt;
                  &lt;/TableView&gt;
                  &lt;JFXTextField layoutX="53.0" layoutY="439.0" prefHeight="37.0" prefWidth="155.0" /&gt;
                  &lt;JFXTextField layoutX="253.0" layoutY="439.0" prefHeight="37.0" prefWidth="155.0" /&gt;
                  &lt;GridPane layoutX="63.0" layoutY="503.0" prefHeight="75.0" prefWidth="345.0"&gt;
                      &lt;columnConstraints&gt;
                          &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                          &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                      &lt;/columnConstraints&gt;
                      &lt;rowConstraints&gt;
                          &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                      &lt;/rowConstraints&gt;
                      &lt;children&gt;
                          &lt;AnchorPane prefHeight="200.0" prefWidth="200.0"&gt;
                              &lt;children&gt;
                                  &lt;JFXButton layoutX="25.0" layoutY="25.0" onAction="#actorder" prefHeight="75.0" prefWidth="173.0" text="Order" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                              &lt;/children&gt;
                          &lt;/AnchorPane&gt;
                          &lt;AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="1"&gt;
                              &lt;children&gt;
                                  &lt;JFXButton layoutX="39.0" layoutY="14.0" onAction="#actnew" prefHeight="75.0" prefWidth="172.0" text="New" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                              &lt;/children&gt;
                          &lt;/AnchorPane&gt;
                      &lt;/children&gt;
                  &lt;/GridPane&gt;
                  &lt;MenuBar layoutX="21.0" layoutY="14.0" prefHeight="29.0" prefWidth="413.0"&gt;
                      &lt;menus&gt;
                          &lt;Menu mnemonicParsing="false" text="File"&gt;
                              &lt;items&gt;
                                  &lt;MenuItem mnemonicParsing="false" text="Close" /&gt;
                              &lt;/items&gt;
                          &lt;/Menu&gt;
                          &lt;Menu mnemonicParsing="false" text="Edit"&gt;
                              &lt;items&gt;
                                  &lt;MenuItem mnemonicParsing="false" text="Delete" /&gt;
                              &lt;/items&gt;
                          &lt;/Menu&gt;
                          &lt;Menu mnemonicParsing="false" text="Help"&gt;
                              &lt;items&gt;
                                  &lt;MenuItem mnemonicParsing="false" text="About" /&gt;
                              &lt;/items&gt;
                          &lt;/Menu&gt;
                      &lt;/menus&gt;
                  &lt;/MenuBar&gt;
                  &lt;StackPane fx:id="acContent" layoutX="454.0" layoutY="49.0" prefHeight="525.0" prefWidth="605.0"&gt;
                      &lt;children&gt;
                          &lt;AnchorPane fx:id="anchora" prefHeight="200.0" prefWidth="200.0"&gt;
                             &lt;children&gt;
  
                                 &lt;GridPane fx:id="sasa" layoutX="17.0" layoutY="7.0" prefHeight="90.0" prefWidth="571.0"&gt;
                                     &lt;columnConstraints&gt;
                                         &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                                         &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                                         &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                                         &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                                         &lt;ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" /&gt;
                                     &lt;/columnConstraints&gt;
                                     &lt;rowConstraints&gt;
                                         &lt;RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /&gt;
                                     &lt;/rowConstraints&gt;
                                     &lt;children&gt;
                                         &lt;AnchorPane prefHeight="200.0" prefWidth="200.0"&gt;
                                             &lt;children&gt;
                                                 &lt;JFXButton fx:id="table" layoutX="37.0" layoutY="19.0" onAction="#acttable" prefHeight="90.0" prefWidth="135.0" text="TABLE" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                                             &lt;/children&gt;
                                         &lt;/AnchorPane&gt;
                                         &lt;AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="1"&gt;
                                             &lt;children&gt;
                                                 &lt;JFXButton fx:id="stock" layoutX="43.0" layoutY="32.0" onAction="#actstock" prefHeight="90.0" prefWidth="134.0" text="STOCK" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                                             &lt;/children&gt;
                                         &lt;/AnchorPane&gt;
                                         &lt;AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="2"&gt;
                                             &lt;children&gt;
                                                 &lt;JFXButton fx:id="reports" layoutX="26.0" layoutY="32.0" onAction="#actreports" prefHeight="90.0" prefWidth="134.0" text="REPORTS" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                                             &lt;/children&gt;
                                         &lt;/AnchorPane&gt;
                                         &lt;AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="3"&gt;
                                             &lt;children&gt;
                                                 &lt;JFXButton fx:id="users" layoutX="26.0" layoutY="32.0" onAction="#actusers" prefHeight="90.0" prefWidth="134.0" text="USERS" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                                             &lt;/children&gt;
                                         &lt;/AnchorPane&gt;
                                         &lt;AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="4"&gt;
                                             &lt;children&gt;
                                                 &lt;JFXButton fx:id="logout" layoutX="28.0" layoutY="32.0" onAction="#actlogout" prefHeight="90.0" prefWidth="134.0" text="LOGOUT" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                                             &lt;/children&gt;
                                         &lt;/AnchorPane&gt;
                                     &lt;/children&gt;
                                 &lt;/GridPane&gt;
                          &lt;HBox fx:id="hboxx" layoutX="17.0" layoutY="110.0" prefHeight="398.0" prefWidth="571.0" /&gt;
                             &lt;/children&gt;
                          &lt;/AnchorPane&gt;
                      &lt;/children&gt;
                  &lt;/StackPane&gt;
              &lt;/children&gt;
          &lt;/AnchorPane&gt;
      &lt;/children&gt;
  &lt;/AnchorPane&gt;
  </code></pre>
  
  <p>i would want to align the buttons in a hbox but am getting an error here </p>
  
  <pre><code>@Override
      public void initialize(URL url, ResourceBundle rb) {
      hboxx.getChildren().add(buttons)
      }
  </code></pre>
  
  <p>Any Help Thank you.</p>