Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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

View SlideOut.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();
}
}
}
});
}
}
}
View SlideOut.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
/** 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');
}
Owner

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.

Owner

Unfortunately, due to some modification of either the YouTube system or the JavaFX system, this demo no longer plays back YouTube videos like it used to when I originally developed it in 2011 for Java 7. I do not know the reason that video playback no longer works.

The pane slide-in, slide-out functionality still works fine - it's just the video playback which does not work anymore.

Hello
i m also running same problem with youtube embeded video on javafx ! can t load anymore video with a webview !!
is there any other solution to play youtube video with javafx ?
Thank you

It seems to be working fine with Javafx 8u20, for what it's worth.

thanks for your efforts. Is there a way to set the expandedWidth to the width really occupied by the content?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.