在CSSFX中将CSS样式属性绑定到节点

时间:2016-03-22 06:04:17

标签: css javafx properties styles bind

我想为我的项目设置模型,以便我的控制器可以相互通信。我希望它有一个setter和getter,以便于从任一类中轻松访问某些节点的样式。

我的问题:是否可以将样式属性(例如“-fx-background-color:blue”)绑定到节点?

从我的研究中,我发现这对于标签的文本值肯定是可能的(James_D在此解释:JavaFX - How to use a method in a controller from another controller?),但是我很难弄清楚用类似的东西做什么语法“setStyle”将是。

到目前为止我的模型:

 public class Model {

    private final StringProperty shadow = new SimpleStringProperty("-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.24), 10,0,0,0)");

    public StringProperty shadowProperty() {
        return shadow;
    }

    public final String getShadow() {
        return shadowProperty().get();
    }

    public final void setShadow(String shadow) {
        shadowProperty().set(shadow);
    }
}

我理解如何从控制器设置“阴影”值,但我不明白的是如何从另一个控制器绑定节点来监听该更改。

假设节点类似于:

@FXML AnchorPane appBar

我希望“appBar”能够对模型中的“阴影”进行任何更改。那会是什么样的?

1 个答案:

答案 0 :(得分:3)

您需要向shadowProperty添加侦听器以侦听其更改。

something.shadowProperty() .addListener( (observable, oldValue, newValue) -> {
    //do something with appBar 
}) ;

我不完全确定你想要达到的目标,但这应该回答你关于如何倾听财产变化的问题。

PS:我在手机上,所以不保证打字错误

编辑:您还可以将一个对象的属性绑定到另一个对象的属性。请使用bind()

编辑:以下是一个例子:

import javafx.application.Application;
import javafx.beans.property.Property;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.scene.Scene;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Main extends Application {

    Property<Background> backgroundProperty;
    StringProperty styleProperty;

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

    @Override
    public void start(Stage primaryStage) throws Exception {

        VBox root = new VBox(10);

        backgroundProperty = new SimpleObjectProperty<>();
        styleProperty = new SimpleStringProperty();

        // Pane that changes background by listener
        Pane pane1 = new Pane();
        pane1.setMinHeight(40);
        backgroundProperty.addListener( (observable, oldValue, newValue) -> {
            pane1.setBackground(backgroundProperty.getValue());
        });

        // Pane that changes background by property binding
        Pane pane2 = new Pane();
        pane2.setMinHeight(40);
        pane2.backgroundProperty().bind(backgroundProperty);

        // Pane that binds the style property
        Pane pane3 = new Pane();
        pane3.setMinHeight(40);
        pane3.styleProperty().bind(styleProperty);

        backgroundProperty.setValue(new Background(new BackgroundFill(Color.RED, null, null)));
        styleProperty.setValue("-fx-background-color: black");

        root.getChildren().add(pane1);
        root.getChildren().add(pane2);
        root.getChildren().add(pane3);

        Scene scene = new Scene(root, 200, 400);
        primaryStage.setScene(scene);
        primaryStage.show();

    }
}