MVVM Form Binding

answered 2013-04-11 01:34:27 +0800

Matze2
773 ● 7

Hope I understood correct the question. If you create the form yourself in the view model then you have programmatic access to dirty state easily. This is described at the end of your book reference, section "Initialize with Form Object".

answered 2013-04-11 12:52:33 +0800

benbai
2228 ● 6
http://www.zkoss.org

You can use zk.beforeUnload to send an ajax request by jq.ajax as an au request to trigger command in mvvm.

Regarding how to send au request by jq.ajax function, please refer to _rmDesktop in au.js

au.js#_rmDesktop

Regarding what data should be put in request data, you can follow the article provided by rickcr above to send a normal au request and see form data in browser console:

How to call java method using javascript in ZK MVVM?

the form data should similar to the screen shot below:

for more information, please refer to the full sample below:

test.zul

<zk>
    <script><![CDATA[
        zk.afterMount(function () {
            // do something before unload
            zk.beforeUnload(function() {
                // is dirty
                if (zk.Widget.$('$cbx')._checked) {
                    var wgt = zk.Widget.$('$div');
                    /* if you do not sure what should be put in the data,
                        uncomment this line below and comment jq.ajax(...) section then
                        you can see the data in browser console
                    zAu.send(new zk.Event(zk.Widget.$('$div'), "onUnloadWithDirty", {}, {toServer:true}));
                    */
                    // send event to component immediately
                    jq.ajax(zk.$default({
                        url: zk.ajaxURI(null, {desktop:wgt.desktop,au:true}),
                        data: {dtid: wgt.desktop.id, cmd_0: 'onUnloadWithDirty', uuid_0: wgt.uuid, data_0: {}},
                        async: !!zk.ie
                    }, zAu.ajaxSettings), null, true);
                }
                return 'Data auto saved, Leave page ?';
            })
        });
    ]]></script>
    <div id="div" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('test.TestVM')"
        onUnloadWithDirty="@command('autoSave')">
    <groupbox form="@id('fx') @load(vm.data) @save(vm.data, before='saveOrder')" >
        <textbox value="@bind(fx.name)" />
        <textbox value="@bind(fx.value)" />
        <checkbox id="cbx" label="dirty?" checked="@bind(fxStatus.dirty)" />    
    </groupbox>
    </div>
</zk>

TestVM.java

package test;

import org.zkoss.bind.annotation.Command;

public class TestVM {
    public Data getData () {
        return new Data("name of date", "value of data");
    }
    public static class Data {
        private String _name;
        private String _value;
        public Data (String name, String value) {
            _name = name;
            _value = value;
        }
        public String getName () {
            return _name;
        }
        public String getValue () {
            return _value;
        }
    }
    @Command
    public void saveOrder () {

    }
    @Command
    public void autoSave () {
        System.out.println(" do auto save");
    }
}