Custom Component: SelectableTitledPane

I’m working on a form to provide search criteria to find pictures in picmodo.
My goal is to provide a very easy to use interface.

Each search criteria is represented by a SelectableTitledPane which contains the parameter settings.
Basically I have set a CheckBox as graphic component of a TitlePane and modified the CSS of the Default-Skin

picmodo search panel

The Checkbox‘s selectedProperty is bound to the expandedProperty of TitledPane to toggle the expand state and to get an indicator to enable / disable the criteria:

public class SelectableTitledPane extends TitledPane {

  private CheckBox checkBox;

  public SelectableTitledPane(String title, Node content) {
    super(title, content);
    checkBox = new CheckBox(title);
    setSkin(new TitledPaneSkin(this));
            setStyle("-fx-padding: 0 0 4 -10;"
            + "-fx-background-color: null;");
            setStyle("-fx-background-color: null; -fx-padding:  0.2em 0.2em 0.2em 1.316667em;");

  public BooleanProperty getSelectedProperty() {
    return checkBox.selectedProperty();

  public boolean isSelected() {
    return checkBox.isSelected();

  public void setSelected(boolean selected) {

Basically the SelectableTitledPane can then be used as a TitledPane, e.g.:

ComboBox ownerBox = ComboBoxBuilder.<AppUser>create().

SelectableTitledPaneownerParams = new SelectableTitledPane(resourceBundle
            .getString("search.checkbox.owner"), ownerBox);

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 thought on “Custom Component: SelectableTitledPane”

  1. The following time I learn a blog, I hope that it doesnt disappoint me as a lot as this one. I imply, I know it was my choice to learn, but I actually thought youd have one thing fascinating to say. All I hear is a bunch of whining about something that you may fix should you werent too busy searching for attention.