GroupBox / TitledBorder in JavaFX 2?

Question

Is there something like a GroupBox or TitledBorder available on JavaFX 2?

Thanks for any hint :-)

Answer 1

No such standard control, but it it is easy to create your own. Here is a sample implementation:

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

And the accompanying css for it:

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

The code is from a example I created in response to an Oracle JavaFX forum thread post "Equivalent to BorderFactory.createTitledBorder".

The output of the example program is as shown below.

Answer 2

I used TitledPane with setCollapsible(false). It looks more consistent than using CSS styles. Here is result

Answer 3

FXML version of jewelsea's answer:

TitledBorder (I renamed the BorderedTitledPane to 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);
      }

}

FXML usage:

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

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

Do no forget the Stylesheet!

Use this CSS for a normal font:

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

Using this CSS it now looks like this:

Update: Problems when title is longer then content:

Any hint to fix this problem?