ZK: Mask page manually

Introduction

Sometimes we may need to load something for a while and the page may seems ugly before it loaded (e.g., we are loading something for fancy style). We can mask the page to hide the ugly page if needed.

The Page

mask_page_manually.zul

<zk>
    <script type="text/javascript"><![CDATA[
        // mask a while
        zAu.cmd0.showBusy('Loading...');
        // fake loading some data
        setTimeout(function () {
            some = {};
            some.loaded = {};
            some.loaded.data = 'data';
        }, 2000);
        // clear mask after data loaded
        var timer = setInterval(function () {
            // log, can be removed
            zk.log(' checking... ');
            if (some && some.loaded && some.loaded.data) {
                zAu.cmd0.clearBusy(null);
                clearInterval(timer);
            }
        }, 500);
    ]]></script>
    <window border="normal" title="test win">
        test
    </window>
</zk>

The Result
View the demo flash on line
http://screencast.com/t/jNxbQoyffH0

You can find the flash file at github:
https://github.com/benbai123/ZK_Practice/blob/c0fe761cdcb5487d113b01c153676bf5cbf74bac/Components/demos/mask_page_manually.swf?raw=true

Download
The file is at github
https://github.com/benbai123/ZK_Practice/blob/c0fe761cdcb5487d113b01c153676bf5cbf74bac/Components/projects/Components_Practice/WebContent/mask_page_manually.zul