Revision history [back]

click to hide/show revision 1
initial version

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

ngizk gravatar image ngizk

Listening to value change in custom HtmlMacroComponent

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?

click to hide/show revision 2
Added zkfiddle which shows problem

Listening to value change in custom HtmlMacroComponent

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://zk fiddle.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.

Listening to value change in custom HtmlMacroComponent

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://zk fiddle.org/sample/3es4nv4/3-Listening-to-value-change-in-custom-HtmlMacroComponent 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.

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