-
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
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
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.
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.??