0

Using MVVM to dynamically create listbox

asked 2015-08-18 00:47:50 +0800

Joluamsa gravatar image Joluamsa
3 1

updated 2015-08-18 00:48:20 +0800

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

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

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

MDuchemin gravatar image MDuchemin
1336 1 4
ZK Team

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.

link publish delete flag offensive edit
0

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

cyiannoulis gravatar image cyiannoulis
1191 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

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2015-08-18 00:47:50 +0800

Seen: 60 times

Last updated: Aug 24 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More