public
Last active

Example of a JavaFX Pane which slides in and out on command.

  • Download Gist
SlideOut.java
Java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
import javafx.animation.*;
import javafx.application.Application;
import javafx.event.*;
import javafx.geometry.Pos;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.text.Text;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import javafx.util.Duration;
 
/** Example of a sidebar that slides in and out of view */
public class SlideOut extends Application {
private static final String[] lyrics = {
"And in the end,\nthe love you take,\nis equal to\nthe love\nyou make.",
"She came in through\nthe bathroom window\nprotected by\na silver\nspoon.",
"I've got to admit\nit's getting better,\nA little better\nall the time."
};
 
private static final String[] locs = {
"http://www.youtube.com/watch?v=osAA8q86COY&feature=player_detailpage#t=367s",
"http://www.youtube.com/watch?v=IM2Ttov_zR0&feature=player_detailpage#t=30s",
"http://www.youtube.com/watch?v=Jk0dBZ1meio&feature=player_detailpage#t=25s"
};
WebView webView;
public static void main(String[] args) throws Exception { launch(args); }
public void start(final Stage stage) throws Exception {
stage.setTitle("Slide out YouTube demo");
 
// create a WebView to show to the right of the SideBar.
webView = new WebView();
webView.setPrefSize(800, 600);
 
// create a sidebar with some content in it.
final Pane lyricPane = createSidebarContent();
SideBar sidebar = new SideBar(250, lyricPane);
VBox.setVgrow(lyricPane, Priority.ALWAYS);
 
// layout the scene.
final BorderPane layout = new BorderPane();
Pane mainPane = VBoxBuilder.create().spacing(10)
.children(
sidebar.getControlButton(),
webView
).build();
layout.setLeft(sidebar);
layout.setCenter(mainPane);
 
// show the scene.
Scene scene = new Scene(layout);
scene.getStylesheets().add(getClass().getResource("slideout.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
 
private BorderPane createSidebarContent() {// create some content to put in the sidebar.
final Text lyric = new Text();
lyric.getStyleClass().add("lyric-text");
final Button changeLyric = new Button("New Song");
changeLyric.getStyleClass().add("change-lyric");
changeLyric.setMaxWidth(Double.MAX_VALUE);
changeLyric.setOnAction(new EventHandler<ActionEvent>() {
int lyricIndex = 0;
@Override public void handle(ActionEvent actionEvent) {
lyricIndex++;
if (lyricIndex == lyrics.length) {
lyricIndex = 0;
}
lyric.setText(lyrics[lyricIndex]);
webView.getEngine().load(locs[lyricIndex]);
}
});
changeLyric.fire();
final BorderPane lyricPane = new BorderPane();
lyricPane.setCenter(lyric);
lyricPane.setBottom(changeLyric);
return lyricPane;
}
 
/** Animates a node on and off screen to the left. */
class SideBar extends VBox {
/** @return a control button to hide and show the sidebar */
public Button getControlButton() { return controlButton; }
private final Button controlButton;
 
/** creates a sidebar containing a vertical alignment of the given nodes */
SideBar(final double expandedWidth, Node... nodes) {
getStyleClass().add("sidebar");
this.setPrefWidth(expandedWidth);
this.setMinWidth(0);
 
// create a bar to hide and show.
setAlignment(Pos.CENTER);
getChildren().addAll(nodes);
 
// create a button to hide and show the sidebar.
controlButton = new Button("Collapse");
controlButton.getStyleClass().add("hide-left");
 
// apply the animations when the button is pressed.
controlButton.setOnAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
// create an animation to hide sidebar.
final Animation hideSidebar = new Transition() {
{ setCycleDuration(Duration.millis(250)); }
protected void interpolate(double frac) {
final double curWidth = expandedWidth * (1.0 - frac);
setPrefWidth(curWidth);
setTranslateX(-expandedWidth + curWidth);
}
};
hideSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
setVisible(false);
controlButton.setText("Show");
controlButton.getStyleClass().remove("hide-left");
controlButton.getStyleClass().add("show-right");
}
});
// create an animation to show a sidebar.
final Animation showSidebar = new Transition() {
{ setCycleDuration(Duration.millis(250)); }
protected void interpolate(double frac) {
final double curWidth = expandedWidth * frac;
setPrefWidth(curWidth);
setTranslateX(-expandedWidth + curWidth);
}
};
showSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
controlButton.setText("Collapse");
controlButton.getStyleClass().add("hide-left");
controlButton.getStyleClass().remove("show-right");
}
});
if (showSidebar.statusProperty().get() == Animation.Status.STOPPED && hideSidebar.statusProperty().get() == Animation.Status.STOPPED) {
if (isVisible()) {
hideSidebar.play();
} else {
setVisible(true);
showSidebar.play();
}
}
}
});
}
}
}
slideout.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
/** file: slideout.css
place in same directory as SlideOut.java */
.root {
-fx-background-color: cornsilk;
-fx-font-size: 20;
-fx-padding: 10;
}
 
.lyric-text {
-fx-font-size: 20;
-fx-fill: darkgreen;
-fx-font-weight: bold;
-fx-text-alignment: center;
}
 
.sidebar {
-fx-padding: 10 10 10 10;
-fx-background-insets: 0 10 0 0;
-fx-border-insets: 0 10 0 0;
-fx-background-color: linear-gradient(to bottom, derive(lavenderblush, -10%), derive(mistyrose, 10%));
-fx-border-color: derive(mistyrose, -20%);
-fx-border-width: 4;
}
 
/** icons from: http://www.customicondesign.com (free for non-commercial use). */
.hide-left {
-fx-graphic: url('http://www.veryicon.com/icon/64/Business/Pretty%20Office%205/Hide%20left.png');
}
.show-right {
-fx-graphic: url('http://www.veryicon.com/icon/64/Business/Pretty%20Office%205/Hide%20right.png');
}
.change-lyric {
-fx-graphic: url('http://www.veryicon.com/icon/64/Business/Pretty%20Office%205/Go%20into.png');
}

Updated gist to make compatible with later versions of JavaFX which will set the minimum width of the SideBar to something the fits it's content rather than zero - so updated the SideBar constructor to call this.setMinWidth(0) so that the SideBar doesn't take up any room when it is moved offscreen.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.