JavaFX blur effect and layoutX and layoutY

Question

I did a try with effect of the framework, but it has some weird behaviour when I blur a textfield into a Parent, the textfield is positioned at a different place, please take a look :

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.TextField;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class BlurTest extends Application {
    CTextView subPane = new CTextView(100,100);
    @Override
    public void start(Stage stage) throws Exception {

        VBox myBox = new VBox();

        CheckBox chkBlur = new CheckBox("Show");

        chkBlur.selectedProperty().addListener(new ChangeListener<Boolean>(){

            @Override
            public void changed(ObservableValue<? extends Boolean> v,
                    Boolean oldValue, Boolean newValue) {
                if(oldValue)
                    subPane.getTxt().setEffect(new GaussianBlur());
                else
                    subPane.getTxt().setEffect(null);
            }

        });

        myBox.getChildren().addAll(new TextField("Not blur"), subPane, new TextField("Not blur"), chkBlur);
        myBox.setPrefSize(250, 500);

        Scene scene = new Scene(myBox);

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

And my custom textview :

import javafx.scene.Parent;
import javafx.scene.control.TextField;


public class CTextView extends Parent {

    private TextField txt;

    public CTextView(double w, double h) {
        super();
        this.txt = new TextField("Default");

        this.txt.setLayoutX(20);
        this.txt.setLayoutY(20);

        this.getChildren().add(this.txt);
    }

    public TextField getTxt() {
        return txt;
    }
}

I don't understand why the textfield is repositioned in the Parent after blur effect.. :/ Thanks for your help

Answer 1

> Why is the textfield repositioned?
The GaussianBlur's default radius value is 10. When this effect applied to the node, that node's local bounds expands extra these blurring radii, but the node's width and height remains the same. The Parent does not apply CSS style and does not layout its children, however as seen in your example, it takes into account the local bounds and repositioned the node.

> Why do the textfield's setLayoutX and setLayoutY not worked?
The Parent does consider the local bounds of its child but it does not layout them according the child's layout values. Use a Region (or its subclasses) which takes care its children layout values.

public class CTextView extends Region {

    private TextField txt;

    public CTextView(double w, double h) {
        super();
        this.txt = new TextField("Default");

        this.txt.setLayoutX(20);
        this.txt.setLayoutY(20);

        this.getChildren().add(this.txt);
    }

    public TextField getTxt() {
        return txt;
    }
}