推送后如何更新Vaadin Grid？

Question

在从不同的 UI 实例对网格进行更改后，我正在尝试更新 Vaadin 中的网格。

为了详细说明，我有两个不同的 UI 实例，UI1 和 UI2（来自两个不同浏览器的选项卡）。这些 UI 个实例包含一个视图，该视图包含一个网格，该网格由具有各种属性（例如姓名、年龄、性别）的联系人对象组成...

我从 UI1 向网格添加了一个联系人，我希望 UI2 无需刷新即可立即看到更新后的网格。

为此，我知道我必须使用 Vaadin Push，我已经使用 Broadcaster class 设置了它。我的 UI class 中有一个 receiveBroadcast() 方法，它会在视图 class 使用 UI 发送广播到 UI 时更新 UI =16=]方法。我的 UI class 的一部分看起来像这样：

@Title("Contact Book")
@Theme("reindeer")
@Push
public class UserInterface extends UI implements BroadcastListener{    

    private Navigator navigator;

    @Override
    protected void init(VaadinRequest request){
        navigator = new Navigator(this, this);
        navigator.addView(ContactBookView.NAME, new ContactBookView());

        Broadcaster.register(this);
    }
    @Override
    public void detach(){
        Broadcaster.unregister(this);
        super.detach();
    }

    @Override
    public void receiveBroadcast(Grid grid) {
        access(()->{

            // update grid here
            Notification.show("Grid updated", Notification.Type.TRAY_NOTIFICATION);
        });
    }
}

我的 Broadcaster class 与 this link 中的相同（我只是稍微更改了方法以便可以将网格作为参数传递）

然后在我的 ContactBookView class 中，我在添加或更改项目后调用 Broadcaster.broadcast(grid) 方法，这样我就可以在我的 UI class 中以某种方式更新网格' access() 方法，但我尝试过的方法似乎都不起作用。我知道推送正在工作，因为当接收到广播时，我可以在所有 UI 个实例中看到 "Grid updated" 消息。

我尝试删除视图并重新初始化

navigator.removeView(ContactBookView.NAME);
navigator.addView(ContactBookView.NAME, new ContactBookView());

尝试完全清空网格并重新填充

grid.removeAllColumns();
grid.setContainerDataSource(container);

尝试使用这种丑陋的变通方法强制网格进行自我更新

grid.setContainerDataSource(grid.getContainerDataSource());

试图执行 JavaScript 查询以强制 UI 同步

JavaScript.getCurrent().execute("javascript:vaadin.forceSync();");

但是其中 none 行得通。也许我做错了什么？仅供参考，我的 Vaadin 版本是 7.5.0。

如有任何反馈或建议，我将不胜感激，

谢谢。

Answer 1

如果您正在使用 navigator.navigateTo(PortletUI.SOMEPAGE);

In somePageInstance should be called first enter() method , while you will come there via navigator, so you cant to try update grid there :o)

PortletUI:

public static final String SOMEPAGE = null;
Navigator navigator;

SomePage somePageInstance = null;

 protected void init(VaadinRequest request) {
        InitPortlet.initPortlet(this);

        // Create a navigator to control the views
        navigator = new Navigator(this, this);

       somePageInstance = new SomePage();

        navigator.addView(SOMEPAGE, somePageInstance);

某个页面：

public class SomePage extends SomePageDesign implements View{

//or you can give there navigator from portlet through constructor probably
Navigator navigator; 

@Override
    public void enter(ViewChangeEvent event) {
         //needed for navigate to another page :)
        navigator = event.getNavigator();
        //Update grid
    }
}

希望对你有帮助:)

Answer 2

我在重新初始化后通过重新导航到当前视图设法解决了这个问题。最终 UI 访问方法如下所示：

public void receiveBroadcast() {
    access(()->{

        navigator.removeView(ContactBookView.NAME);
        navigator.addView(ContactBookView.NAME, new ContactBookView());
        navigator.navigateTo(ContactBookView.NAME);
        Notification.show("Grid updated", Notification.Type.TRAY_NOTIFICATION);
    });

有了这个，视图在后台刷新并推送到 UI 个实例，而无需物理刷新。

我相信可能有更好的解决方法，这个看起来有点丑陋，但目前可以满足我的需求。但是，我仍然很欣赏任何不同的方法。

推送后如何更新Vaadin Grid？

How to update Vaadin Grid after push?

java

vaadin

vaadin7

vaadin-push