JavaFX Custom control mit Hover Effekt

[lam_tr]

Moin zusammen,

ich möchte das Textfeld von Jira zuzusagen nachbauen. Dabei geht es darum, dass sobald der Benutzer das Textfeld hovered erscheinen zum Beispiel "Edit" und "Commit" Button über oder unter das Textfeld.

Wie würde man sowas in Javafx machen?

Müsste ich da einen Container über das Textfield machen mit margin von 10px und sobald gehovered wird erscheint Pinsel-Button`?

Wie würdet ihr die Sache angehen?

Viele Grüße
lam

 

[knilch]

Hi,
Ich weiss nicht genau, wie das in Jira funktioniert, bzw. wie du das meinst, aber ich könnte mir so vorstellen, dass du das Textfield in einem Container (z.B. Pane) legst, dann soblad die Maus innerhalb des Containers liegt, werden die Buttons eingeblended, wenn die Maus wieder aus dem Container ist, werden die Buttons ausgeblendet.
Hier mal ein Beispiel, wie du das mit Fadein/Fadeout machen könntest:

import javafx.animation.FadeTransition;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.util.Duration;


public class Main extends Application {
    private Stage primaryStage;
   
    @Override
    public void start(Stage primaryStage) {
        this.primaryStage = primaryStage;
        initGui();
    }
   
    public static void main(String[] args) {
        launch(args);
    }

    private void initGui() {
        BorderPane root = new BorderPane();

        Pane topPane = new Pane();
        topPane.setPrefSize(260, 140);
       
        Pane bottomPane = new Pane();
        bottomPane.setPrefSize(260, 40);
       
        Label lbl = new Label("Name");
        lbl.setLayoutY(10);
        lbl.setLayoutX(10);
       
        TextField txtField = new TextField();
        txtField.setLayoutY(40);
        txtField.setLayoutX(10);
       

        Button btnSend = new Button("Send");
        btnSend.setLayoutY(70);
        btnSend.setLayoutX(10);
       
        Button btnEdit = new Button("Edit");
        btnEdit.setLayoutY(70);
        btnEdit.setLayoutX(120);
       
        Button btnExit = new Button("Exit");
        btnExit.setLayoutY(10);
        btnExit.setLayoutX(10);
       
        txtField.setPromptText("Name");
        txtField.textProperty().addListener(new ChangeListener<String>() {
            public void changed(ObservableValue<? extends String> observable, String oldVal, String newVal) {
                System.out.println(newVal);
            }
        });
       
       
        topPane.setOnMouseEntered(new EventHandler<MouseEvent>(){
            public void handle(MouseEvent mouseEvent){
                FadeTransition fadeTransition  = new FadeTransition(Duration.millis(500), btnSend);
                fadeTransition.setFromValue(0.0);
                fadeTransition.setToValue(1.0);
                fadeTransition.play();
                fadeTransition  = new FadeTransition(Duration.millis(500), btnEdit);
                fadeTransition.setFromValue(0.0);
                fadeTransition.setToValue(1.0);
                fadeTransition.play();
                txtField.requestFocus();
            }
        });
       
        topPane.setOnMouseExited(new EventHandler<MouseEvent>(){  
            public void handle(MouseEvent mouseEvent){
                FadeTransition fadeTransition  = new FadeTransition(Duration.millis(500), btnSend);
                fadeTransition.setFromValue(1.0);
                fadeTransition.setToValue(0.0);
                fadeTransition.play();
                fadeTransition  = new FadeTransition(Duration.millis(500), btnEdit);
                fadeTransition.setFromValue(1.0);
                fadeTransition.setToValue(0.0);
                fadeTransition.play();
                topPane.requestFocus();
               
            }
        });
       
        bottomPane.setOnMouseEntered(new EventHandler<MouseEvent>(){
            public void handle(MouseEvent mouseEvent){
                FadeTransition fadeTransition  = new FadeTransition(Duration.millis(500), btnExit);
                fadeTransition.setFromValue(0.0);
                fadeTransition.setToValue(1.0);
                fadeTransition.play();;
                btnExit.requestFocus();
            }
        });
       
        bottomPane.setOnMouseExited(new EventHandler<MouseEvent>(){
            public void handle(MouseEvent mouseEvent){
                FadeTransition fadeTransition  = new FadeTransition(Duration.millis(500), btnExit);
                fadeTransition.setFromValue(1.0);
                fadeTransition.setToValue(0.0);
                fadeTransition.play();
                bottomPane.requestFocus();
            }
        });
       
               
        topPane.getChildren().addAll(lbl, txtField, btnSend, btnEdit);

        bottomPane.getChildren().addAll(btnExit);
       
        btnExit.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                Platform.exit();               
            }
        });
       
        btnSend.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                System.out.println("Send");               
            }
        });
       
        btnEdit.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Edit");               
            }
        });
               
        root.setTop(topPane);
        root.setBottom(bottomPane);
       
       
        Scene scene = new Scene(root, 260.0, 200.0);

        primaryStage.setTitle(this.getClass().toString());
        primaryStage.setScene(scene);
        primaryStage.show();   
    }

}

 

[dzim]

Schau mal, ob das PopOver-Control von ControlsFX für dich eine Möglichkeit wäre:
http://fxexperience.com/controlsfx/features/#popover
Ich denke, das kommt dem noch am nächsten, denn scheinbar (siehe Screenshots auf der Seite, kann man ja "beliebigen" Content dort anzeigen lassen).

Grüsse