GroupBox/TitledBorder in JavaFX 2?

Question

Gibt es auf JavaFX 2 so etwas wie ein GroupBox oder TitledBorder?

Dank für jeden Hinweis :-)

Answer 1

Keine solche Standard-Steuerung, aber es Es ist einfach, eigene zu erstellen. Hier ist eine Beispielimplementierung:

/** 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); 
    } 
} 

und die dazugehörige CSS für sie:

.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; 
} 

Der Code ist von einem example ich als Antwort auf einen Oracle JavaFX Forum-Thread Beitrag "Equivalent to BorderFactory.createTitledBorder" erstellt.

Die Ausgabe des Beispielprogramms ist wie folgt.

Answer 2

GroupBox - das übliche Gruppenlayout ist, soweit ich sehe.

TitledBorder - sieht aus wie eine TitledPane (die normalerweise eine Komponente von Accordion ist, aber eine separat existierende Kontrolle sein könnte).

JavaFX-2-Analoga sieht anders aus als bei Ihnen (aber nicht signifikant), und wie üblich, können Sie verschiedene Arten von Steuer Aussehen verwenden zu ändern: CSS, Haut Kontrolle des ersetzen, etc

Answer 3

FXML Version von jewelsea Antwort:

TitledBorder (ich die BorderedTitledPane zu TitledBorder umbenannt)

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); 
     } 

} 

FXML Nutzung:

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

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

Sie nicht das Stylesheet vergessen !

verwenden CSS für eine normale Schrift:

.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; 
} 

dieses CSS verwenden es sieht nun wie folgt aus:

Update: Probleme beim Titel mehr, dann ist Inhalt:

Irgendein Hinweis, um dieses Problem zu beheben?

Answer 4

Ich verwendete TitledPane mit setCollapsible(false). Es sieht konsistenter aus als die Verwendung von CSS-Stilen.Hier führen

Answer 5

Hier ist ein FXML Dokument, das in SceneBuilder geladen werden kann, die eine ähnliche Funktionalität hat:

<?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> 

Wenn Sie das Etikett Text/Grenzgröße vornehmen müssen größer sollten Sie nur muss das CSS und den topAnchor des Child AnchorPane und das erste Argument von -fx-border-ints des übergeordneten AnchorPane editieren.

Answer 6

Hier ist eine GroupBox-Implementierung basierend auf TitledPane. Es bietet drei Methoden zum Festlegen des Titels, des Inhalts und des Inhalts der 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); 
    } 
}