Skip to content

Instantly share code, notes, and snippets.

@jewelsea
Last active November 19, 2020 12:33
  • Star 17 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jewelsea/1437374 to your computer and use it in GitHub Desktop.
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
Copy link
Author

jewelsea commented Dec 6, 2011

@jewelsea
Copy link
Author

@jewelsea
Copy link
Author

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
Copy link
Author

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
Copy link

jnour commented Aug 27, 2014

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
Copy link

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

@schtisoo
Copy link

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

@MNCODE
Copy link

MNCODE commented Jul 13, 2018

Is is possible to have the WebView right of the Sidebar to expand if you hide the Sidebar and shrink if you show the Sidebar ?
I thought of an Event triggered by the Animation to translate the other View too.

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