web-dev-qa-db-fra.com

GroupBox / TitledBorder dans JavaFX 2?

Existe-t-il quelque chose comme GroupBox ou TitledBorder disponible sur JavaFX 2?

Merci pour tout indice :-)

layoutjavafx-2groupboxtitled-border
34
stefan.at.wpf

Aucun contrôle standard de ce type, mais il est facile de créer le vôtre. Voici un exemple d'implémentation:

/** Places content in a bordered pane with a title. */
class BorderedTitledPane extends StackPane {
  BorderedTitledPane(String titleString, Node content) {
    Label title = new Label(" " + titleString + " ");
    title.getStyleClass().add("bordered-titled-title");
    StackPane.setAlignment(title, Pos.TOP_CENTER);

    StackPane contentPane = new StackPane();
    content.getStyleClass().add("bordered-titled-content");
    contentPane.getChildren().add(content);

    getStyleClass().add("bordered-titled-border");
    getChildren().addAll(title, contentPane);
  }
}

Et le css qui l'accompagne:

.label {
  -fx-font: 28px Vivaldi;
}

.bordered-titled-title {
  -fx-background-color: white;
  -fx-translate-y: -16;
}

.bordered-titled-border {
  -fx-content-display: top;
  -fx-border-insets: 20 15 15 15;
  -fx-background-color: white;
  -fx-border-color: black;
  -fx-border-width: 2;
}

.bordered-titled-content {
  -fx-padding: 26 10 10 10;
}

Le code provient d'un exemple que j'ai créé en réponse à un message de discussion sur le forum Oracle JavaFX "Equivalent à BorderFactory.createTitledBorder" .

La sortie de l'exemple de programme est indiquée ci-dessous.

gettysburg

40
jewelsea

J'ai utilisé TitledPane avec setCollapsible(false). Il semble plus cohérent que l'utilisation de styles CSS. Voici le résultat

enter image description here

32
Andriy Kryvtsun

Version FXML de la réponse de jewelsea:

TitledBorder (j'ai renommé le BorderedTitledPane en TitledBorder)

package com.example.controls;

import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;

public class TitledBorder extends StackPane 
{
    private Label titleLabel = new Label();
    private StackPane contentPane = new StackPane();
    private Node content;



    public void setContent(Node content)
    {
        content.getStyleClass().add("bordered-titled-content");
        contentPane.getChildren().add(content);
    }


    public Node getContent()
    {
        return content;
    }


    public void setTitle(String title)
    {
    titleLabel.setText(" " + title + " ");
    }


    public String getTitle()
    {
        return titleLabel.getText();
    }



    public TitledBorder() 
    {
        titleLabel.setText("default title");
        titleLabel.getStyleClass().add("bordered-titled-title");
        StackPane.setAlignment(titleLabel, Pos.TOP_CENTER);

        getStyleClass().add("bordered-titled-border");
        getChildren().addAll(titleLabel, contentPane);
      }

}

Utilisation de FXML:

<?import com.example.controls.*?>

<TitledBorder title="title" >       
    <Label text="label with text" />        
</TitledBorder>

N'oubliez pas la feuille de style!

tilisez ce CSS pour une police normale:

.bordered-titled-title {
  -fx-background-color: white;
  -fx-translate-y: -10; /* play around with this value when changing the title font to get a vertically centered title */
}

.bordered-titled-border {
  -fx-content-display: top;
  -fx-border-insets: 20 15 15 15;
  -fx-background-color: white;
  -fx-border-color: black;
  -fx-border-width: 2;
}

.bordered-titled-content {
  -fx-padding: 26 10 10 10;
}

En utilisant ce CSS, cela ressemble maintenant à ceci:

enter image description here

Mise à jour: Problèmes lorsque le titre est plus long que le contenu:

enter image description here Une astuce pour résoudre ce problème?

11
stefan.at.wpf

Voici un document FXML qui peut être chargé dans SceneBuilder qui a des fonctionnalités similaires:

<?xml version="1.0" encoding="UTF-8"?>

<?import Java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane style="-fx-border-insets: 8 0 0 0; -fx-background-color: #FFFFFF; -fx-border-color: black;">
    <children>
        <Label alignment="TOP_LEFT" layoutX="14.0" style="-fx-padding: 0 5; -fx-background-color: inherit;" text="Title" />
        <AnchorPane prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="10.0" />
    </children>
</AnchorPane>

Si vous avez besoin d'agrandir la taille du texte/de la bordure de l'étiquette, vous ne devez modifier que le CSS et le topAnchor de l'enfant AnchorPane et le premier argument de -fx-border-insets du parent AnchorPane.

2
Doctor Parameter

GroupBox - c'est la disposition habituelle du groupe, pour autant que je vois.

TitledBorder - ressemble à un TitledPane (qui est généralement un composant d'Accordéon, mais pourrait être un contrôle existant séparément).

Les analogues JavaFX-2 sont différents des vôtres (mais pas de manière significative), et comme d'habitude, vous pouvez utiliser différentes façons de contrôler l'apparence: css, remplacement du skin du contrôle, etc.

0
Alexander Kirov

Voici une implémentation GroupBox basée sur TitledPane. Il propose trois méthodes pour définir le titre, le contenu et le remplissage du contenu de la GroupBox.

public final class GroupBox extends Parent {

    private StackPane _stackPane;
    private TitledPane _titledPane;

    public GroupBox() {
        _stackPane = new StackPane();
        _titledPane = new TitledPane();
        setContentPadding(new Insets(10));
        _titledPane.setCollapsible(false);
        _titledPane.setContent(_stackPane);
        super.getChildren().add(_titledPane);
    }

    public GroupBox(String title, Node content) {
        this();
        setText(title);
        setContent(content);
    }

    public GroupBox(String title, Node content, Insets contentPadding) {
        this(title, content);
        setContentPadding(contentPadding);
    }

    public void setText(String value) {
        _titledPane.setText(value);
    }

    public void setContent(Node node) {
        _stackPane.getChildren().add(node);
    }

    public void setContentPadding(Insets value) {
        _stackPane.setPadding(value);
    }
}
0
Mohamed Handosa