Using MVVM to dynamically create listbox

answered 2015-08-18 01:17:13 +0800

MDuchemin
2560 ● 1 ● 6

updated 2015-08-18 01:22:36 +0800

Hi Joluamsa,

If you are going to use more than one column, I would recommend that you take a look at the grid component, as it might be more suitable for your needs, and is easier to handle.

In MVVM, you have 2 different notions: Model (server side) : ListModelList (for example, can be other types like TreeModel depending on your needs) Component (client side) : grid, listbox, etc.

What you need to do is to bind the values of the Model to the component (using @bind, @load, ...) and update your model. If the model updates, and is properly bind, your row will be added to the component (display) edit : you also need to use the @NotifyChange annotation send updates to the view from your viewmodel.

As for the rendering(columns, and what to put inside), you can either create a template (in the zul file) or a custom renderer (on the viewmodel side) If you are starting and just want to show values in a list/grid, I would recommend the template option.

You will find details about these here : http://books.zkoss.org/zk-mvvm-book/8.0/introductionofmvvm.html I recommend that you take a look at the whole book if you are not familiar with MVVM.

answered 2015-08-24 15:11:23 +0800

cyiannoulis
1201 ● 10

You have to familiarize yourself with the MVVM but since you have already an MVC background, the MVVM will be a piece of cake. Anyway, here is a small example on how to create a grid with dynamic number of columns using MVVM.

I suppose that first you will need a simple configuration bean representing the configuration parameters for each column:

public class ColumnConf {

    private String label;
    private String width;

    public String getLabel() {
        return label;
    }
    public void setLabel(String label) {
        this.label = label;
    }
    public String getWidth() {
        return width;
    }
    public void setWidth(String width) {
        this.width = width;
    }

    public ColumnConf(String label, String width) {
        super();
        this.label = label;
        this.width = width;
    }
}

Now lets go into the ViewModel of your page and add some code inside the @init method: (that is the one that will be executed when page is loaded)

public class DynamicGridColumnsVM {

    private List<ColumnConf> columns;

    @Init
    public void init() {        
        columns = new ArrayList<ColumnConf>();

        ColumnConf c = new ColumnConf("Status", "45px");
        columns.add(c);
        c = new ColumnConf("Ref", "80px");
        columns.add(c);
        c = new ColumnConf("Question", null);
        columns.add(c);

        return columns;
    }

    public List<ColumnConf> getColumns() {
        return columns;
    }

}

As you see we create a simple collection of column configuration beans. In your case the @init method should fetch these configuration objects from the database.

And now the final step which is our page:

<window border="none" height="100%" width="100%"
        viewModel="@id('vm') @init('test.DynamicGridColumnsVM')">

<grid vflex="true">

   <columns children="@load(vm.columns)">
      <template name="children" var="col">
          <column label="@load(col.label)" width="@load(col.width)" />
      </template>
   </columns>

</grid> 

</window>

That's all! Now you have a grid (the same can be done with a listbox) which renders columns dynamically from a list of column configurations. Of course i have omitted the rows template but this is something that you can find easily in ZK demo samples.

Hope that helps.

/Costas