Cannot wire components within applied template

answered 2023-11-20 16:25:12 +0800

MDuchemin
2480 ● 1 ● 6

Hey there,

If you are using wiring with shadow elements, one big thing that might be going wrong is timing.

See sample below which separates each phase as an example: https://zkfiddle.org/sample/4bphu4/2-view-model-selection

In order for Selectors.wireComponents to work, the component has to already exist in the component tree.

However, shadow elements recreate their content during the binding phase, which occurs AFTER the command / after compose phase.

As a result, when you call the Selectors.wireComponents during afterCompose, the shadow component itself exist (it's part of the composition phase), but it has not created its content yet (which it does during binding phase)

In addition, if you have already bound components and you trigger a notification which causes the shadow component parent to redraw, this will also nullifiy the wiring, because component retrieved from the first binding is no longer part of the page.

Instead, a new component is created by the shadow component, and you would need to rewire THAT one.

Here's a sequence you can try with the sample above:

1. load page, click on "show component" <- this returns nothing, because afterCompose was execute before the textbox was initialized during binding phase.
2. click on "rewire", click on "show component" <- this returns the current textbox, because wiring has happened AFTER the textbox was created.
3. click on "update", click on "show component" <- this returns the OLD textbox (which is now nulled), instead of returning the new textbox created by the update to the apply's bound value
4. click on "rewire", click on "show component" <- this return the new textbox (same idea as 2nd step)

With all of that said, what is your higher level requirement? (why do you need to wire a component in a VM?)

In the MVVM pattern, there might be different approach to do the type of operation which you are trying to achieve, which doesn't require direct component access. For example, using the shadow component apply, you can trigger the template to recreate itself with different parameters, if your goal is to perform updates.

And if your requirement absolutely require direct component access, there are ways to insert a smaller MVC patterned template inside of a larger MVVM page, but the specifics would depend on what you are trying to achieve.

answered 2023-11-15 09:06:37 +0800

hawk
3205 ● 1 ● 5
http://hawkphoenix.blogsp...

updated 2023-11-15 09:07:01 +0800

@Wire wires with ID selector by default, see https://www.zkoss.org/wiki/ZKDeveloper%27sReference/MVC/Controller/WireComponents#WirewithIDselectorbyDefault

So you should write like this:

@Wire
Component myId;

or

@Wire("#myId")
Component myComponent;

answered 2023-11-20 16:28:13 +0800

MDuchemin
2480 ● 1 ● 6

FYI relevant to previous answer, the phase order in ZK is:

Composition: build the component tree <-- afterCompose happens here

[lots of things happen between these steps]

COMMAND: do a command
VALIDATE: do validate before a command or zk event
SAVE_BEFORE: do save bindings before executing a command
LOAD_BEFORE: do load bindings before executing a command
EXECUTE: execute a command <--- update happens here in my previous sample
SAVE_AFTER: do save bindings after executing a command
LOAD_AFTER: do load bindings after executing a command
SAVE_BINDING: do a save binding
LOAD_BINDING: do a load binding <--- shadow components recreate their content on Load binding, so the new Textbox is created here