Created
June 5, 2023 16:16
-
-
Save zjor/094d6556599b6bf1f8cb920def3895eb to your computer and use it in GitHub Desktop.
Flyout effect with JavaFX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package org.sandbox.jfx; | |
import javafx.animation.Interpolator; | |
import javafx.animation.KeyFrame; | |
import javafx.animation.KeyValue; | |
import javafx.animation.Timeline; | |
import javafx.embed.swing.JFXPanel; | |
import javafx.geometry.Pos; | |
import javafx.scene.Scene; | |
import javafx.scene.control.Button; | |
import javafx.scene.control.Label; | |
import javafx.scene.layout.BorderPane; | |
import javafx.scene.layout.HBox; | |
import javafx.scene.layout.Pane; | |
import javafx.scene.layout.VBox; | |
import javafx.scene.shape.Rectangle; | |
import javafx.util.Duration; | |
import javax.swing.JFrame; | |
import java.awt.Dimension; | |
import java.awt.Toolkit; | |
public class FlyoutEffect extends JFrame { | |
public FlyoutEffect() { | |
super("Flyout effect"); | |
setSize(800, 600); | |
setDefaultCloseOperation(EXIT_ON_CLOSE); | |
centerWindow(); | |
initUI(); | |
} | |
private void centerWindow() { | |
Dimension dim = Toolkit.getDefaultToolkit().getScreenSize(); | |
setLocation(dim.width / 2 - getSize().width / 2, dim.height / 2 - getSize().height / 2); | |
} | |
private void initUI() { | |
var jfxPanel = new JFXPanel(); | |
var root = new BorderPane(); | |
root.setPrefSize(800, 600); | |
var top = new HBox(); | |
top.setAlignment(Pos.CENTER); | |
top.setStyle("-fx-border-color: red; -fx-border-width: 1px; -fx-padding: 10px;"); | |
top.getChildren().add(new Label("Top")); | |
root.setTop(top); | |
var left = new VBox(); | |
left.setAlignment(Pos.CENTER); | |
left.setStyle("-fx-border-color: green; -fx-border-width: 1px; -fx-padding: 10px;"); | |
left.getChildren().add(new Label("Left")); | |
root.setLeft(left); | |
var center = new Pane(); | |
center.setMaxSize(400, 150); | |
center.setStyle("-fx-border-color: black; -fx-border-width: 1px;"); | |
center.setClip(new Rectangle(400, 150)); | |
var flyout = new HBox(); | |
flyout.setMaxSize(150, 150); | |
flyout.setPrefSize(150, 150); | |
flyout.setStyle("-fx-background-color: lightblue"); | |
flyout.setLayoutX(550); | |
flyout.setLayoutY(0); | |
center.getChildren().add(flyout); | |
center.setOnMouseEntered(e -> { | |
var kv = new KeyValue(flyout.layoutXProperty(), 250, Interpolator.EASE_BOTH); | |
var kf = new KeyFrame(Duration.seconds(0.3), kv); | |
var timeline = new Timeline(kf); | |
timeline.play(); | |
}); | |
center.setOnMouseExited(e -> { | |
var kv = new KeyValue(flyout.layoutXProperty(), 550, Interpolator.EASE_BOTH); | |
var kf = new KeyFrame(Duration.seconds(0.3), kv); | |
var timeline = new Timeline(kf); | |
timeline.play(); | |
}); | |
var button = new Button("Click me!"); | |
button.setOnAction(e -> System.out.println("Clicked!")); | |
flyout.getChildren().add(button); | |
flyout.setAlignment(Pos.CENTER); | |
root.setCenter(center); | |
var scene = new Scene(root); | |
jfxPanel.setScene(scene); | |
getContentPane().add(jfxPanel); | |
} | |
public static void main(String[] args) { | |
var app = new FlyoutEffect(); | |
app.setVisible(true); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment