问题：

JavaFX将重复视图同步到同一控制器（FXML

支才

2023-03-14

下面是一个说明问题的小应用程序：

ButtonPanel.fxml

<ScrollPane fx:controller="ButtonPanelController">
    <VBox>
        <Button fx:id="myButton" text="Click Me" onAction="#buttonClickedAction" />
    </VBox>
</ScrollPane>

按钮PanelController。Java语言

public class ButtonPanelController {

    @FXML
    Button myButton;

    boolean isRed = false;

    public void buttonClickedAction(ActionEvent event) {
        if(isRed) {
            myButton.setStyle("");
        } else {
            myButton.setStyle("-fx-background-color: red");
        }
        isRed = !isRed;
    }
}

TestApp。Java语言

public class TestApp extends Application {

    ButtonPanelController buttonController;

    @Override
    public void start(Stage stage) throws Exception {
        // 1st Stage
        stage.setTitle("1st Stage");
        stage.setWidth(200);
        stage.setHeight(200);
        stage.setResizable(false);

        // Load FXML
        FXMLLoader loader = new FXMLLoader(
                ButtonPanelController.class.getResource("ButtonPanel.fxml"));
        Parent root = (Parent) loader.load();

        // Grab the instance of ButtonPanelController
        buttonController = loader.getController();

        // Show 1st Scene
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();

        // 2nd Stage
        Stage stage2 = new Stage();
        stage2.setTitle("2nd Stage");
        stage2.setWidth(200);
        stage2.setHeight(200);
        stage2.setResizable(false);

        /* Override the ControllerFactory callback to use 
         * the stored instance of ButtonPanelController
         * instead of creating a new one.
         */
        Callback<Class<?>, Object> controllerFactory = type -> {
            if(type == ButtonPanelController.class) {
                return buttonController;
            } else {
                try {
                    return type.newInstance();
                } catch(Exception e) {
                    throw new RuntimeException(e);
                }
            }
        };

        // Load FXML
        FXMLLoader loader2 = new FXMLLoader(
                ButtonPanelController.class.getResource("ButtonPanel.fxml"));
        // Set the ControllerFactory before the load takes place
        loader2.setControllerFactory(controllerFactory);
        Parent root2 = (Parent) loader2.load();

        // Show 2nd Scene
        Scene scene2 = new Scene(root2);
        stage2.setScene(scene2);
        stage2.show();
    }

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

基本上，我有一个FXML，用于两个单独的场景，它们可能在屏幕上同时处于活动状态，也可能不处于活动状态。这方面的一个实际例子是，将内容固定到一个侧面板上，再加上一个按钮，该按钮可以在一个可以拖动/调整大小的单独窗口中打开相同的内容。

我试图实现的目标是保持视图同步（其中一个视图的更改会影响另一个视图）。

我可以通过回调将两个视图指向同一个控制器，但是我现在遇到的问题是UI更改仅反映在第二个场景中。两个视图都与控制器对话，但控制器只与第二个场景对话。我假设JavaFX实现MVC或IOC的某些东西在通过FXMLLoader加载时以某种1:1的关系将控制器链接到视图。

我很清楚，尝试将两个视图链接到一个控制器是不好的MVC实践，但是我希望避免实现实际上完全相同的单独FXML和控制器。

有可能实现我上面列出的这种同步吗？

如果我需要创建一个单独的控制器，最好的html" target="_blank">方法是什么来确保两个用户界面同步（甚至是边栏移动）？

提前感谢！

-史蒂夫

林亦

2023-03-14

代码不起作用的原因是FXML加载器将对FXML中具有fx:id属性的元素的引用注入控制器中具有匹配名称的字段中。因此，当您第一次加载FXML文件时，FXMLLoader将字段myButton设置为加载FXML时创建的按钮的引用。由于第二次加载FXML时使用的是完全相同的控制器实例，因此FXML加载程序现在将同一字段（在同一控制器实例中）设置为对再次加载FXML文件时创建的按钮的引用。换句话说，按钮控制器。myButton现在指的是创建的第二个按钮，而不是第一个。所以当你调用myButton时。设置样式（…）它更新第二个按钮的样式。

基本上，您总是希望每个视图实例都有一个控制器实例。您需要的是两个控制器访问相同的共享状态。

创建一个存储数据的模型类。在MVC架构中，视图观察模型并在模型中的数据发生变化时更新。控制器对用户与视图的交互做出反应并更新模型。

（可以说，FXML为您提供了更多类似的MVP架构。这也有变体，但通常演示者会观察模型并在模型中的数据发生变化时更新视图，并更新模型以响应用户交互。）

因此，您的模型可能看起来像：

import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;

public class Model {

