0

MVVM binding for dynamically created Components.

asked 2017-10-27 16:15:25 +0800

kityakuntsev gravatar image kityakuntsev
33 2

Hi. I have a collection of values of different types, I'm constructing popup dynamically depending on this types. So I've wired parent component, and them I just create components like Textbox, Intbox etc and append them as children in Java.

Is it possible to configure data-bindind with elements of my value collection for brand new components from Java code?

delete flag offensive retag edit

6 Answers

Sort by ยป oldest newest most voted
1

answered 2017-11-01 13:52:18 +0800

MDuchemin gravatar image MDuchemin
1336 1 4
ZK Team

Hi kityakuntsev,

Sounds like something you can solve in MVVM with templating. Simplest case for me is: iterate over template in a forEach loop. If your model contain both a type indicator and a value, I would pass both of those to a popup template, in which I would apply the appropriate sub-template for each popup "line" matching the requested type.

This is made very very easy by shadow elements (apply, forEach, - also choose/when if you have a really complex case with multiple attribute resolving to the same template). I think you could also do that with children binding (not as efficient as shadow, but hey)

I made a fiddle to illustrate the idea, have a look :) http://zkfiddle.org/sample/3u13r51/5-popup-mvvm-templating

a note on that example: I made absolutely no optimization on the popups there, since I just wanted to show how to build them. In that example, all the popups are build from the get-go and loaded with the page, because I didn't wanted to make it too complicated. In the real world, I'd try to only build when relevant and load the popup matching the current displayed content.

happy coding :)

link publish delete flag offensive edit
0

answered 2017-10-30 16:42:35 +0800

kityakuntsev gravatar image kityakuntsev
33 2

Found a solution:

  Intbox val = new Intbox();

  if (value.getIntValue() != null) {
    val.setValue(value.getIntValue());
  }      

  val.addEventListener(Events.ON_CHANGE, new EventListener<Event>() {
    @Override
    public void onEvent(Event event) throws Exception {
      value.setIntValue(Integer.valueOf(((InputEvent) event).getValue()));
    }
  });
link publish delete flag offensive edit
0

answered 2017-10-30 18:55:40 +0800

MDuchemin gravatar image MDuchemin
1336 1 4
ZK Team

Hey kityakuntsev,

Registering event listeners might not be the best option, since it's breaking the MVVM pattern separation between view and view model. Instead, you can register load / save binding and commands on your components in java.

Have a look here for the detailed article: https://www.zkoss.org/wiki/SmallTalks/2012/August/MVVMIn_Java

Generally speaking, you shouldn't create components in MVVM with some very specific exceptions. I don't know your use case in detail, but I would suggest looking at shadow elements if you want to swap between templates on the fly. http://books.zkoss.org/zk-mvvm-book/8.0/shadowelements/shadowelements.html It sounds to me like you could construct popups directly in zul. Can you send a small summary of your requirement and a code example?

Happy coding ;)

link publish delete flag offensive edit
0

answered 2017-10-30 19:28:22 +0800

kityakuntsev gravatar image kityakuntsev
33 2

Hi MDuchemin, thanks for your answer.

My case is generating popup based on EAV data model. So I have different attribute types (like string, text, integer, decimal, dictionary), I have different attributes (or fields/inputs), and this is called EAV Metamodel and is stored in DB. Based on this metamodel I have to show popup with specified attributes, and inputs should depend on attribute's type. Each attribute has a constraint (like length limit, mandatory etc). When all attributes on popup filled, all values should be stored in DB (and this is EAV Object model)

There should be about 150 attributes in DB. I've tried using template-based views but I don't know the actual amount of attributes. So I need smth like model of components.

link publish delete flag offensive edit
0

answered 2017-11-01 13:55:30 +0800

MDuchemin gravatar image MDuchemin
1336 1 4
ZK Team

also, I used a name as both display and primary key... but whatever, simple example :D

link publish delete flag offensive edit
0

answered 2017-11-01 14:35:38 +0800

kityakuntsev gravatar image kityakuntsev
33 2

Wow this is gold! I've tried to use conditional templating and it was messy (because I'm not quite experienced with ZK), but your example is crazy and it works great.

link publish delete flag offensive edit

Comments

Thanks for the good words :D

MDuchemin ( 2017-11-02 00:32:47 +0800 )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
2 followers

RSS

Stats

Asked: 2017-10-27 16:15:25 +0800

Seen: 33 times

Last updated: Nov 01 '17

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