Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Example of a JavaFX Pane which slides in and out on command.
/** 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');
}
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();
}
}
}
});
}
}
}
@jewelsea
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.

@jewelsea
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.

@jnour

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

@WillBDaniels

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

@schtisoo

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.