JavaFX GridPane: Zellenfarbe setzen

[hk]

Hallo Forum,
ich habe eine JavaFX-Anwendung mit einem GridPane dessen Zellen mit Label-Objekten besetzt sind und sichtbare Linien hat. Ich möchte nun einzelne Zellen mit einer anderen Hintergrund-Farbe belegen. Meine Versuche führen immer nur zu einem Farbhintergrund des Textes im Label-Objekt aber nicht über die ganze Zelle.

// Beide Anweisungen führen zum gleichen Ergebnis
grid.getChildren().get(2).setStyle("-fx-background-color: red"); // Zellen Hintergrund ändern
lab.setStyle("-fx-background-color: red"); // Label Hintergrund ändern

Kann mir wer helfen?
lg heinz

 

[dzim]

Klingt danach, als ob die Labels nicht die volle Breite im Layout einnehmen.

Kannst zum Beispiel mal GridPane#hgrow auf deine Labels anwenden...

GridPane (JavaFX 2.2)

 

[hk]

Hallo dzim,
habe hgrow und vgrow probiert. Gleiches Ergebnis, nur der im Label stehende Text wird rot unterlegt. Weiters habe ich nicht bemerkt, dass sich die Labels ausgebreitet hätten.
In der Folge der Code:

// Grid für Spielfläche erstellen
    GridPane grid = new GridPane();
    grid.setMaxSize(Region.USE_COMPUTED_SIZE, Region.USE_COMPUTED_SIZE);
    GridPane.setHgrow(grid, Priority.ALWAYS);
    GridPane.setVgrow(grid, Priority.ALWAYS);
    //grid.alignmentProperty().setValue(Pos.CENTER);
    grid.setPadding(new Insets(10));  //Insert vom Parent
    grid.setAlignment(Pos.TOP_CENTER);  //Position des Grid im Fenster
    grid.setGridLinesVisible(true);
        // Breite und Höhe der Grid-Zellen definieren
    for (int i = 0; i < anzCol; i++) {
      ColumnConstraints colu = new ColumnConstraints();
      colu.setPercentWidth(20);
      grid.getColumnConstraints().add(colu);
      RowConstraints row = new RowConstraints();
      row.setPrefHeight(30);
      grid.getRowConstraints().add(row);
    }
    // Grid mit Label belegen
    int z = 0;
    for (int row = 0; row < anzRow; row++) 
    {
      for (int col = 0; col < anzCol; col++) 
      {
        GridPane.setConstraints(feldListe.get(z), col, row, 1, 1, HPos.CENTER, VPos.CENTER);
        grid.getChildren().add(feldListe.get(z++));
      }
    }
    // Test zum Einfärben eines Feldes
    Label label = new Label();
    label = feldListe.get(2);
    label.setStyle("-fx-background-color: red");
 
    //grid.getChildren().get(2).setStyle("-fx-background-color: red");
    
   

    StackPane root = new StackPane();
    root.getChildren().add(grid);
    
    Scene scene = new Scene(root, 620, 620);
    
    primaryStage.setTitle("Hello Grid!");
    primaryStage.setScene(scene);
    primaryStage.show();

lg heinz

 

[dzim]

Naja, das Problem wird sein, dass du nun noch dei maxWidth anpassen musst. Alleine das vgrow sagt nur, dass es für das Layouting den Platz reserviert, da der Inhalt des Labels aber nicht so breit ist, musst du das Label selbst auch noch stretchen.

Füge also noch maxWith mit dem Wert Double#MAX_VALUE hinzu. Ich denke, dann müsste es gehen.

 

[hk]

Hallo dzim,
das setzen von maxWidth(Double.MAX_VALUE) bringt ebenfalls kein sichtbares Ergebnis.

Aber wir entfernen uns vom eigentlichen Problem: Ist es möglich eine Grid-Zelle oder auch eine -Column oder -Row einzufärben? Das ganze Grid kann ich nämlich einfärben.
lg heinz

 

[dzim]

Nope, nicht soweit ich weiss. Müsste es mal selbst ausprobieren, um dir da wirklich zu helfen. Weiss aber nicht, ob ich da morgen noch Zeit für finde... Mal sehen. Vielleicht frag noch mal nach, dass ich es nicht aus den Augen verliere.

 

[hk]

Ok, danke einstweilen,
lg heinz

 

[dzim]

ich habe mir gerade mal einen Test gebaut. Allerdings verwende ich nur FXMLs (ich baue sie aber nicht mit dem SceneBuilder, sondern sie werden bei mir aus FXGraph-Dateien erstellt - FXGraph ist eine DSL aus dem e(fx)clipse-Plugin für die JavaFX-Entwicklung unter Eclipse). Aber eigentlich spielt das keine Rolle, denn:

