Wicket - Ajax PropertyListView

Question

我有一些数据进入我的 propertyListview，周围有一个容器，但是当我想用 Ajax 更新它时，它什么也没做！如何使用 Ajax 更新我的 PropertyListview？

编辑 在后台我使用 JSON Parse 解析来自气象站的数据，该数据可能会发生很大变化，所以我想更新 propertyListview 中的数据

public class WeerPanel extends Panel {

public WeerPanel(String id) throws IOException {
    super(id);

    final WeerService weerService = new WeerServiceImpl();

    PropertyListView<Weer> newview = new PropertyListView<Weer>("weer", weerService.getWeer()) {

        @Override
        protected void populateItem(ListItem<Weer> item) {
            item.add(new Label("temperatuur"));
            item.add(new StaticImage("type", String.format("images/%s.png", item.getModelObject().getType())));
            item.add(new Label("omschrijving"));
        }
    };

    final WeerVoorspellingService weerVoorspellingService = new WeerVoorspellingServiceImpl();

    PropertyListView<WeerVoorspelling> hateView = new PropertyListView<WeerVoorspelling>("weersvoorspelling", weerVoorspellingService.getWeerVoorspelling()) {

        @Override
        protected void populateItem(ListItem<WeerVoorspelling> item) {
            item.add(new Label("dag"));
            item.add(new StaticImage("typeVoorspelling", String.format("images/%s.png", item.getModelObject().getType())));
            item.add(new Label("minTemperatuur"));
            item.add(new Label("maxTemperatuur"));
        }
    };

    final WebMarkupContainer containerWeer = new WebMarkupContainer("containerWeer");
    containerWeer.setOutputMarkupId(true);
    containerWeer.add(hateView);
    containerWeer.add(newview);
    add(containerWeer);

    add(new AbstractAjaxTimerBehavior(Duration.seconds(10)) {

        @Override
        protected final void onTimer(AjaxRequestTarget target) {
            target.add(containerWeer);
        }
    });
}

}

这是我在后台做的一些代码，它是一个虚拟的，每次都会通过一个随机数改变天气的温度。

                Random r = new Random();
            int randomInt = r.nextInt(100);
            weer.add(new Weer("rain", "Mooi bewolkt", randomInt, v.getVoorspellingen()));

虚拟代码很好，但在我的页面上仍然没有任何变化......好像我的列表没有得到任何新数据......

已修复这里是供人们使用的代码

public class WeerPanel extends Panel {

    public WeerPanel(String id) {

        super(id);

        add(createContainer());

        add(new AbstractAjaxTimerBehavior(Duration.seconds(10)) {
            @Override
            protected final void onTimer(AjaxRequestTarget target) {
                target.add(createContainer());
            }
        });
    }

    private final WebMarkupContainer createContainer() {
        final WeerService weerService = new WeerServiceImpl();

        PropertyListView<Weer> newview = null;
        try {
            newview = new PropertyListView<Weer>("weer", weerService.getWeer()) {

                @Override
                protected void populateItem(ListItem<Weer> item) {
                    item.add(new Label("temperatuur"));
                    item.add(new StaticImage("type", String.format("images/%s.png", item.getModelObject().getType())));
                    item.add(new Label("omschrijving"));
                }
            };
        } catch (Exception e) {
            e.printStackTrace();
        }

        WeerVoorspellingService weerVoorspellingService = new WeerVoorspellingServiceImpl();

        PropertyListView<WeerVoorspelling> hateView = null;
        try {
            hateView = new PropertyListView<WeerVoorspelling>("weersvoorspelling", weerVoorspellingService.getWeerVoorspelling()) {

                @Override
                protected void populateItem(ListItem<WeerVoorspelling> item) {
                    item.add(new Label("dag"));
                    item.add(new StaticImage("typeVoorspelling", String.format("images/%s.png", item.getModelObject().getType())));
                    item.add(new Label("minTemperatuur"));
                    item.add(new Label("maxTemperatuur"));
                }
            };
        } catch (Exception e) {
            e.printStackTrace();
        }

        WebMarkupContainer containerWeer = new WebMarkupContainer("containerWeer");
        containerWeer.setOutputMarkupId(true);
        containerWeer.add(hateView);
        containerWeer.add(newview);
        addOrReplace(containerWeer);

        return containerWeer;
    }
}

