{"id":274,"date":"2013-03-25T23:44:17","date_gmt":"2013-03-25T22:44:17","guid":{"rendered":"http:\/\/www.jensd.de\/wordpress\/?p=274"},"modified":"2013-04-05T15:42:32","modified_gmt":"2013-04-05T13:42:32","slug":"custom-component-selectablepane","status":"publish","type":"post","link":"https:\/\/www.jensd.de\/wordpress\/?p=274","title":{"rendered":"Custom Component: SelectableTitledPane"},"content":{"rendered":"

I’m working on a form to provide search criteria to find pictures in picmodo<\/em><\/strong>.
\nMy goal is to provide a very easy to use interface. <\/p>\n

Each search criteria is represented by a SelectableTitledPane<\/code><\/strong> which contains the parameter settings.
\nBasically I have set a CheckBox<\/code> as graphic component of a TitlePane<\/code> and modified the CSS of the Default-Skin com.sun.javafx.scene.control.skin.TitledPaneSkin<\/code>.<\/p>\n

\"picmodo<\/a><\/p>\n

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

[java]
\npublic class SelectableTitledPane extends TitledPane {<\/p>\n

private CheckBox checkBox;<\/p>\n

public SelectableTitledPane(String title, Node content) {
\n super(title, content);
\n checkBox = new CheckBox(title);
\n checkBox.selectedProperty().
\n bindBidirectional(this.expandedProperty());
\n setExpanded(false);
\n setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
\n setGraphic(checkBox);
\n setSkin(new TitledPaneSkin(this));
\n lookup(“.arrow”).
\n setVisible(false);
\n lookup(“.title”).
\n setStyle(“-fx-padding: 0 0 4 -10;”
\n + “-fx-background-color: null;”);
\n lookup(“.content”).
\n setStyle(“-fx-background-color: null; -fx-padding: 0.2em 0.2em 0.2em 1.316667em;”);
\n }<\/p>\n

public BooleanProperty getSelectedProperty() {
\n return checkBox.selectedProperty();
\n }<\/p>\n

public boolean isSelected() {
\n return checkBox.isSelected();
\n }<\/p>\n

public void setSelected(boolean selected) {
\n checkBox.setSelected(selected);
\n }
\n}
\n[\/java]<\/p>\n

Basically the SelectableTitledPane<\/code><\/strong> can then be used as a TitledPane, e.g.:<\/p>\n

[java]
\nComboBox ownerBox = ComboBoxBuilder.create().
\n prefWidth(150).
\n promptText(resourceBundle
\n .getString(“search.prompt.owner”)).
\n build();<\/p>\n

SelectableTitledPaneownerParams = new SelectableTitledPane(resourceBundle
\n .getString(“search.checkbox.owner”), ownerBox);
\n[\/java]<\/p>\n