JavaFX Nodes platzieren

[White_Fox]

Moin allerseits

Ein ähnliches Theater wie ich es neulich mit Swing hatte (und ihr mir so toll geholfen habt) verfolgt mich nun mit JavaFX: Wie platziere ich Nodes vernünftig?

Das, was ich vorhabe, soll mal eine tabellenartige Übersicht werden, zunächst will ich aber erstmal eine Art Spaltenheader dafür bauen. Etwas ganz einfaches, eigentlich nur ein Rechteck mit Text, zentriert. Also ein Region-Objekt erstellt, Hintergrund gesetzt, und dann ein Textobjekt eingefügt. Hier erstmal Code und CSS:

class StamptableHeader extends Region {

    StamptableHeader(String text) {
        super();
        getStylesheets().add(getClass().getResource("centerviewstamptable.css").toExternalForm());
        getStyleClass().add("stamptable-header");
        initGraphics(text);
    }

    private void initGraphics(String text) {
        Text headerText = new Text(text);

        layoutInArea(headerText,
                0, 0,
                headerText.getLayoutBounds().getWidth(),
                headerText.getLayoutBounds().getHeight(),
                0,
                HPos.CENTER,
                VPos.CENTER);

        getChildren().addAll(headerText);
    }
}

.stamptable-header {
    -fx-background-color: -fx-box-border, lightgray;
    -fx-border-color: black;
    -fx-font-weight: bold;
    -fx-padding: 0 0 0 10; /* bzw. -fx-padding: 0 10 0 10; */
}

StamptableHeader>Text {
    -fx-font-weight: bold;
    -fx-text-alignment: center;
}

Ein Region-Objekt hat eine Contentarea. Diese wird, so verstehe ich das zumindest, von meinem Textobjekt ausgefüllt. Irgendwo in der Doku habe ich gelesen, das der Inhalt auch aus der Contentarea hinaus gehen kann. Um die Contentarea herum gibt es die Paddingarea, um einen Rand um die Contentarea definieren zu können. Erklärt hier:

JavaFX Region

The JavaFX Region is a base class for all JavaFX layout classes like Pane etc.

jenkov.com

Jetzt will ich in meinem CSS das Padding einstellen. Aber egal was ich da mache: Ich bekomme seitliches Padding stets immer nur auf der rechten Seite. Ich mache mal zwei Bilder und schreibe dazu, was ich im CSS eingestellt habe:

-fx-padding: 0 0 0 10; (soll eigentlich Padding auf der linken Seite liefern, ist aber stattdessen rechts):



-fx-padding: 0 10 0 10; (soll eigentlich Padding auf der linken und der rechten Seite liefern, aber stattdessen ist es rechts nun noch breiter):


Ich habe nun ziemlich viel ausprobiert, aber ich bekomme das Padding absolut nicht sauber links und rechts verteilt. Was ich machen kann, ist, das Textobjekt in der layoutInArea()-Methode weiter rechts zu platzieren. Das verschafft mir auf der linken Seite zwar scheinbar Abstand, hat mit Padding aber nix zu tun: die rechte Seite verhält sich unabhängig davon exakt gleich und summiert die Paddingabstände für links und rechts dort.

Ich habe auch probiert, einen LayoutManager dazuwischenzuschalten und diesen die Platzierung zu überlassen, aber das hat auch nicht funktioniert. Außerdem würde ich das auch deshalb gerne selber machen um das mal zu lernen.

Sieht vielleicht jemand, was ich da falsch mache?

 

[White_Fox]

So...ich denke, ich habe eine Lösung gefunden. Ob es DIE Lösung ist werde ich in der Zukunft sehen.

Zuerst einmal:
Wird die Methode initGraphics() aufgerufen, sind noch keinerlei CSS-Eigenschaften geladen. Wenn ich mit dem Debugger in dieser Methode angehalten habe, haben z.B. getPadding().getLeft() nur 0.0 zurückgeliefert, völlig egal was ich in der CSS zu stehen habe.

Um das Objekt zu layouten – und das will ich hier ja –, bringt die Klasse Region eine Methode mit, die muß jedoch überschrieben werden, und zwar protected void layoutChildren(){}. Also:

@Override
    protected void layoutChildren() {
        layoutInArea(headerText,
                getPadding().getLeft(), 0,
                headerText.getLayoutBounds().getWidth(),
                headerText.getLayoutBounds().getHeight(),
                0,
                HPos.CENTER,
                VPos.CENTER);
    }

Man sollte meinen daß jetzt alles gut ist, aber Pustekuchen - das ganze Region ist immer noch zu lang und hat rechts zuviel Abstand, völlig egal was ich in die CSS schreibe. getPadding().getLeft() und auch getPadding().getRight() liefern zwar nun das, was in der CSS steht, trotzdem ist auf der rechten Seite mehr Abstand als ich will.

