-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi guys, I'm moving this to a discussion panel, I'm a stranger to MVVM and as it was pointed out to me is the way to create dynamically a listbox in ZK, I'm not only needing to add rows as I can with MVC, I'm also needing to create the columns in the listbox from my database, anyone knows how to do this and have the kindness give me a hand setting up? What do I need to add to my project so I can use this and where, and more importantly how am I coding this?
Hope you can help me, Gladly appreciate it
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.
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
Asked: 2015-08-18 00:47:50 +0800
Seen: 72 times
Last updated: Aug 24 '15
ZK MVVM Listbox Mold Paging - select first record on each page [closed]
listfoot and paging disappears when loading data
bandbox click image custom action
ListCell textbox password getValue
textbox setValue unary operators
Listbox with multiple/checkmark=true not working
problem listbox index can't reload properly after addnew and remove data.??