Dein Probleme scheinen durch die Row- und ColumnConstraints zu entstehen. Habe dazu mal ein FXML mit 3 Zeilen und Spalten erstellt und Constraints wie du verwendet:
[XML]
<?xml version="1.0" encoding="UTF-8"?>
<!--
Do not edit this file it is generated by e(fx)clipse from ../src/application/GridPaneTest.fxgraph
-->

<?import java.lang.*?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml">

<GridPane>
<Label style="-fx-background-color: red;" text="Zeile 1, Spalte 1" GridPane.rowIndex="1" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: blue;" text="Zeile 1, Spalte 2" GridPane.rowIndex="1" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: yellow;" text="Zeile 1, Spalte 3" GridPane.rowIndex="1" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: grey;" text="Zeile 2, Spalte 1" GridPane.rowIndex="2" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: green;" text="Zeile 2, Spalte 2" GridPane.rowIndex="2" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: orange;" text="Zeile 2, Spalte 3" GridPane.rowIndex="2" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: pink;" text="Zeile 3, Spalte 1" GridPane.rowIndex="3" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: silver;" text="Zeile 3, Spalte 2" GridPane.rowIndex="3" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: magenta;" text="Zeile 3, Spalte 3" GridPane.rowIndex="3" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<rowConstraints>
<RowConstraints prefHeight="30"/>
<RowConstraints prefHeight="30"/>
<RowConstraints prefHeight="30"/>
</rowConstraints>
<columnConstraints>
<ColumnConstraints percentWidth="20"/>
<ColumnConstraints percentWidth="20"/>
<ColumnConstraints percentWidth="20"/>
</columnConstraints>
</GridPane>
</StackPane>
[/XML]
Im Ergebnis sind zwar die Zellen ausgefüllt, aber sie sind völlig wirr angeordnet.
Das selbe ohne Constraints sieht dann Erwartungskonform aus:
[XML]
<?xml version="1.0" encoding="UTF-8"?>
<!--
Do not edit this file it is generated by e(fx)clipse from ../src/application/GridPaneTest.fxgraph
-->

<?import java.lang.*?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml">

<GridPane>
<Label style="-fx-background-color: red;" text="Zeile 1, Spalte 1" GridPane.rowIndex="1" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: blue;" text="Zeile 1, Spalte 2" GridPane.rowIndex="1" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: yellow;" text="Zeile 1, Spalte 3" GridPane.rowIndex="1" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: grey;" text="Zeile 2, Spalte 1" GridPane.rowIndex="2" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: green;" text="Zeile 2, Spalte 2" GridPane.rowIndex="2" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: orange;" text="Zeile 2, Spalte 3" GridPane.rowIndex="2" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: pink;" text="Zeile 3, Spalte 1" GridPane.rowIndex="3" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: silver;" text="Zeile 3, Spalte 2" GridPane.rowIndex="3" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
<Label style="-fx-background-color: magenta;" text="Zeile 3, Spalte 3" GridPane.rowIndex="3" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS">
<maxWidth><Double fx:constant="MAX_VALUE" /></maxWidth>
</Label>
</GridPane>
</StackPane>
[/XML]

Ich würde dir empfehlen, FXMLs anstellen con Code zu verwenden - ich finde dass es im Code mitunter etwas in Frickelei ausartet.

Und ich muss noch dazusagen, dass das Hauptproblem die Columnconstraints sind, nicht die RowContraints...

Grüsse

 

[hk]

Hallo dzim,
ich habe mir die zweite Version angesehen. Das sieht sehr gut aus!
Herzlichen Dank für deinen Einsatz!

Du sprichst davon, das die Columnconstraints die Schwierigkeiten machen. Kannst du das näher erläutern?

Wenn ich nun FXML verwende, heißt das, das ich 400 Labels (soviel Zellen brauche ich) in Serie erstellen muß?, es gibt wohl keine Schleifen.

Eine Frage habe ich noch: Kann ich die Farben der Labels vom Java-Code aus ändern?
lg heinz

 

[dzim]

Also du solltest an dieser Stelle nur die Hülle via FXML erstellen, die Labels würde ich dann doch eher im Code machen.
Aber du solltest, wie ich hier, vielleicht vorher mal ein kleines Beispiel ausprobieren, denn dann kannst du die dort gemachten Einstellungen für die Constraints und die Properties der Labels korrekt setzen.
Und ja: Die Farben kannst du ändern, z.B. indem du die Style-Property mit "-fx-background-color: orange;" (oder was auch immer...) befüllst. Da ich für so was fast nur noch CSS verwende, kannst du auch ein paar Style-Classes oder Pseudo-Classes verwenden (Constructive Deconstruction: Styling Cells in JavaFX).
Weitere Hinweise (JavaFX 2.2): Skinning JavaFX Applications with CSS | JavaFX 2 Tutorials and Documentation
Und noch mehr: Client Technologies: Java Platform, Standard Edition (Java SE) 8 Release 8

Schau mal, da wirst du sicher fündig. Und wenn nicht, dann im Netz (oder vielleicht auch hier).