Show busy for listboxes with many items

asked 2010-06-14 05:04:36 +0800

tomCat
276 ● 3

Hi,

is there any way to show a "busy" dialog (e.g. like Clients.showBusy) for listboxes with many items? I have some listboxes with many
items and the browser takes some time until the ui is finally rendered. I tried using Clients.showBusy but it did not worked. I think it is because the response is send immediately and the browser needs time to render the content of the listboxes.

Thanks in advance and best regards

tom

delete flag offensive retag edit

10 Replies

Sort by » oldest newest

answered 2010-06-16 04:03:29 +0800

tomCat
276 ● 3

No ideas?
What i want to do in general, is to display a dialog while the browser is rendering the content. I have some zul pages which take about 2-3 seconds to load. No database access, only render time to display some more complex zul pages. Hope anybody can help.

Best regards,

tom

link publish delete flag offensive edit

answered 2010-06-16 09:54:53 +0800

YamilBracho
1722 ● 2

It's better idea to use pagination if you have many items in your list. Check http://docs.zkoss.org/wiki/Handling_huge_data_using_ZK

link publish delete flag offensive edit

answered 2010-06-17 01:54:02 +0800

tomCat
276 ● 3

Thanks yamli,

i am already using pagination. The problem is, i have to display about 60 items with ~ 20 columns for each page. Firefox takes about 2-3 seconds to render. So i want to display some kind of information, that rendering is still in progress.

Best regards,

tom

link publish delete flag offensive edit

answered 2010-06-17 05:40:09 +0800

Arsen
384 ● 5

You can try achive your goals with JQuery Document ready event for example showing "busy" dialog at the begining and hiding it in document.ready() event hadler.

link publish delete flag offensive edit

answered 2010-06-18 03:11:36 +0800

tomCat
276 ● 3

updated 2010-06-18 03:12:19 +0800

Hi Arsen,

thanks for the tip. But sadly it also doesn't work. I think it is because when the page is ready it receives further updates through javascript/ajax...

Here is my sample code:

zul:

<zk>
<script type="text/javascript">
    jQuery(document).ready(function(){
	   alert("test...");
	});
</script>
<window id="main" title="new page title" border="normal" apply="ManyItemsController">
	<grid model="@{persons}">
		<columns>
			<column value="name" />
			<column value="surname" />
		</columns>
		<rows>
			<row self="@{each=person}">
				<label value="@{person.name}" />
				<label value="@{person.surname}" />
			</row>
		</rows>
	</grid>
</window>
</zk>

controller:

public class ManyItemsController extends GenericForwardComposer {

	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		
		
		
		List<Map<String,String>> persons = new ArrayList<Map<String,String>>();
		
		for(int i = 0; i < 1000; i++) {
			Map<String,String> person = new HashMap<String, String>();
			person.put("name", "name" + i);
			person.put("surname", "surname" + i);
			persons.add(person);
		}
		
		DataBinder binder = new AnnotateDataBinder(comp);
		binder.bindBean("persons", persons);
		binder.loadAll();
	}
}

The message box is displayed before all items of the grid are rendered. Perhaps there is any kind of ZK Event to listen to, when the page loading is completed?
Any more ideas?

Best regards,

tom

link publish delete flag offensive edit

answered 2010-06-22 02:27:43 +0800

tomCat
276 ● 3

updated 2010-06-22 02:29:18 +0800

Hey guys,

i am still facing this problem. Here is the design i am working with:

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<zscript>
	<![CDATA[
	         List result = new ArrayList();
	         for(int i = 0; i < 3; i++) {
	        	 List parent = new ArrayList();
	        	 
	        	 for(int j = 0; j < 20; j++) {
	        		 Map child = new HashMap();
	        		 for(int k = 0; k < 19; k ++) {
	        			 child.put("test" + k, "test" + k);
	        		 }
	        		 
	        		 parent.add(child);
	        	 }
	        	 
	        	 result.add(parent);
	         }
	]]>
</zscript>
<window 
	vflex="true">
	<borderlayout vflex="true">
		<north height="28px">
			<borderlayout>
				<north border="none">
					<menubar>
						<menuitem label="Btn1" />
						<menuitem label="Btn2" />
						<menuitem label="Btn3" />
						<menuitem label="Btn4" />
						<menuitem label="Btn5" />
					</menubar>
				</north>
			</borderlayout>
		</north>
		<center>
			<div vflex="true">
				<paging id="wagenPaging"/>
				<div vflex="true" style="overflow:auto;"> 
					<grid model="@{result}" width="1800px">
						<rows>
							<row self="@{each=parent}">
								<listbox model="@{parent}">
									<listhead>
										<listheader label="0" />
										<listheader label="1" />
										<listheader label="2" />
										<listheader label="3" />
										<listheader label="4" />
										<listheader label="5" />
										<listheader label="6" />
										<listheader label="7" />
										<listheader label="8" />
										<listheader label="9" />
										<listheader label="10" />
										<listheader label="11" />
										<listheader label="12" />
										<listheader label="13" />
										<listheader label="14" />
										<listheader label="15" />
										<listheader label="16" />
										<listheader label="17" />
										<listheader label="18" />
									</listhead>
									<listitem self="@{each=child}">
										<listcell label="@{child.test0}" />
										<listcell label="@{child.test1}" />
										<listcell label="@{child.test2}" />
										<listcell label="@{child.test3}" />
										<listcell label="@{child.test4}" />
										<listcell label="@{child.test5}" />
										<listcell label="@{child.test6}" />
										<listcell label="@{child.test7}" />
										<listcell label="@{child.test8}" />
										<listcell label="@{child.test9}" />
										<listcell label="@{child.test10}" />
										<listcell label="@{child.test11}" />
										<listcell label="@{child.test12}" />
										<listcell label="@{child.test13}" />
										<listcell label="@{child.test14}" />
										<listcell label="@{child.test15}" />
										<listcell label="@{child.test16}" />
										<listcell label="@{child.test17}" />
										<listcell label="@{child.test18}" />
									</listitem>
								</listbox>
							</row>
						</rows>
					</grid>
				</div>
			</div>
		</center>
	</borderlayout>