Answer 1

在您的onTimer 中，您将对象添加到自身而不更改它。我建议将视图/容器重新生成移动到一种新方法中。

然后像这样重新定义onTimer：

add(new AbstractAjaxTimerBehavior(Duration.seconds(10)) 
{
    @Override
    protected final void onTimer(AjaxRequestTarget target) 
    {   //createContainer() generates the views and container.
        target.add(createContainer()); 
    }
}

编辑：
我会这样定义createContainer()：

private WebMarkupContainer createContainer()
{
  final WeerService weerService = new WeerServiceImpl();

  PropertyListView<Weer> newview = new PropertyListView<Weer>("weer", weerService.getWeer()) 
  {

    @Override
    protected void populateItem(ListItem<Weer> item) 
    {
        item.add(new Label("temperatuur"));
        item.add(new StaticImage("type", String.format("images/%s.png", item.getModelObject().getType())));
        item.add(new Label("omschrijving"));
    }
  };

  WeerVoorspellingService weerVoorspellingService = new WeerVoorspellingServiceImpl();

  PropertyListView<WeerVoorspelling> hateView = new PropertyListView<WeerVoorspelling>("weersvoorspelling", weerVoorspellingService.getWeerVoorspelling()) 
  {

    @Override
    protected void populateItem(ListItem<WeerVoorspelling> item) 
    {
        item.add(new Label("dag"));
        item.add(new StaticImage("typeVoorspelling", String.format("images/%s.png", item.getModelObject().getType())));
        item.add(new Label("minTemperatuur"));
        item.add(new Label("maxTemperatuur"));
    }
  };

  WebMarkupContainer containerWeer = new WebMarkupContainer("containerWeer");
  containerWeer.setOutputMarkupId(true);
  containerWeer.add(hateView);
  containerWeer.add(newview);
  add(containerWeer);

  return containerWeer;
}

已编辑以匹配最终解决方案

然后像这样定义你的 Panel 构造函数：

public WeerPanel(String id) throws IOException 
{
  super(id);

  final WebMarkupContainer container = createContainer();

  add(new AbstractAjaxTimerBehavior(Duration.seconds(10)) 
  {
    @Override
    protected final void onTimer(AjaxRequestTarget target) 
    {   //createContainer() generates the views and container.
        container.addOrReplace(createContainer());
    }
  }
}

Answer 2

你只会得到一次“WeerVoorspelling”：

PropertyListView<WeerVoorspelling> hateView
  = new PropertyListView<WeerVoorspelling>("weersvoorspelling",
         weerVoorspellingService.getWeerVoorspelling()) { .. }

因此，无论天气预报如何变化，您的 listView 仍会查看原始列表。 你应该引入一个间接：

IModel<List<WeerVoorspelling>> weerVoorspelling = new AbstractReadOnlyModel<List<WeerVoorspelling>> {
  public List<WeerVoorspelling> getObject() {
    return weerVoorspellingService.getWeerVoorspelling();
  }
}

PropertyListView<WeerVoorspelling> hateView
  = new PropertyListView<WeerVoorspelling>("weersvoorspelling",
         weerVoorspelling) { .. }

Answer 3

请查看 wicket ajax 控制台中的输出，它可能说明无法直接更新列表视图。另外，您可以在更新 Listview 的位置添加代码吗？

Answer 4

根据文档 AjaxSelfUpdatingTimerBehavior 有一个方法 onTimer()。您需要实现此方法并将希望更新的视图添加到 AjaxRequestTarget。这将刷新您要更新的组件。 ajax 事件目前什么都不做，这就是为什么你什么都看不到的原因。

基本上，从高层次的角度来看，您想要更新控制 listView 的后备模型对象，然后当 ajax 计时器触发时，您想要刷新该列表以显示最新数据。

代码如下所示：

containerWeer.add(new AjaxSelfUpdatingTimerBehavior(Duration.seconds(5)){
  @Override
  protected final void onTimer(AjaxRequestTarget target) {
    target.addComponent(/The component you wish to refresh/);
  }
});