Skip to content

Instantly share code, notes, and snippets.

@TheItachiUchiha
Forked from jewelsea/SlideOut.java
Last active August 29, 2015 14:21
Show Gist options
  • Save TheItachiUchiha/dbda02d96a9dfa59df8c to your computer and use it in GitHub Desktop.
Save TheItachiUchiha/dbda02d96a9dfa59df8c to your computer and use it in GitHub Desktop.
/** file: slideout.css
place in same directory as SlideOut.java */
.root {
-fx-background-color: rgb(32, 32, 32);
-fx-font-size: 20;
-fx-padding: 10;
}
.sidebar {
-fx-padding: 10 10 10 10;
-fx-background-insets: 0 10 0 0;
-fx-border-insets: 0 10 0 0;
-fx-background-color: rgb(46,48,50);
-fx-border-color: rgb(30, 30, 30);
-fx-border-width: 2;
}
/** 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');
}
package slideout;
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 {
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 sidebar with some content in it.
final Pane lyricPane = createSidebarContent();
SideBar sidebar = new SideBar(250, 100, lyricPane);
VBox.setVgrow(lyricPane, Priority.ALWAYS);
// layout the scene.
final BorderPane layout = new BorderPane();
Pane mainPane = new VBox(
sidebar.getControlButton());
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 BorderPane lyricPane = new BorderPane();
// Add Something
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, final double hiddenWidth, 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) {
if(frac < 1 - (hiddenWidth / expandedWidth) ) {
final double curWidth = expandedWidth * (1.0 - frac);
setPrefWidth(curWidth);
}
}
};
hideSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent actionEvent) {
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) {
if(frac > (hiddenWidth / expandedWidth) ) {
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 (getPrefWidth() == expandedWidth) {
hideSidebar.play();
} else {
showSidebar.play();
}
}
}
});
}
}
}
@TheItachiUchiha
Copy link
Author

SlideOut with added utility of keeping the slidepane visible width. This can be used to show few controls of the slidepane in a minimized way.

Also contains DARK theme.

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