vaadin 对 h1 元素的异步更新不会动态更改 h1 元素

Question

我创建了 Vaadin(13) 异步更新以使用 @push 注释（异步更新）更改垂直布局中的 H1 Vaadin 元素，它确实有效但不会更新对 h1 元素的更改，直到我在同一个窗口上执行某些操作，例如单击选项卡。我编写了代码以通过线程动态更改 h1 元素文本，该线程在页面加载后使用重写的 onAttach 方法自动运行。

    @Push
    public class Playboard extends VerticalLayout
    {  
private H1 timerc;
private FeederThread thread;
        public Playboard() throws ExecutionException, InterruptedException{
            generateGUI();
        }

        private void generateGUI() throws ExecutionException, InterruptedException {
            setSizeFull();
            setDefaultHorizontalComponentAlignment(Alignment.CENTER);
            addClassName("main-view");
            H1 header = new H1("Stock Market Simulation - Playboard");
            header.setWidthFull();
            header.setHeight("10%");
            header.getElement().getThemeList().add("dark");

            add(header);

            HorizontalLayout contents = new HorizontalLayout();
            contents.setSizeFull();
            contents.addClassName("content-view");


            VerticalLayout player = new VerticalLayout();
            player.setWidth("25%");
            player.setHeightFull();
            player.addClassName("player-view");

            VerticalLayout playboard = new VerticalLayout();
            playboard.addClassName("playboard-view");
            playboard.setWidth("75%");


            player.setDefaultHorizontalComponentAlignment(Alignment.START);
            Image p1Img = new Image("frontend/icons/userLogo.png","player");
            p1Img.setWidth("150px");
            p1Img.setHeight("150px");

            H4 playerName = new H4("Player");
            H4 totalWorth = new H4("Cash On Hand : ");
            H4 round = new H4("Round :");
            H4 timeR = new H4("Time Remaining");

            timerc = new H1("30s");


            player.add(p1Img,playerName,totalWorth,round,timeR,timerc);

            player.setHorizontalComponentAlignment(Alignment.CENTER,timerc);

            player.setHorizontalComponentAlignment(Alignment.CENTER,p1Img);

            contents.add(player,playboard);
            add(contents);

            Tab buy = new Tab("Buy");
            Tab sell = new Tab("Sell");
            Tabs tabs = new Tabs(buy, sell);
            tabs.setFlexGrowForEnclosedTabs(1);

            playboard.add(tabs);

        }


        @Override
        protected void onAttach(AttachEvent attachEvent) {
            // Start the data feed thread
            thread = new FeederThread(attachEvent.getUI(),timerc);
            thread.start();
        }

        @Override
        protected void onDetach(DetachEvent detachEvent) {
            thread.interrupt();
            thread = null;
        }

        //Thread
        private static class FeederThread extends Thread {
            private final com.vaadin.flow.component.UI ui;
            private  final  H1 element;

            private int count = 30;


            public FeederThread(com.vaadin.flow.component.UI ui,H1 element) {
                this.ui = ui;
                this.element = element;
            }

            @Override
            public void run() {
                while (count>0){
                    try {
                        Thread.sleep(1000);
                        ui.access(()-> {
                            element.setText(String.valueOf(count));

                        });
                        count--;
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }


                }
            }

        }
    }

Answer 1

您似乎正在关注https://vaadin.com/docs/v10/flow/advanced/tutorial-push-access.html 的推送教程。

通常这应该可以工作。

您是否忘记了视图中的@Push-Annotation？ （请参阅链接教程中的PushyView）。

Answer 2

正如在之前的回答和评论中已经指出的那样，您很可能在您的视图中缺少@Push 注释。我已经复制了您的代码，它按预期工作（H1 已更新）。您能否验证注释是否到位，如果是，您能否提供我们可以重现问题的整个示例？ 一个工作示例：

@Route
@PWA(name = "Project Base for Vaadin Flow with Spring", shortName = "Project Base")
@Push
public class MainView extends VerticalLayout {

    private FeederThread thread;


    public MainView(@Autowired MessageBean bean) {
        Button button = new Button("Click me",
                e -> Notification.show(bean.getMessage()));
        add(button);
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        add(new Span("Waiting for updates"));
        H1 h1=new H1("Text");
        add(h1);

        // Start the data feed thread
        thread = new FeederThread(attachEvent.getUI(), h1);
        thread.start();
    }

    @Override
    protected void onDetach(DetachEvent detachEvent) {
        // Cleanup
        thread.interrupt();
        thread = null;
    }
    private static class FeederThread extends Thread {
        private final UI ui;
        private  final H1 element;

        private int count = 0;

        public FeederThread(com.vaadin.flow.component.UI ui,H1 element) {
            this.ui = ui;
            this.element = element;
        }
        @Override
        public void run() {
            try {
                // Update the data for a while
                while (count < 10) {
                    // Sleep to emulate background work
                    Thread.sleep(500);
                    String message = "This is update " + count++;

                    ui.access(() -> element.setText(String.valueOf(message)));
                }

                // Inform that we are done
                ui.access(() -> {
                    ui.access(() -> element.setText("DOONE"));
                });
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
}