Listening to value change in custom HtmlMacroComponent

asked 2019-04-24 19:12:38 +0800

ngizk
53 ● 2

updated 2019-04-26 12:33:48 +0800

cor3000
6280 ● 2 ● 7

Hello. I have created custom component which extends HtmlMacroComponent. It contains four doubleboxes. For value there is simple dto class which contains four variables. Component works correctly and binds correctly on client-side change, however, server-side change to bind value is not reflected in component. I tried adding eventListener for "onChange" event in component but it doesn't fire up when sending notifyChange from vm. I noted however that other events, like onClick, work correctly.

Here is component zul file:

creditbagbox.zul

<zk>
    <panel border="none"  closable="false">
        <panelchildren>
            <grid hflex="1">
                <columns>
                    <column hflex="min" />
                    <column />
                </columns>
                <rows>
                    <row>
                        <label value="${labels.creditBag.cashable}:"/>
                        <doublebox id="cashableBox" constraint="no negative" format="0.00"/>
                    </row>
                    <row>
                        <label value="${labels.creditBag.playable}:"/>
                        <doublebox id="playableBox" constraint="no negative" format="0.00"/>
                    </row>
                    <row>
                        <label value="${labels.creditBag.promotional}:"/>
                        <doublebox id="promotionalBox" constraint="no negative" format="0.00"/>
                    </row>
                    <row>
                        <label value="${labels.creditBag.extra}:"/>
                        <doublebox id="extraBox" constraint="no negative" format="0.00"/>
                    </row>
                </rows>
            </grid>
        </panelchildren>
    </panel>
</zk>

Here is component class (stripped for clarity):

CreditBagBox.java

@ComponentAnnotation({ "value: @ZKBIND(ACCESS=both, SAVE_EVENT=onChange)" })
@Slf4j
public class CreditBagBox extends HtmlMacroComponent {
    private static final long serialVersionUID = 1L;

    @Getter @Setter
    private CreditBag value;

    @Wire("#cashableBox")
    private Doublebox cashableBox;
    @Wire("#playableBox")
    private Doublebox playableBox;
    @Wire("#promotionalBox")
    private Doublebox promotionalBox;
    @Wire("#extraBox")
    private Doublebox extraBox;

    public CreditBagBox() {
        setMacroURI("~./creditbagbox.zul");
    }

    @Override
    public void afterCompose() {
        super.afterCompose();
    }

    @Listen("onCreate=doublebox#cashableBox")
    public void onCashableCreate(CreateEvent event) {
        ((Doublebox) event.getTarget()).setValue(value.getCashableCredits() / 100.);
    }
[...]

    @Listen("onChange=doublebox#cashableBox")
    public void onCashableChange(InputEvent event) {
        if (event.getValue() == null) {
            value.setCashableCredits(0);
        } else {
            value.setCashableCredits((long) (Double.valueOf(event.getValue()) * 100.));
        }
    }
[...]
}

Here is lang-addon.xml file:

lang-addon.xml

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
    <addon-name>addon</addon-name>
    <language-name>xul/html</language-name>
    <depends>zul, zkbind</depends>
    <component>
        <component-name>creditbag</component-name>
        <component-class>terminal.vm.CreditBagBox</component-class>
    </component>
</language-addon>

Here is how I use this component in zul view:

<creditbag id="amountCreditbagbox" hflex="1" value="@bind(vm.selectedAmount)"/>

My question is: how can I listen for value change in CreditBagBox.java so I can update values in doubleboxes to match new value?

EDIT: Thanks for response, here is fiddle which shows the problem: http://zkfiddle.org/sample/3es4nv4/3-Listening-to-value-change-in-custom-HtmlMacroComponent (please remove space as I cannot post links due to insufficient karma)

As you can see, after clicking "Change values in vm", labels which are bound to amount property change, but my custom component not. My goal is to update doubleboxes inside my component when bound value changes in vm. Binding from component to vm works, which you can see after chaning values in component and clicking Refresh button.