</window>
</zk>

The page takes about 3 seconds to load with firefox. I am still searching for a solution to display some kind of "processing" dialog, while the page is loaded. Perhaps something about my design is wrong? I tried to use zk.startProcessing and Clients.showBusy. Especially when i use paging it is very confusing for the user, when the browser does not react for about 2-3 seconds without any processing dialog.
Are there any other solutions?

Hope somebody can help.

Best regards,

tom

link publish delete flag offensive edit

answered 2010-06-24 09:05:55 +0800

tomCat
276 ● 3

Hi all,

i reduced the render time of my zul page by one second, by using div component instead of the borderlayout component to define my layout. But i am still unable to display some kind of processing dialog while rendering the page.
Any ideas are welcome!

Best regards,

tom

link publish delete flag offensive edit

answered 2010-06-29 05:20:19 +0800

PeterKuo
481 ● 2

Do the answer of caclark help you?
http://www.zkoss.org/forum/listComment/12461

link publish delete flag offensive edit

answered 2010-06-30 06:11:02 +0800

tomCat
276 ● 3

updated 2010-06-30 06:13:19 +0800

Hi Peter,

no, the answer of caclark did not work. From my point of view the processing dialog is not shown, because the load time on server-side is very short. But the browser (client-side) needs about 3 seconds to "render" the result. Here is a simple example:

index.zul:

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window 
	vflex="true"
	apply="controller.ProcessingController">
	<borderlayout vflex="true">
		<north height="28px">
			<borderlayout>
				<north border="none">
					<menubar>
						<menuitem label="Btn1" />
						<menuitem label="Btn2" />
						<menuitem label="Btn3" />
						<menuitem label="Btn4" />
						<menuitem label="Btn5" />
					</menubar>
				</north>
			</borderlayout>
		</north>
		<center>
			<div vflex="true">
				<paging id="paging"/>
				<div vflex="true" style="overflow:auto;"> 
					<grid model="@{result}" width="1800px">
						<rows>
							<row self="@{each=parent}">
								<listbox model="@{parent}">
									<listhead>
										<listheader label="0" />
										<listheader label="1" />
										<listheader label="2" />
										<listheader label="3" />
										<listheader label="4" />
										<listheader label="5" />
										<listheader label="6" />
										<listheader label="7" />
										<listheader label="8" />
										<listheader label="9" />
										<listheader label="10" />
										<listheader label="11" />
										<listheader label="12" />
										<listheader label="13" />
										<listheader label="14" />
										<listheader label="15" />
										<listheader label="16" />
										<listheader label="17" />
										<listheader label="18" />
									</listhead>
									<listitem self="@{each=child}">
										<listcell label="@{child.test0}" />
										<listcell label="@{child.test1}" />
										<listcell label="@{child.test2}" />
										<listcell label="@{child.test3}" />
										<listcell label="@{child.test4}" />
										<listcell label="@{child.test5}" />
										<listcell label="@{child.test6}" />
										<listcell label="@{child.test7}" />
										<listcell label="@{child.test8}" />
										<listcell label="@{child.test9}" />
										<listcell label="@{child.test10}" />
										<listcell label="@{child.test11}" />
										<listcell label="@{child.test12}" />
										<listcell label="@{child.test13}" />
										<listcell label="@{child.test14}" />
										<listcell label="@{child.test15}" />
										<listcell label="@{child.test16}" />
										<listcell label="@{child.test17}" />
										<listcell label="@{child.test18}" />
									</listitem>
								</listbox>
							</row>
						</rows>
					</grid>
				</div>
			</div>
		</center>
	</borderlayout>
</window>
</zk>

ProcessingController.java:

public class ProcessingController extends GenericForwardComposer {

	@Override
	public void doBeforeComposeChildren(Component comp) throws Exception {
		super.doBeforeComposeChildren(comp);
		
		Clients.showBusy("Loading...");
	}
	
	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		
        List result = new ArrayList();
        for(int i = 0; i < 3; i++) {
       	 List parent = new ArrayList();
       	 
       	 for(int j = 0; j < 20; j++) {
       		 Map child = new HashMap();
       		 for(int k = 0; k < 19; k ++) {
       			 child.put("test" + k, "test" + k);
       		 }
       		 
       		 parent.add(child);
       	 }
       	 
       	 result.add(parent);
        }
        
        DataBinder binder = new AnnotateDataBinder(comp);
        binder.bindBean("result", result);
        binder.loadAll();
        
        Events.postEvent(new Event("onLoadingFinished", self));
	}
	
	public void onLoadingFinished() {
		Clients.clearBusy();
	}

}

The processing dialog is never shown.

Best regards,

tom

link publish delete flag offensive edit

answered 2010-07-04 23:46:54 +0800

PeterKuo
481 ● 2

@tomCat
For your requirement, I think you have to rewrite the redraw function of grid.
You may refer to
http://docs.zkoss.org/wiki/Client_Side_Programming

You have to add showbusy before actual redraw function, and remove showbusy after redraw function.

link publish delete flag offensive edit

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

Show busy for listboxes with many items

10 Replies

Question tools

Stats

Related questions