Put labels on panes in gridpane in javafx

Question

I want to programatically put labels in my panes. I have a gridpane which is 11x12. The fields is in the outer fields. What i need to achieve is add my MonopolyConstants.FIELD_NAMES[I] to the labels that has to be in the pane.

So far my code look like this:

package gui;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import monopoly_import.MonopolyConstants;

/**
* FXML Controller class
*
* @author nj
*/

public class GUIController implements Initializable {

@FXML private GridPane grindPane;
@FXML private Label field0;

/**
 * Initializes the controller class.
 *
 * @param url
 */
@Override
public void initialize(URL url, ResourceBundle rb) {
    GridPane gridPane = new GridPane();
    gridPane.add(new Label("Item listing"), 0, 0);

    for (int i = 0; i < 1; i++) {
        Label field0 = new Label(MonopolyConstants.FIELD_NAMES[i]);
        gridPane.add(field0, i + 1, 0);
    }
}

}

This is the FXML.

    <GridPane fx:id="grindPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="900.0" style="-fx-background-color: #E04134; -fx-background-repeat: stretch; -fx-background-position: center center;" xmlns="http://javafx.com/javafx/9" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.GUIController">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints />
  </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 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 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>
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;">
         <children>
            <Label fx:id="field0" layoutX="24.0" layoutY="17.0" text="START" />
         </children></Pane>
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="1" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="2" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="3" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="4" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="5" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="6" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="7" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="8" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="1" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="2" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="3" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="4" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="5" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="6" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="7" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="8" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="9" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="8" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="7" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="6" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="5" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="4" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="3" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="2" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="1" GridPane.rowIndex="11" />
      <Pane prefHeight="33.0" prefWidth="60.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="9" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="8" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="7" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="6" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="5" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="4" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="3" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="2" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="1" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="10" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="10" />
      <ImageView fitHeight="161.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.columnSpan="8" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.rowSpan="10" GridPane.valignment="CENTER">
         <image>
            <Image url="@../MonopolyLogo.png" />
         </image>
      </ImageView>
   </children>
</GridPane>

Here you can see how it looks in Scene builder. Monopoly game

It is. Right now it only initiates the first field. But i guess it is somehow possible to make the labels without manually set a label on every field? — Codeboy, Nov 09 '17 at 07:10
Of course. If you add your FXML to the question, I'll adjust it. Btw.: is it necessary to get the strings for the Labels from the FIELD_NAMES constant? — David Artmann, Nov 09 '17 at 07:38
Just added it. :-) About the field_names it is because that is a constant i use in my logic. — Codeboy, Nov 09 '17 at 09:19
Ok, so just to make sure I got you right: you do not want to instantiate the Labels via Java code but it's ok to add them via FXML (like you already did for your START label)? — David Artmann, Nov 09 '17 at 09:56

David Artmann · Accepted Answer · 2017-11-09T15:11:46.890

Ok, so first of all if you're using initialize in your controller you do not need to instantiate widgets. Simply use them via @FXML or make the widgets accessible by using public. the FXMLLoader will do the instantiation if those widgets are set with a proper fx:id. Hence this GridPane gridPane = new GridPane(); will not be necessary any more.

As a second tip, make use of JavaFX styling probabilities in form of a stylesheet and avoid bloating the FXML files with inline styles. I prefer to give the root container of your layout a stylesheet reference like stylesheets="@../style.css". Afterwards you can give desired widgets appropriate styleClass attributes.

To your problem: there are several possibilities to solve this.

First you could add a Label to each cell of the GridPane inside of the FXML. Imho you do not need to set separate Panes to each cell, especially because you can define the Labels with the desired background color, width and height. A downside of this would be, that you could not directly make use of your constant. Instead you could use a ResourceBundle to access its strings directly in the FXML.

To add the Labels desired stylings and text from the ResourceBundle you do it like this:

<GridPane ...>
    ...
    <children>
        <Label styleClass="label-even" text="%00"/>
        <Label styleClass="label-odd" text="%01" GridPane.columnIndex="1"/>
        <Label styleClass="label-even" text="%10" GridPane.rowIndex="1"/>
    </children>
</GridPane>

To make the bundle file (ideally named strings_en.properties) work you would need your FXMLLoader to tell where he could find it. This is done while loading the FXML file, e.g.:

final FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("sample.fxml"),
            ResourceBundle.getBundle("strings", Locale.getDefault()));

The bundle could entail strings like this (fitting to my example):

00=START
01=Label of first row and second column
...
10=Label of second column and first row
...

Second you could add those programmatically like you already tried to do so. And here you can make use of your constant MonopolyConstants.FIELD_NAMES.

The following snipped for your convenience which you can build on:

public class GUIController implements Initializable {
    @FXML 
    private GridPane gridPane;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        gridPane.add(new Label(MonopolyConstants.FIELD_NAMES[0]), 0, 0);
        gridPane.add(new Label(MonopolyConstants.FIELD_NAMES[1]), 1, 0);
        gridPane.add(new Label(MonopolyConstants.FIELD_NAMES[2]), 2, 0);
        ...
        gridPane.add(new Label(MonopolyConstants.FIELD_NAMES[39]), 11, 11);
    }
}

I am sure, there is a neat way of doing this more dynamically, but atm I not blessed with that amount of spare time ;)

Put labels on panes in gridpane in javafx

1 Answers1