Wicket - Ajax PropertyListView

Question

I got some data going into my propertyListview, got a container around it but when i want to update it with Ajax it aint doing nothing ! How do i update my PropertyListview with Ajax?

EDIT in the background im using JSON Parse to parse data from a weatherstation, that data can change alot, so i want to update the data in the 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);
        }
    });
}

}

This is some code i do in the background, its a dummy that changes the temp of the weather by a random number each time.

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

The dummy code is fine, but STILL there is nothing of a change to see at my page.... as if my the list isnt getting any new data..

FIXED here is the code for people that will find this handy

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

in Your onTimer you're adding the object to itself with out changing it. I would suggest moving the view/container regeneration into a new method.

Then redifine onTimer like so:

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

EDIT:
I would define createContainer() like so:

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;
}

Edited to match final solution

Then define your Panel constructor like so:

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

You're getting the "WeerVoorspelling" once only:

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

So regardless how the weather forecasts change, your listView still looks at the original list. You should introduce an indirection:

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

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