0

Progressbox with modal effect (disabling all components)

asked 2011-11-16 11:51:15 +0800

Neus gravatar image Neus
1415 14

updated 2011-11-16 11:52:06 +0800

Hi,
I want that when the progressbox appears because an operation is taking too much time all the components of the page appears disabled (like when opening a modal window). Because if this doesn't happen when a process is running the user can click any button of the page time and time again and a lot of processes will be queued and executed one after another.
How can I do this?

Thanks for your help.

delete flag offensive retag edit

8 Replies

Sort by ยป oldest newest

answered 2011-11-16 16:57:33 +0800

twiegand gravatar image twiegand
1807 3

Neus,

Doesn't the Clients.showBusy() method do this already?  Consider the following example:

<zk>
	<window id="win">
		<attribute name="onLater">
			Thread.sleep(5000);
			Clients.showBusy(null, false);
			new Label("  Done.").setParent(win);
		</attribute>

		<button label="Start">
			<attribute name="onClick">
				Clients.showBusy("Processing... (wait about 5 sec.)", true);
				Events.echoEvent("onLater", win, null);
			</attribute>
		</button>
	</window>
</zk>

If you run the above by clicking the "Start" button, the "Processing..." message will appear for about 5 seconds.  While that is running, you cannot click the Start button again.


Alternatively, you could simply set up your buttons to be automatically disabled - something like this:

<button id="ok" label="OK" autodisable="self" />

For more information on this approach, click here.

Hope that helps,

Todd

link publish delete flag offensive edit

answered 2011-11-17 15:03:57 +0800

Neus gravatar image Neus
1415 14

Clients.showBusy() seems to do what I want. But is there anyway to make it generally for the entire application? Everytime the application runs a process (when the progressbox appears without having to call Clients.showBusy()) the page must appears disabled. If not, I must call Clients.showBusy every time something is done?And do the echoEvent??

Thank you

link publish delete flag offensive edit

answered 2011-11-23 15:54:46 +0800

Neus gravatar image Neus
1415 14

Doing echoEvent causes the process takes longer.

Isn't there any other solution?

Thank you

link publish delete flag offensive edit

answered 2011-11-23 20:37:07 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Can these two threads help you?

http://www.zkoss.org/forum/listComment/13501-Processing-box-customisation
http://www.zkoss.org/forum/listComment/10981/

best
Stephan

link publish delete flag offensive edit

answered 2011-11-24 08:19:47 +0800

Neus gravatar image Neus
1415 14

Thank you Stephan!

Following these posts I add javascript to zk.xml and put at the begining of the function mask=true. Now the progressbox appears as a modal window.

link publish delete flag offensive edit

answered 2011-11-24 09:37:12 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Hi Neus,

it's possible to share the code with us?

thanks
Stephan

link publish delete flag offensive edit

answered 2011-11-24 11:40:59 +0800

Neus gravatar image Neus
1415 14

Of course.

<device-config>
        <device-type>ajax</device-type>
         <!-- Custom javascript snippets -->
        <embed>
         <![CDATA[
            <script type="text/javascript">
                zUtl.progressbox = function(id, msg, mask, icon) {
                mask=true; //Ponemos este booleano a true para que el progressbox siempre aparezca como
                			//una ventana modal (con todos los componentes de abajo deshabilitados)
                    if (mask && zk.Page.contained.length) {
                        for (var c = zk.Page.contained.length, e = zk.Page.contained[--c];                   e; e = zk.Page.contained[--c]) {
                            if (!e._applyMask)
                                e._applyMask = new zk.eff.Mask({
                                    id: e.uuid + "-mask",
                                    message: msg,
                                    anchor: e.$n()
                                });
                        }
                        return;
                    }

                    if (mask)
                        zk.isBusy++;

                    var x = jq.innerX(), y = jq.innerY(),
                        style = ' style="left:'+x+'px;top:'+y+'px"',
                        idtxt = id + '-t',
                        idmsk = id + '-m',
                        html = '<div id="'+id+'"';
                    if (mask)
                        html += '><div id="' + idmsk + '" class="z-modal-mask"'+style+'></div';
                    html += '><div id="'+idtxt+'" class="z-loading"'+style
                        +'><div class="z-loading-indicator"><span class="z-loading-icon"></span> '
                        +msg+'</div></div>';
                    if (icon)
                        html += '<div class="' + icon + '"></div>';
                    jq(document.body).append(html + '</div>');
                    var $n = jq(id, zk),
                        n = $n[0],
                        $txt = jq(idtxt, zk);
                    if (mask)
                        n.z_mask = new zk.eff.FullMask({
                            mask: jq(idmsk, zk)[0],
                            zIndex: $txt.css('z-index') - 1
                        });

                    //center
                    var txt = $txt[0],
                        st = txt.style;
                    st.left = jq.px((jq.innerWidth() - txt.offsetWidth) / 2 + x);
                    st.top = jq.px((jq.innerHeight() - txt.offsetHeight) / 2 + y);

                    $n.zk.cleanVisibility();
                }                       
            </script>]]>
       </embed>
 </device-config>	

Don't know if it is the best way to do it. I used the javascript code in the second link you tell me but positioning the progressbox in the center of the screen. Studying the code I realized the boolean mask was controlling if the box should be modal or not. I checked that it was always undefined and because I want the progressbox always modal I initialize it to true (first line->mask=true).

link publish delete flag offensive edit

answered 2013-01-14 12:25:39 +0800

andreasboos gravatar image andreasboos
103 2

Hi.

I'm using this code above to perfection in version 5.0.12 EE zk. However when trying to use it in ZK 6.5.1 EE does not work. I tried several times. I put alerts in the middle of the javascript to see if it went through or not (and yes it passes). But not with the same effect. How do I have all my screens with modal as in version 5? Only depend on it to migrate. I would not want to craete new events (echoEvent) in more than 300 forms. Is there any way to make it work in version 6?

thank you

link publish delete flag offensive edit
Your reply
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: 2011-11-16 11:51:15 +0800

Seen: 686 times

Last updated: Jan 14 '13

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