show progress indicator until the table is fully populated with data

hello vaadiners

I attached a screenshot to demonstrate what I want

I have some tables in my layout which are populated by some long running database queries In my current implementation the UI doesn’t show up until all the tables arent fully populated (the progressindicator in the top right corner appears and goes red for a quiet long time)

Instead of that I would like to do the following:

  • show the layout with the empty tables
  • and show a progress indicator in place of each tabe until they aren’t populated with data

Which is the easiest/ best way to do that?

I searched the forums for solution and it seems to me that the solution will be some kind of multithreading

So far I tried:

  • LazyLoadWrapper from the directory (the screenshot was taken with that) , but it didn’t work

I have found some other solutions in the directory refresher and tpt

Which one should I use ? or is there a nother solution ?

Peter
11803.jpg

Running stuff that takes long in a background thread works like in
this example
.

You can use a ProgressIndicator in normal mode (if you know how long it takes) or the indeterminate mode. Or the Refresher. I haven’t used TPT for that, but it could work as well.

Just beware of threading problems, such as the one explained
here
. Mentioned in KB
article #327
if you have Pro Account.

SQLContainer, JPAContainer and many other container implementations in Directory support lazy loading, which may help with queries that would normally take long. You might not even need to use threads that way.

Hello. I have almost the same problem. My portlet (even portal) doesn’t show up until my xml file is parsed and loaded into table. Here is my code that parses the XML and fills the table:

    Window main = new Window();
    private HorizontalLayout upperLeftCorner = new HorizontalLayout();
    private IndexedContainer addressBookData = createData();
    private Table contactList = new Table();
    contactList.setContainerDataSource(addressBookData);
    upperLeftCorner.addComponent(contactList);
    main.addComponent(upperLeftCorner);


    private IndexedContainer createData() {

            IndexedContainer ic = new IndexedContainer(); 
	for (String p : fields) { 
		ic.addContainerProperty(p, String.class, ""); 
	}

                    String webPage = "http://XXXXXX";
		String name = "xxx";
		String password = "xxx";
		
		String authString = name + ":" + password;
		byte[] authEncBytes = Base64.encodeBase64(authString.getBytes());
		String authStringEnc = new String(authEncBytes);
		
		URL url = new URL(webPage);
		URLConnection urlConnection = url.openConnection();
		urlConnection.setRequestProperty("Authorization", "Basic " + authStringEnc);
		InputStream openStream = urlConnection.getInputStream();
		
		Builder builder = new Builder();
		Document doc = builder.build(openStream);
		Element root = doc.getRootElement();
		Elements diski = root.getChildElements();

		Element volserChild = null;
		Element unitChild = null;

		for (int i = 0 ; i < diski.size() ; i ++) {
			Object id = ic.addItem();

			volserChild = diski.get(i).getFirstChildElement("volser");
			if (volserChild != null) {
				ic.getContainerProperty(id, "volser").setValue( volserChild.getValue() );
	    	        }
			unitChild = diski.get(i).getFirstChildElement("unit");
			if (unitChild != null) {
				ic.getContainerProperty(id, "unit").setValue( unitChild.getValue() );
	    	       }
		}
            return ic;
    }

Can I use ajax to download the xml file? Some other suggestions?

Thank you very much for your help.

Please help! How can I change my portlet? I don’t want to wait 10 seconds to load the whole page.
I would like to change it to load the page first and than the table is filled with data from xl. Maybe add the progress indicator.

Thank you very much for your help.


package com.example.vaadinliferay;

import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import java.util.HashMap;
import java.util.Map;
import org.apache.commons.codec.binary.Base64;
import nu.xom.Builder;
import nu.xom.Document;
import nu.xom.Element;
import nu.xom.Elements;
import nu.xom.ParsingException;
import nu.xom.ValidityException;
import com.vaadin.Application;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.*;
import com.vaadin.ui.Window; 
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Table.ColumnResizeEvent;

public class VaadinliferayApplication extends Application {
	
	Window main = new Window();
	private static String[] fields = { "volser", "unit", "devtyp", "FCyl", "LCyl", "use", "SGRP", "system" };
	private static String[] visibleCols = new String[]
 { "volser", "unit", "devtyp", "FCyl", "LCyl", "use", "SGRP", "system" }; 
	private Table contactList = new Table();
	private HorizontalLayout buttonArea = new HorizontalLayout();
	private HorizontalLayout upperLeftCorner = new HorizontalLayout();
	private HorizontalLayout bottomLeftCorner = new HorizontalLayout(); 
	final Map<String, String> IDMap = new HashMap<String, String>();
	private IndexedContainer addressBookData = createData(); 
	
