0

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

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

djr gravatar image 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);
    }
}
delete flag offensive retag edit

Comments

bbolek's answer works for the connect, but not for the disconnect from a message box. Any suggestions on how to handle this case. Including a better way to invoke the message box. Thanks, Derek

djr ( 2016-03-22 19:32:29 +0800 )edit

I can't seem to answer my own question. I wrote a extensive solution, but nothing showed up after I hit Answer Your Own Question. For MessageBox I call Events.postEvent("onDisconnect",disButton,null); from YES, then added <Button id="disButton" ... onDisconnect="@command('disconnect')">

djr ( 2016-03-22 20:37:26 +0800 )edit

2 Answers

Sort by ยป oldest newest most voted
1

answered 2016-03-22 19:08:28 +0800

bbolek gravatar image bbolek
98 1 5

Hello;

Try this :

<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="@command('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" onClick="@command('disconnect')">
                </button>
            </vlayout>
        </groupbox>
    </window>
</zk>
link publish delete flag offensive edit
0

answered 2016-03-23 03:32:39 +0800

hawk gravatar image hawk
2255 1 5
http://hawkphoenix.blogsp... ZK Team

Invoke a command method manually doesn't notify the change. Only a command method invoked by the binder will notify the property change. so vm.disconnect() doesn't trigger an update for vm.connected. You should use BindUtils.postNotifyChange(null, null, this, "connected");

ref: http://books.zkoss.org/zk-mvvm-book/8.0/viewmodel/notification.html

link publish delete flag offensive 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: 2016-03-22 17:30:12 +0800

Seen: 29 times

Last updated: Mar 23 '16

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