    private final BooleanProperty red = new SimpleBooleanProperty();

    public final BooleanProperty redProperty() {
        return this.red;
    }


    public final boolean isRed() {
        return this.redProperty().get();
    }


    public final void setRed(final boolean red) {
        this.redProperty().set(red);
    }


    public void toggleRed() {
        setRed(! isRed() );
    }
}

您的ButtonPanel.fxml不会改变：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Button?>

<ScrollPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="ButtonPanelController">
    <VBox >
        <Button fx:id="myButton" text="Click Me" onAction="#buttonClickedAction" />
    </VBox>
</ScrollPane>

您的控制器有对模型的引用。它可以使用模型属性上的绑定或侦听器来更新UI，处理程序方法只是更新模型：

import javafx.beans.binding.Bindings;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;

public class ButtonPanelController {

    @FXML
    Button myButton;

    boolean isRed = false;

    private Model model ;

    public ButtonPanelController(Model model) {
        this.model = model ;
    }

    public void initialize() {

        myButton.styleProperty().bind(Bindings.
                when(model.redProperty()).
                then("-fx-background-color: red;").
                otherwise("")
        );
    }

    public void buttonClickedAction(ActionEvent event) {
        model.toggleRed();
    }
}

最后，保持所有内容的同步，因为视图是同一模型的视图。换句话说，您只需创建一个模型并将其引用传递给两个控制器。由于我将模型作为控制器中的构造函数参数（这很好，因为您知道在创建实例后就有了模型），因此我们需要一个控制器工厂来创建控制器实例：

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.util.Callback;

public class TestApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        // 1st Stage
        stage.setTitle("1st Stage");
        stage.setWidth(200);
        stage.setHeight(200);
        stage.setResizable(false);

        // The one and only model we will use for both views and controllers:
        Model model = new Model();

        /* Override the ControllerFactory callback to create 
         * the controller using the model:
         */
        Callback<Class<?>, Object> controllerFactory = type -> {
            if(type == ButtonPanelController.class) {
                return new ButtonPanelController(model);
            } else {
                try {
                    return type.newInstance();
                } catch(Exception e) {
                    throw new RuntimeException(e);
                }
            }
        };

        // Load FXML
        FXMLLoader loader = new FXMLLoader(
                ButtonPanelController.class.getResource("ButtonPanel.fxml"));
        loader.setControllerFactory(controllerFactory);

        Parent root = (Parent) loader.load();

        // Show 1st Scene
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();

        // 2nd Stage
        Stage stage2 = new Stage();
        stage2.setTitle("2nd Stage");
        stage2.setWidth(200);
        stage2.setHeight(200);
        stage2.setResizable(false);

        // Load FXML
        FXMLLoader loader2 = new FXMLLoader(
                ButtonPanelController.class.getResource("ButtonPanel.fxml"));
        // Set the ControllerFactory before the load takes place
        loader2.setControllerFactory(controllerFactory);
        Parent root2 = (Parent) loader2.load();

        // Show 2nd Scene
        Scene scene2 = new Scene(root2);
        stage2.setScene(scene2);
        stage2.show();
    }

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

JavaFX将重复视图同步到同一控制器（FXML

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档