	@Override 
	public void init() {
		resetColumnWidths();
		initLayout(); 
		initGumbek();
		initAddressList();
		initFilteringControls();	
	}

	private void initLayout() { 
		main.addComponent(buttonArea);
		main.addComponent(upperLeftCorner);
		main.addComponent(bottomLeftCorner);
		main.setSizeFull();
                setMainWindow(main);
                for (final String pn : visibleCols){
			IDMap.put(pn, pn);
		}
	} 
	
	private void initGumbek() {
		buttonArea.addComponent(new Button ("Reset",new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				buttonArea.removeAllComponents();
				main.removeComponent(buttonArea);
				upperLeftCorner.removeAllComponents();
				main.removeComponent(upperLeftCorner);
				bottomLeftCorner.removeAllComponents();
				main.removeComponent(bottomLeftCorner);
				main.removeAllComponents();
				for (final String pn : visibleCols){
					addressBookData.removeContainerFilters(pn);
					IDMap.put(pn, pn);
				}
				init();
				main.showNotification("Application reloaded.");
			}
		}));		
	}
	
	private void initAddressList() { 
		upperLeftCorner.addComponent(contactList);
		contactList.setContainerDataSource(addressBookData); 
		contactList.setVisibleColumns(visibleCols); 
		contactList.setSelectable(true);
		contactList.setImmediate(true);
		contactList.addListener(new Table.ColumnResizeListener() {
			public void columnResize(ColumnResizeEvent event) {
				FilteringControlsResize();	
			}
		});
	}
	
	private void FilteringControlsResize() { 
		
		bottomLeftCorner.removeAllComponents();
		for (final String pn : visibleCols) { 
			final TextField sf = new TextField(); 
			bottomLeftCorner.addComponent(sf);
			sf.setWidth(contactList.getColumnWidth(pn)+13);
			contactList.setColumnCollapsingAllowed(true);
			if (fields.length > 0) {
				Object col = fields[0]
;
				boolean b = contactList.isColumnCollapsed(col);
				contactList.setColumnCollapsed(col, !b);
				contactList.setColumnCollapsed(col, b);
			}
			contactList.setColumnCollapsingAllowed(false);
			sf.setInputPrompt(IDMap.get(pn));
			sf.setImmediate(true); 
			sf.addListener(new Property.ValueChangeListener() { 
				public void valueChange(ValueChangeEvent event) { 
					addressBookData.removeContainerFilters(pn); 
					if (sf.toString().length() > 0 && !pn.equals(sf.toString())) { 
						contactList.setWidth(1001);
						if (pn == "use" || pn == "FCyl" || pn == "LCyl") {
							addressBookData.addContainerFilter(pn, sf.toString(), true, true);
							IDMap.put(pn, sf.toString());
						} else {
							addressBookData.addContainerFilter(pn, sf.toString(), true, false);
							IDMap.put(pn, sf.toString());
						}
					} else if (sf.toString().length() == 0) {
						IDMap.put(pn, pn);
						sf.setInputPrompt(IDMap.get(pn));
						sf.setEnabled(true);
						sf.focus();
						sf.setReadOnly(false);
					}
					getMainWindow().showNotification( "" + addressBookData.size() + " matches found");	
				} 
			}); 
		}
	}
	
	
	private void initFilteringControls() { 
		
		bottomLeftCorner.removeAllComponents();
		for (final String pn : visibleCols) { 
			final TextField sf = new TextField(); 
			bottomLeftCorner.addComponent(sf); 
			sf.setWidth(contactList.getColumnWidth(pn)+13);
			contactList.setColumnCollapsingAllowed(true);
			if (fields.length > 0) {
				Object col = fields[0]
;
				boolean b = contactList.isColumnCollapsed(col);
				contactList.setColumnCollapsed(col, !b);
				contactList.setColumnCollapsed(col, b);
			}
			contactList.setColumnCollapsingAllowed(false);
			
			sf.setInputPrompt(pn);
			sf.setImmediate(true); 
			sf.addListener(new Property.ValueChangeListener() { 
				public void valueChange(ValueChangeEvent event) { 
					addressBookData.removeContainerFilters(pn); 
					if (sf.toString().length() > 0 && !pn.equals(sf.toString())) {
						contactList.setWidth(1001);
						if (pn == "use" || pn == "FCyl" || pn == "LCyl") {
							addressBookData.addContainerFilter(pn, sf.toString(), true, true);
							IDMap.put(pn, sf.toString());
						} else {
							addressBookData.addContainerFilter(pn, sf.toString(), true, false);
							IDMap.put(pn, sf.toString());
						}
					} else if (sf.toString().length() == 0) {
						IDMap.put(pn, pn);
						sf.setInputPrompt(IDMap.get(pn));
					}
					getMainWindow().showNotification( "" + addressBookData.size() + " matches found");	
				} 
			}); 
		}
	}
	
	
	private IndexedContainer createData() { 
		
		IndexedContainer ic = new IndexedContainer(); 
		for (String p : fields) { 
			ic.addContainerProperty(p, String.class, ""); 
		}
		try {
			String webPage = "http://XXXXXXXXXXX";
			String name = "xxxxx";
			String password = "xxxxxx";
			String authString = name + ":" + password;
			byte[] authEncBytes = Base64.encodeBase64(authString.getBytes());
		        String authStringEnc = new String(authEncBytes);
			URL url = new URL(webPage);
			URLConnection urlConnection = url.openConnection();
			urlConnection.setRequestProperty("Authorization", "Basic " + authStringEnc);
			InputStream openStream = urlConnection.getInputStream();
			Builder builder = new Builder();
			Document doc = builder.build(openStream);
			Element root = doc.getRootElement();
			Elements diski = root.getChildElements();
			Element volserChild = null;
			Element unitChild = null;
			Element devtypChild = null;
			Element FCylChild = null;
			Element LCylChild = null;
			Element useChild = null;
			Element SGRPChild = null;
			Element systemChild = null;
			for (int i = 0 ; i < diski.size() ; i ++) {
				Object id = ic.addItem();
				volserChild = diski.get(i).getFirstChildElement("volser");
				if (volserChild != null) {
					ic.getContainerProperty(id, "volser").setValue( volserChild.getValue() );
		    	}
				unitChild = diski.get(i).getFirstChildElement("unit");
				if (unitChild != null) {
					ic.getContainerProperty(id, "unit").setValue( unitChild.getValue() );
		    	}
				devtypChild = diski.get(i).getFirstChildElement("devtyp");
				if (devtypChild != null) {
					ic.getContainerProperty(id, "devtyp").setValue( devtypChild.getValue() );
		    	}
				FCylChild = diski.get(i).getFirstChildElement("FCyl");
				if (FCylChild != null) {
					ic.getContainerProperty(id, "FCyl").setValue( FCylChild.getValue() );
		    	}
				LCylChild = diski.get(i).getFirstChildElement("LCyl");
				if (LCylChild != null) {
					ic.getContainerProperty(id, "LCyl").setValue( LCylChild.getValue() );
		    	}
				useChild = diski.get(i).getFirstChildElement("use");
				if (useChild != null) {
					ic.getContainerProperty(id, "use").setValue( useChild.getValue() );
		    	}
				SGRPChild = diski.get(i).getFirstChildElement("SGRP");
				if (SGRPChild != null) {
					ic.getContainerProperty(id, "SGRP").setValue( SGRPChild.getValue() );
		    	}
				systemChild = diski.get(i).getFirstChildElement("system");
				if (systemChild != null) {
					ic.getContainerProperty(id, "system").setValue( systemChild.getValue() );
		    	}
			}
		} catch (MalformedURLException e) {
			main.showNotification(e.getMessage());
		} catch (IOException e) {
			main.showNotification(e.getMessage());
		} catch (IllegalStateException e) {
			main.showNotification(e.getMessage());
		} catch (ValidityException e) {
			main.showNotification(e.getMessage());
		} catch (ParsingException e) {	
			main.showNotification(e.getMessage());
		}	
	return ic; 
	}

	public void resetColumnWidths() {
		contactList.setColumnCollapsingAllowed(true);
	    for (Object object : fields) {
	    	contactList.setColumnWidth(object, 110);
	    	contactList.setWidth(1001);
	    }
	    if (fields.length > 0) {
	    	Object col = fields[0]
;
	    	boolean b = contactList.isColumnCollapsed(col);
	    	contactList.setColumnCollapsed(col, !b);
	    	contactList.setColumnCollapsed(col, b);
	    }
	    contactList.setColumnCollapsingAllowed(false);
	}
	
}

The easiest way is probably to use the
LazyLoadWrapper add-on
.
Otherwise, read Marko’s post above and see the pages he linked to.