Question

MainView包含InformationComponent：

@Push
@Route
public class MainView extends VerticalLayout {       
    InformationComponent infoComponent;

    public MainView(@Autowired StudentRepository studentRepo, @Autowired Job jobImportCsv, @Autowired JobLauncher jobLauncher, @Value("${file.local-tmp-file}") String inputFile) {     
    [...] // some stuffs

    infoComponent = new InformationComponent(studentRepo);
    add(infoComponent);
    }

    //update when job process is over
    private void uploadFileSuccceed() {
       infoComponent.update(myUploadComponent.getFile());
    }

InformationComponent：

public class InformationComponent extends HorizontalLayout {

    StudentRepository studentRepo;

    Label nbLineInFile = new Label();

    VerticalLayout componentLeft = new VerticalLayout();;
    VerticalLayout componentRight = new VerticalLayout();;

    public InformationComponent(StudentRepository studentRepo) {
    [...] // some init and style stuff

    addLine("Nombre de lignes dans le fichier", nbLineInFile);
    }

    private void addLine(String label, Label value) {
    componentLeft.add(new Label(label));
    componentRight.add(value);
    }

    public void update(File file) {
    try {


        long nbLines = Files.lines(file.toPath(), Charset.defaultCharset()).count();

        System.out.println("UPDATED! " +nbLines); // value is display in console ok!
        UI.getCurrent().access(() -> nbLineInFile.setText(nbLines)); // UI is not updated!!
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
  }
}

当我从MainView调用InformationComponent时，标签未在浏览器中更新。

UI.getCurrent().access(() -> nbLineInFile.setText(nbLines))

也可以尝试使用@Push（PushMode.MANUAL）和ui.push（）;但也不起作用...

完整的源代码在这里：https://github.com/Tyvain/ProcessUploadedFile-Vaadin_SpringBatch/tree/push-not-working

Answer 1

我怀疑这里的问题是uploadFileSuccceed()是从后台线程运行的，在这种情况下，UI.getCurrent()将返回null。这将导致NullPointerException杀死后台线程，或者替代地，异常被捕获并被调用方静默忽略。另一种选择是uploadFileSuccceed()通过不同的浏览器窗口发生，因此也通过不同的UI实例发生，这意味着更改将在错误的UI的上下文中被推送。

由于这些原因，UI.getCurrent().access(...)通常是一种反模式，尽管不幸的是，它在旧示例中已广泛使用。

您可以通过在UI.getCurrent()方法的开头记录update的值并将其与UI.getCurrent()的值进行比较来检查这是否是导致问题的原因，例如在InformationComponent的构造函数中。

要正确解决此问题，您应该在整个事件链中传递正确的UI实例，该事件源于触发后台处理启动的任何因素。您还应该注意，使用任何getUI()子类中可用的Component方法可能很诱人，但是该方法不是线程安全的，因此应在后台线程中避免使用。

作为最后的通知，在这种情况下，我建议使用Span或Text组件而不是Label。在Vaadin 10中，Label组件已更改为使用<label> HTML元素，这意味着它主要旨在用作输入组件的标签。

Answer 2

根据Leif提供的信息，您应该执行以下示例中的操作。

在运行时，将此HorizontalLayout子类对象附加到父UI对象时，将调用其onAttach方法。到那时，我们可以通过存储UI引用来记住UI，该成员变量名为ui。实际上，返回的是Optional<UI>而不是UI对象，因此我们需要测试是否为null，尽管它在onAttach的位置永远不能为null。

public class InformationComponent extends HorizontalLayout {

    UI ui;

    StudentRepository studentRepo;

    Label nbLineInFile = new Label();

    VerticalLayout componentLeft = new VerticalLayout();;
    VerticalLayout componentRight = new VerticalLayout();;

    public InformationComponent(StudentRepository studentRepo) {
        [...] // some init and style stuff

        addLine("Nombre de lignes dans le fichier", nbLineInFile);
    }

    private void addLine(String label, Label value) {
        componentLeft.add(new Label(label));
        componentRight.add(value);
    }

    public void update(File file) {
    try {
        long nbLines = Files.lines(file.toPath(), Charset.defaultCharset()).count();

        System.out.println("UPDATED! " +nbLines); // value is display in console ok!
        this.ui.access(() -> nbLineInFile.setText(nbLines)); // UI is not updated!!
    } catch (IOException e) {
        throw new RuntimeException(e);
    } catch (UIDetachedException e) {
        // Do here what is needed to do if UI is no longer attached, user has closed the browser
    }

    @Override  // Called when this component (this `HorizontalLayout`) is attached to a `UI` object.
    public void onAttach() {
        ui = this.getUI().orElseThrow( () -> new IllegalStateException("No UI found, which should be impossible at point of `onAttach` being called.") );

}

vaadin 10-推送-标签不会更新

2 个答案: