Skip to content

Instantly share code, notes, and snippets.

@jewelsea
Last active September 14, 2021 22:44
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jewelsea/5157233 to your computer and use it in GitHub Desktop.
Save jewelsea/5157233 to your computer and use it in GitHub Desktop.
Simple demo of stacking TitledPanes in a VBox.
/**
* file: fishy-fishy.css
* Place in same directory as StackedPanes.java.
* Have your build system copy this file to your build output directory.
**/
.root {
-fx-base: cadetblue;
}
.stacked-titled-panes {
-fx-background-color: seagreen;
}
.stacked-titled-pane {
-fx-color: cadetblue;
}
.stacked-titled-panes-scroll-pane {
-fx-background: darkseagreen;
}
import javafx.application.*;
import javafx.beans.value.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
/**
* Demonstrates placing multiple TitledPanes in a VBox so that each pane
* can open and close independently of every other pane (unlike an Accordion,
* which only allows a single pane to be open at a time).
*/
public class StackedPanes extends Application {
// image license: linkware - backlink to http://www.fasticon.com
private static final Image BLUE_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Blue-Fish-icon.png");
private static final Image RED_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Red-Fish-icon.png");
private static final Image YELLOW_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Yellow-Fish-icon.png");
private static final Image GREEN_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Green-Fish-icon.png");
@Override public void start(Stage stage) {
VBox stackedTitledPanes = createStackedTitledPanes();
ScrollPane scroll = makeScrollable(stackedTitledPanes);
scroll.getStyleClass().add("stacked-titled-panes-scroll-pane");
scroll.setPrefSize(410, 480);
stage.setTitle("Fishy, fishy");
Scene scene = new Scene(scroll);
scene.getStylesheets().add(getClass().getResource("fishy-fishy.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
private VBox createStackedTitledPanes() {
final VBox stackedTitledPanes = new VBox();
stackedTitledPanes.getChildren().setAll(
createTitledPane("One Fish", GREEN_FISH),
createTitledPane("Two Fish", YELLOW_FISH, GREEN_FISH),
createTitledPane("Red Fish", RED_FISH),
createTitledPane("Blue Fish", BLUE_FISH)
);
((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true);
stackedTitledPanes.getStyleClass().add("stacked-titled-panes");
return stackedTitledPanes;
}
public TitledPane createTitledPane(String title, Image... images) {
FlowPane content = new FlowPane();
for (Image image: images) {
ImageView imageView = new ImageView(image);
content.getChildren().add(imageView);
FlowPane.setMargin(imageView, new Insets(10));
}
content.setAlignment(Pos.TOP_CENTER);
TitledPane pane = new TitledPane(title, content);
pane.getStyleClass().add("stacked-titled-pane");
pane.setExpanded(false);
return pane;
}
private ScrollPane makeScrollable(final VBox node) {
final ScrollPane scroll = new ScrollPane();
scroll.setContent(node);
scroll.viewportBoundsProperty().addListener(new ChangeListener<Bounds>() {
@Override public void changed(ObservableValue<? extends Bounds> ov, Bounds oldBounds, Bounds bounds) {
node.setPrefWidth(bounds.getWidth());
}
});
return scroll;
}
public static void main(String[] args) { Application.launch(args); }
}
@jewelsea
Copy link
Author

Answer to StackOverflow question: JavaFX accordion with multiple open panes.

@tonybanks
Copy link

please work on a titledpane with an icon...thanks

@jewelsea
Copy link
Author

This gist is now slightly outdated, an updated version is provided within the previously linked StackOverflow question.

In particular, ScrollPane has fitHeight/fitWidth properties which can be set rather than using a listener on the viewport bounds to set the preferred size of encapsulated content.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment