Can't cause update of component visiblity in Window based on changed boolean property

asked 2016-03-22 17:30:12 +0800

djr
1

For this example, I have a window that displays connection status. Either connected or disconnected. When I press the connect button I want the visibility of one groupbox of components to hide and another to appear. The actual implementation is more complex, but here is a trimmed down example.

I'm hoping / guessing I'm missing something simple in configuring my bindings or @NotifyChange() calls.

When the window is displayed it shows a Disconnected message and a connect button. Pressing the connect button calls through to the connect() command and the connected properties value gets updated from false to true. (I can see this through the debugger) However the view does not update to hide the upper groupbox and display the lower groupbox. The label that is @bind(vm.connected) does not update either.

If I change the initial value of connected from false to true, then the first groupbox is hidden and the second group box is displayed on initial viewing, however it will not swap back.

What am I missing? Help much appreciated.

Thanks,

Derek

Zul file:

    <?xml version="1.0" encoding="UTF-8"?><?page title="Connection" contentType="text/html;charset=UTF-8"?>
<zk>
    <window border="none"
        viewModel="@id('vm') @init('test.TestVM')">
        <groupbox width="400px" height="400px" visible="@load(not vm.connected)">
            <vlayout style="text-align: center;">
                <label value="Disconnected" style="font-weight:bold;font-size:large;" />
                <label value="@bind(vm.connected)"/>
                <button label="Connect" onClick="vm.connect()"/>
            </vlayout>
        </groupbox>
        <groupbox width="400px" height="400px" visible="@load(vm.connected)">
            <vlayout style="text-align:center;">
                <label value="Connected" style="font-weight:bold;font-size:large;" />
                <label value="@bind(vm.connected)"/>
                <button label="Disconnect">
                    <attribute name="onClick"><![CDATA[
                Messagebox.show("Are you sure you want to disconnect?",
                        "Confirm Disconnect",
                        Messagebox.YES | Messagebox.NO, 
                        Messagebox.QUESTION,
                        new org.zkoss.zk.ui.event.EventListener() {
                            public void onEvent(Event evt) throws InterruptedException {
                                if(Messagebox.ON_YES.equals(evt.getName())) {
                                    vm.disconnect();
                                }
                            }
                        });]]>
                    </attribute>
                </button>
            </vlayout>
        </groupbox>
    </window>
</zk>

View Model:

package test;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;

public class TestVM {
    boolean connected = false;

    public boolean isConnected() {
        return connected;
    }

    public void setConnected(boolean connect) {
        this.connected = connect;
    }

    @NotifyChange("connected")
    @Command
    public void connect() {
        setConnected(true);
    }

    @NotifyChange("connected")
    @Command
    public void disconnect() {
        setConnected(false);
    }
}