0

Is there a way to Block user events while Processing icon is spinning?

asked 2009-02-18 22:10:01 +0800

Gordon gravatar image Gordon
52 1

Is there a way to block the user from triggering new events while the processing icon is spinning? (ie. Rather than queueing up all events and running them one by one?)

Basically I'm trying to prevent impatient users from clicking everywhere while lists are populating, children frames are loading, etc.

Thanks,
Gordon

delete flag offensive retag edit

12 Replies

Sort by ยป oldest newest

answered 2009-02-19 01:09:23 +0800

hideokidd gravatar image hideokidd
750 1 2

Hi,

Blocking all events when something happens is not easy, I think a hignlighted window is an alternative to match your request, there is an example to show the idea

<window title="new page title" border="normal">
<label id="statusLabel" value="before loading"/>
<button label="load data">
<attribute name="onClick">
WarningWin.doHighlighted();
statusLabel.setValue("loading");
</attribute>
</button>
</window>
<window id="WarningWin" title="warning" border="normal" visible="false">
Please wait...
<button label="cancel" onClick="WarningWin.setVisible(false)"/>
</window>

When you click the button load data, a window will be highlighted to make sure users can't access all components before clicking the button cancel. You can revise your code with the idea.

link publish delete flag offensive edit

answered 2009-02-19 19:22:06 +0800

Gordon gravatar image Gordon
52 1

Hideokidd,

Thanks for the tip, I'll play around with that. Alternatively, do you know where I can edit the look and feel of that processing spinner animation? Preliminary user feedback from my app suggests that some people miss the spinner because it is in the top left of the page. I'd like to move it to the center of the screen (like the 'loading...' spinner that is fired up when the ZK Demo is loaded up) so that it is more prominent.

-Gordon

link publish delete flag offensive edit

answered 2009-02-19 22:18:37 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hello,

This configuration in zk.xml might solve both of your problems.
It will center the processing message, also act as a modal, making impossible the interaction with the background components.
Note that this might get your app a little slower

<!-- Optional -->
<device-config>
    <!-- Configure the progress message to show in the center -->
    <embed><![CDATA[
        <script type="text/javascript">
            AU_progressbar = function (id, msg) 
            {
                Boot_progressbox(id, msg, 0, 0, true, true);
            };
        </script>
    ]]></embed>
</device-config>

Regards,
Madruga

link publish delete flag offensive edit

answered 2009-02-20 19:26:35 +0800

Gordon gravatar image Gordon
52 1

Thank you so much! Works perfectly, as advertised.

link publish delete flag offensive edit

answered 2009-02-20 19:54:52 +0800

judacoor gravatar image judacoor
280 1 3 8

Magruga, I've just copied the code you posted on my zk.xml, here's part of it:

<?xml version="1.0" encoding="UTF-8"?>

<!-- zk.xml
	Purpose:
		
	Description:
		
	History:
		Created by ZK Studio
-->

<zk>
<!-- Turn on the following if you want to keep session after Web server restarts	
	<system-config>
		<ui-factory-class>org.zkoss.zk.ui.http.SerializableUiFactory</ui-factory-class>
	</system-config>
-->
	<!-- Turn on the following if used with WebLogic 9.1
	<system-config>
		<cache-provider-class>org.zkoss.zk.ui.sys.GlobalDesktopCacheProvider</cache-provider-class>
	</system-config>
	-->
	<!-- Turn on to test FailoverManager with an useless failover manager	
	<system-config>
		<failover-manager-class>org.zkoss.zkdemo.test.DumbFailoverManager</failover-manager-class>
	</system-config>

-->
	<!-- Optional -->
	<!-- You can define any number of richlets as follows.
		Note: To use richlet, you have to map zkLoader to /xx/* in web.xml,
		where xx could be any name. And, the final URL will be /xx/richlet-url.
	-->
	
	<device-config>
    	<!-- Configure the progress message to show in the center -->
    	<embed><![CDATA[
	        <script type="text/javascript">
    	        AU_progressbar = function (id, msg) 
            	{
                	Boot_progressbox(id, msg, 0, 0, true, true);
            	};
        	</script>
    	]]></embed>
	</device-config>
	

But the "processing" dialog is still showing at the top-left corner of the screen and no overlapping is being made....all the other components are fully accessible while the dialog is showing.

Can you help me with this please?

thanks in advance,
judacoor

link publish delete flag offensive edit

answered 2009-02-21 05:28:10 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

Hello judacoor,

Everything appears to be right, it might be a typo error.

Did you tried to remove all the info in zk.xml and let only the device-config tag to see if works?

Also, what is your zk version?

Regards,
Madruga

link publish delete flag offensive edit

answered 2009-02-22 21:45:59 +0800

judacoor gravatar image judacoor
280 1 3 8

Madruga,

I've just finished trying only with your snippet in my zk.xml but it didn't work anyways. It had only the device-config tag and still did not work...

BTW, I'm currently using ZK 3.5.2

Any ideas why this is happening?

Thanks,
judacoor

link publish delete flag offensive edit

answered 2009-02-23 00:47:27 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

That's very strange. It should be straight forward

Can you confirm that your zk.xml is loaded?

In your web server log should be something like "INFO: Parsing file:path_to_file/web-app/WEB-INF/zk.xml"

Madruga

link publish delete flag offensive edit

answered 2009-02-23 16:22:46 +0800

jyluo gravatar image jyluo
147 1 1

I think the zk.xml missed the a line "<device-type>ajax</device-type>" and it should be:

<!-- Optional -->
<device-config>
    <!-- Configure the progress message to show in the center -->
<device-type>ajax</device-type>
    <embed><![CDATA[
        <script type="text/javascript">
            AU_progressbar = function (id, msg) 
            {
                Boot_progressbox(id, msg, 0, 0, true, true);
            };
        </script>
    ]]></embed>
</device-config>

link publish delete flag offensive edit

answered 2009-02-27 21:06:59 +0800

judacoor gravatar image judacoor
280 1 3 8

juluo,

Done it, but it's still not working!

Can please confirm it works with a project of your own?

judacoor

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

RSS

Stats

Asked: 2009-02-18 22:10:01 +0800

Seen: 583 times

Last updated: Mar 04 '09

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