JavaFX CSS: Label in GridPane rechts ausrichten

[godi]

Hallo!

Ich habe ein Label das ich einen Identifier zugewiesen habe.
Alle Labels mit diesem Identifier sollen mittels css im GridPane rechts ausgerichtet werden.

In reinem Java funktioniert es so:

GridPane.setHalignment(label, HPos.RIGHT);

In css habe ich es schon so versucht:

#myIdentifier {       
    -fx-text-alignment: right; 
    -fx-alignment: center-right ;
    -fx-halignment: right ;
}

So funktionierts aber leider nicht.

Wie bekomme ich dies hin, dass das Label im GridPane rechts ausgerichtet wird?

godi

 

[nillehammer]

1. Identifier sollen -wie der Name schon sagt- etwas identifizieren. Das bedingt, dass sie eindeutig sind. Sprich jede id darf Seitenweit nur einmal vorkommen. Darum ist ein CSS-Selektor über den Identifier zwar gangbar aber doch ungewöhnlich. Wenn FX es unterstützt, steige lieber auf CSS-Klassen um.
2. Das Alignment wird vom Container festgelegt. Du musst also die eigenschaft für das Element setzen, welches die Labels beinhaltet. Im Java-Code hast Du die enstprechende Methode ja auch auf GridPane (dem Container) aufgerufen und nicht auf Label. Mit letzerem hättest Du wahrscheinlich dafür gesorgt, dass der Text, den das Label anzeigt, rechtsbündig ist.

 

[godi]

Hallo,

ok also css Klassen sollten möglich sein:

label.getStyleClass().add("labelStyleClass");

Dann kann ich im css schreiben:

.labelStyleClass { ... }

Also ist es besser jedem Element dem ich das selbe Aussehen geben möchte eine Klasse zu erstellen und diese dann den Elementen mitzuteilen?

zu 2)
Wie kann ich dann dem Container in css mitteilen, dass er nur die Elemente mit der StyleClass "labelStyleClass" Rechtsbündig darstellen soll?

 

[nillehammer]

Also ist es besser jedem Element dem ich das selbe Aussehen geben möchte eine Klasse zu erstellen und diese dann den Elementen mitzuteilen?

Ein ganz klares JA!

zu 2)
Wie kann ich dann dem Container in css mitteilen, dass er nur die Elemente mit der StyleClass "labelStyleClass" Rechtsbündig darstellen soll?

Garnicht es geht immer nur für alle. (Das ist jedenfalls für CSS und "normale" HTML-Seiten, bzw. das, was der Browser draus macht, so. Eventuelle Besonderheiten von FX sind mir nicht bekannt.)

 

[godi]

Ein ganz klares JA!

Garnicht es geht immer nur für alle. (Das ist jedenfalls für CSS und "normale" HTML-Seiten, bzw. das, was der Browser draus macht, so. Eventuelle Besonderheiten von FX sind mir nicht bekannt.)

Na gut dann muss ich wohl meinen Java und CSS Code nochmal ändern und die Ausrichtung direkt in Java umsetzen.

Aber vielen Dank für die Info mit den Klassen! 🙂
Ich habe mich vorher eh schon gefragt für was ich das brauche. 😉

 

[nillehammer]

Wenn Du etwas mehr schreibst, was Du da layouten willst, könnte man vielleicht Alternativen nennen.

 

[godi]

Im Anhang habe ich mal ein Test Programm angehängt mit dem CSS File (endet mit .txt damit es hochgeladen werden kann).
Es soll das Label links vom TextField rechtsbündig sein.

Leider ist jetzt auch ein Problem mit den css Klassen aufgetaucht.

Ich habe eine Klasse für den Container (.dialogContainer), eine Klasse für Überschriften (.title) und die vordefinierte Klasse für Label (.label).

Alle Label die im dialogContainer sind sollen einen weißen Text haben.
Die Überschriften sollen eine andere Farbe bekommen. Leider funktioniert das mit den Klassen jetzt nicht mehr. Irgendwie bekommen die Überschriften auch die weiße Farbe.
Also

.dialogContainer .title { ... }

wird von

.dialogContainer .label{ ... }

überschrieben.

Wie kann man das jetzt umsetzen sodass die Überschriften (in JavaFX vom Type Label) die Klasse .title und alle anderen Labels die Klasse .label verwenden?

 

[nillehammer]

Bin Dein Programm und die CSS-Datei durchgegangen. Das sieht soweit recht ordentlich aus. Ich konnte jedenfalls keinen Fehler finden.

Habe mir dann mal angeschaut, wie JavaFX mit CSS umgeht. Wenn du auch mal hier schaust: JavaFX CSS Reference Guide, Limitations, dann siehst Du, dass einige viel genutzte Sachen nicht oder leicht anders funktionieren. U.a. auch die Selektion über CSS-Klassen. Dazu aus dem Reference Guide: "Using a class selector as a descendant selector (using whitespace as the combinator) does not work. Instead, insert a * prior to the class selector. For example, instead of ".a .b { ... }" use ".a *.b { ... }""

Das dürfte Dein Problem erklären.

 

[godi]

Vielen Dank nochmals!

Jetzt habe ich in dem css File die "Style-Beschreibung" für das normale label vor die "Style-Beschreibung" für den Titel bzw Subtitel gesetzt. So funktioniert es.

Den *-Operator habe ich auch getestet.
Leider bin ich mir jetzt nicht sicher für was der gut sein soll, da es ohne und mit funktioniert.

Desweiteren habe ich auch noch den > Operator vor einem Klassennamen gefunden. Wenn der vor das Label gesetzt wird dann wird die Spaltenschrift der TableView nicht gleich gefärbt wie die Labelschrift.
Aber darauf bin ich auch nur durch Probieren gekommen. Was der jetzt wirklich macht bleibt mir verborgen. 😉

 

[nillehammer]

Desweiteren habe ich auch noch den > Operator vor einem Klassennamen gefunden. Wenn der vor das Label gesetzt wird dann wird die Spaltenschrift der TableView nicht gleich gefärbt wie die Labelschrift.
Aber darauf bin ich auch nur durch Probieren gekommen. Was der jetzt wirklich macht bleibt mir verborgen.

>

heißt: "Nur direkte Nachfahren". Beispiel:

.datentabelle>.datenzeile

Das heißt: Wende die Styles nur auf Elemente der Klasse datenzeile an, wenn diese direkte Nachfahren eines Elements der klasse datentabelle sind:

<div class="datentabelle">
  <!--Direkter Nachfahre (Kind), wird selektiert -->
  <div class="datenzeile">...</div>
  <div>
    <!-- Kein direkter Nachfahre (hier ein Enkel), wird nicht selektiert) -->
    <div class="datenzeile">...</div>
  </div>
</div>