Das wird erst besser, wenn ich wenigstens die bevorzugte Weite angebe, die gesamte Methode also lautet:

    @Override
    protected void layoutChildren() {
        setPrefWidth(getPadding().getLeft() + headerText.getLayoutBounds().getWidth() + getPadding().getRight());
        
        layoutInArea(headerText,
                getPadding().getLeft(), 0,
                headerText.getLayoutBounds().getWidth(),
                headerText.getLayoutBounds().getHeight(),
                0,
                HPos.CENTER,
                VPos.CENTER);
    }

Das wird vermutlich auch erstmal nur vorläufig sein, sehr wahrscheinlich werde ich mit dem Layout noch viel "Spaß" haben. Aber zumindest funktioniert es jetzt so, wie es für den ersten Schuß geplant habe.

 

[Robert Zenz]

Nur so als Anmerkung, es gibt (gab?) JVx-JavaFX, das hat ebenfalls eine solche Erweiterungsschicht wie fuer Swing. Da gibt es unter anderem auch die FXFormPane welche gleich wie das Swing FormLayout funktioniert.

Um auf dein Problem zurueck zu kommen, ich glaube die Region hat keine Ahnung von Padding und aehnliches, und klatscht die Kinder einfach so auf 0/0. Du brauchst einen Container welche auch auf das Padding achtet...aber frag' mich bitte nicht welche das sind. Vermutlich wird eine einfache Pane aber schon reichen.

 

[White_Fox]

Um auf dein Problem zurueck zu kommen, ich glaube die Region hat keine Ahnung von Padding und aehnliches, und klatscht die Kinder einfach so auf 0/0. Du brauchst einen Container welche auch auf das Padding achtet...aber frag' mich bitte nicht welche das sind.

Die Region hat auf jeden Fall die Eigenschaft Padding. Aber sie scheint es nicht weiter zu verwalten. Das Koordinatensystem ignoriert das Padding jedenfalls, das muß man selber einhalten.

So jedenfalls mein Kenntnisstand nach meinen bisherigen Versuchen.

Ich will da eigentlich auch gar nicht groß herumlayouten, das sollen später mal Spaltenheader werden. Evt. soll der Benutzer die Spaltengröße auch mal ändern können, aber für den Anfang verzichte ich auch darauf.

PS: Danke für den Hinweis mit JVx. Ich wußte gar nicht daß es das auch für JavaFX gibt.

PPS: Es gibt übrigens, sicher interessant für den ein oder anderen, in JavaFX auch ein SwingNode. Um Swingkram in JavaFX anzeigen zu können.

 

[Robert Zenz]

PS: Danke für den Hinweis mit JVx. Ich wußte gar nicht daß es das auch für JavaFX gibt.

Es gab irgendwo auch noch eine Vaadin Anbindung, aber die war damals fuer Vaadin 8, keine Ahnung ob das jemals aktualisiert wurde. Ich finde, ehrlich gesagt, auch gerade das Projekt dazu nicht mehr. Kann gut sein dass es schon immer Teil von VisionX, also dem kommerziellen Produkt, war.

JVx selbst ist GUI-Framework unabhaengig konzipiert, und zumindest schein es noch eine ReactUI und Flutter Anbindung zu geben, aber da bin ich schon lange raus.

PPS: Es gibt übrigens, sicher interessant für den ein oder anderen, in JavaFX auch ein SwingNode. Um Swingkram in JavaFX anzeigen zu können.

Ich kann mir erinnern, man konnte JavaFX in Swing einbetten und auch umgekehrt. Das ist natuerlich praktisch wenn man etwas was nur in dem einen laeuft aber man gerade eine Applikation in dem anderen baut.

Die Region hat auf jeden Fall die Eigenschaft Padding. Aber sie scheint es nicht weiter zu verwalten. Das Koordinatensystem ignoriert das Padding jedenfalls, das muß man selber einhalten.

Ja, das ist auch mein Gedanke. Ein Pane beachtet diese eventuell schon, bin ich mir aber auch nicht sicher.

 

[White_Fox]

So langsam verstehe ich, wie JavaFX funktioniert. Eigentlich ist es wirklich gar nicht so schwer.

Neben protected void layoutChildren() sollten auch noch die Methoden rotected double computePrefHeight(double width) und protected double computePrefWidth(double height) überschrieben werden. Diese werden zu gegebener Zeit vom JavaFX Scenegraph aufgerufen.

Was die Methoden machen ist selbsterklärend. In protected void layoutChildren() legt man fest, welche Kindernodes man wo haben will und wie groß diese sein sollen. Welchen Platz man dafür in Höhe und Breite hat kann man mit getWidth() ganz einfach feststellen, man beachte daß es kein Gegenstück wie setWidth() oder so gibt.

Mit diesem Wissen (zuzüglich etwas Stylingkram mit CSS) wäre es kein Problem, die Tastatur von hier in JavaFX nachzubauen:

https://www.java-forum.org/thema/swing-gui-komponenten-platzieren.205349/#post-1380332

Und bei meinem anderen Projekt, für das ich den Aufriss mache, reicht es schon um Tabellenspalten anzuzeigen.