issues with loading table in IE and Chrome, not in FF

I’m experiencing issues with loading a table in IE (v8 and v9) and chrome (v12), but in FF (v3 and higher) it works as expected

Google Chrome (v12)

*** Situation:
item in tree (left part of splitpanel) is selected and corresponding table is loaded (right part of splitpanel)

  1. Select item in the table at the right
  2. Select another item in the tree
    *** Result:
    The newly selected tree item is highlighted, but the corresponding table isn’t loaded in the right part of the splitpanel

*** Debug console output:

Variable burst to be sent to server:
PID527 (class com.vaadin.terminal.gwt.client.ui.VTree) :
selected (c) : 5
Making UIDL Request with params: 12e18dc6-8dd9-4850-a2a3-28dfdb4b02df5PID527selectedc
Server visit took 63ms
JSON parsing took 0ms
Processing time was 0ms for 59 characters of JSON
Referenced paintables: 46

IE (v9)

*** Situation:
item in tree (left part of splitpanel) is selected and corresponding table is loaded (right part of splitpanel)

  1. Select item in the table at the right
  2. Select another item in the tree
    *** Result:
    The newly selected tree item is highlighted, but the corresponding table isn’t loaded in the right part of the splitpanel

*** Debug console output:

Variable burst to be sent to server:
PID1213 (class com.vaadin.terminal.gwt.client.ui.VScrollTable) :
firstvisible (i) : -15
PID1181 (class com.vaadin.terminal.gwt.client.ui.VTree) :
selected (c) : 5
Making UIDL Request with params: 278a863d-a2a9-42d7-88c8-d5e0bb2693c5-15PID1213firstvisiblei5PID1181selectedc
Server visit took 112ms
JSON parsing took 0ms
Processing time was 1ms for 59 characters of JSON
Referenced paintables: 45

Firefox (5)

*** Situation:
item in tree (left part of splitpanel) is selected and corresponding table is loaded (right part of splitpanel)

  1. Select item in the table at the right
  2. Select another item in the tree
    *** Result:
    The newly selected tree item is highlighted and the corresponding table is loaded in the right part of the splitpanel, as expected

*** Debug console output:

Variable burst to be sent to server:
PID103 (class com.vaadin.terminal.gwt.client.ui.VTree) :
clickedKey (s) : 5
clickEvent (s) : 1,71,185,false,false,false,false,8,-1,-1
selected (c) : 5
Making UIDL Request with params: d02c0cca-37d8-4995-a4e6-df81db01e3465PID103clickedKeys1,71,185,false,false,false,false,8,-1,-1PID103clickEvents5PID103selectedc
Server visit took 90ms
JSON parsing took 0ms

change

change
Processing time was 151ms for 3690 characters of JSON
Referenced paintables: 45
Warning: Icon load event was not propagated because VCaption owner is unknown.
Warning: Icon load event was not propagated because VCaption owner is unknown.

From time to time I also get out-of-sync messages in IE/chrome.
Any ideas ?

Upgraded to Vaadin v6.6.3 in the meantime, but the issue remains.
Any help appreciated…

Hi,

it would really help if you posted the relevant parts of your code instead of the debug window outputs. E.g. the parts where your table and tree an their containers are created, and also all the listeners attached to them.


Tepi

Well, that’s a lot of code but I’ll try to filter out the most relevant parts

Here we go…

Code for creating the navigation tree:


	private NavigationTree getNavigationComponents()
	{
		setTreeComponents(new NavigationTree());
		Button buttonItem1 = new Button("Section.1");
		buttonItem1.setIcon(navigationIconSection);
		Button buttonItem2 = new Button("Section.2");
		buttonItem2.setIcon(navigationIconSection);
		Button buttonItem3 = new Button("Section.3");
		buttonItem3.setIcon(navigationIconSection);
		Button buttonItem4 = new Button("Section.4");
		buttonItem4.setIcon(navigationIconSection);
		
		getTreeComponents().addItem("Section 1", buttonItem1, new ThemeResource(ResourceFactory.ICON_TREE_ITEM));
		getTreeComponents().addItem("Section 2", buttonItem2, new ThemeResource(ResourceFactory.ICON_TREE_ITEM));
		getTreeComponents().addItem("Section 3", buttonItem3, new ThemeResource(ResourceFactory.ICON_TREE_ITEM));
		getTreeComponents().addItem("Section 4", buttonItem4, new ThemeResource(ResourceFactory.ICON_TREE_ITEM));

        ItemClickListener myListener = new ItemClickListener() {

			public void itemClick(ItemClickEvent event) {
				Item clicked = event.getItem();
				Component c = (Component) clicked.getItemProperty("view").getValue();
				getMainApplication().showTrayNotification("DEBUG - " + getContext(), "Loading Section: " + c.getCaption());
				selectNavigationItem(c.getCaption());
			}
		};
				
		getTreeComponents().addListener(myListener);
		
		return getTreeComponents();
	}

Code for selecting/loading an item in the navigation tree:


	public void selectNavigationItem(String pNavItem)
	{
		StringTokenizer st = new StringTokenizer(pNavItem, ".");
		if (st.countTokens() < 2)
		{
			getWindow().showNotification ("ERROR - " + getContext(), "Unable to process the navigation request, invalid Section (" + pNavItem + ")", Notification.TYPE_TRAY_NOTIFICATION);
		}
		
		String subSection = st.nextToken();
		String methodName = "load" + subSection;
		
		loadContainer(subSection, st.nextToken());
	}

	private void loadContainer(String pSubSection, String pComp)
	{		
		// release the previously loaded section
		loadedSection = null;
		
		try {
			Class compClass = null;
			Class[] argsClass = new Class[]
 { MyWebClient.class, String.class };
			Object[] argsObject = new Object[]
 { getMainApplication(), getContext() };
			Constructor argsConstructor;

			String packageName = this.getClass().getPackage().getName();

			// instantiate class through reflection
			compClass = Class.forName(packageName + "." + pSubSection.toLowerCase() + "." + pComp + "Container");

			// check if constructor is available
			argsConstructor = compClass.getConstructor(argsClass);
			
			// Create new instance of the section 
			Object tmpSection = argsConstructor.newInstance(argsObject);
			Method getMethod = tmpSection.getClass().getMethod("getContentPanel", null);
			
			getMainPanel().setSecondComponent((MyCustomVerticalSplitPanel) getMethod.invoke(tmpSection, null));

			// keep reference to this object so that we can release it later when required
			loadedSection = tmpSection;
		}
		catch (Exception exc)
		{
			String errMsg = "section \"" + pSubSection + "\" could not be loaded (" + exc.getMessage() + ")";
			getWindow().showNotification ("ERROR", errMsg, Notification.TYPE_TRAY_NOTIFICATION);
		}

	}

	public MyCustomVerticalSplitPanel getContentPanel()
	{
		if (contentPanel == null)
		{
  		try
  		{				
				initComponentPanel();
				initRelationPanel();
				
				contentPanel = new MyCustomVerticalSplitPanel(200);
				contentPanel.setFirstComponent(getComponentPanel());
				contentPanel.setSecondComponent(getRelationPanel());
  		}
  		catch (Exception exc)
  		{
  			getMainApplication().showErrorMessage("An unexpected error occured while loading the content panel for " + getBeanType().getName() + " (" + exc.getMessage() + ")");
  			if (!getMainApplication().getApplicationServlet().isProductionMode())
  			{
  				exc.printStackTrace(System.err);
  			}
  		}
		}
		
		return contentPanel;
	}

    public void initComponentPanel()
    {
		setComponentPanel(new ComponentPanel(getMainApplication()));
		getComponentPanel().addComponent(getToolbar());
		getComponentPanel().addComponent(getTable());
		getComponentPanel().setExpandRatio(getTable(), 1.0f);
    }

    public void initRelationPanel()
    {
    	setRelationPanel(new RelationPanel(getMainApplication()));
    	    	
    	createRelationTabs();    	
    	loadRelationTabs(null);
    }

My custom classes:

Custom ComponentPanel class:


public class ComponentPanel extends VerticalLayout {

	private MyWebClient mainApplication = null;

	public ComponentPanel(MyWebClient pMainApplication)
	{
		setMainApplication(pMainApplication);
		init();
	}
	
	protected void init()
	{
		setSizeFull();
	}
	
	public void setMainApplication(MyWebClient pMainApplication) {
		mainApplication = pMainApplication;
	}
	
	public MyWebClient getMainApplication() {
		return mainApplication;
	}

}

Custom RelationPanel class:


public class RelationPanel extends TabSheet {

	private MyWebClient mainApplication = null;
	
	public RelationPanel(MyWebClient pMainApplication)
	{
		setMainApplication(pMainApplication);
		init();
	}
	
	protected void init()
	{
		setWidth("100%");
		setStyleName("minimal");
		addStyleName("admin");
	}
	
	public void setMainApplication(MyWebClient pMainApplication) {
		mainApplication = pMainApplication;
	}
	
	public MyWebClient getMainApplication() {
		return mainApplication;
	}

}

Custom NavigationTree class:


public class NavigationTree extends Tree {
	
	public NavigationTree()
	{
		init();
	}
	
	private void init()
	{
		setImmediate(true);
		
		addContainerProperty("caption", String.class, null);
		addContainerProperty("view", Component.class, null);
		addContainerProperty("icon", ThemeResource.class, null);
		
		setItemCaptionPropertyId("caption");
		setItemIconPropertyId("icon");
	}
	
    public void addItem(String pText, Component pComp)
    {
    	this.addItem(pText, pComp, (ThemeResource) null);
    }

	public void addItem(String pText, Component pComp, String pIcon)
	{
		addItem(pText, pComp, new ThemeResource(pIcon));
	}
	
	public void addItem(String pText, Component pComp, ThemeResource pIcon)
	{
		Object id = addItem();
		Item item = getItem(id);
		item.getItemProperty("caption").setValue(pText);
		item.getItemProperty("view").setValue(pComp);
		item.getItemProperty("icon").setValue(pIcon);
		setChildrenAllowed(id, false);
    }
}

I don’t immediately see anything obviously wrong with your code.

One thing that you might want to try is to replace the ItemClickListener of the Tree with a ValueChangeListener, if it otherwise suits your needs (watch for the null value or set null selection not allowed and pre-set the value) and let me know how that works.

In any case this looks like a Vaadin bug since in FF you get both the click & selection events, but in IE and Chrome only the selection event (if I read the debug outputs correctly). It could be that the click event does not get correctly sent.


Tepi

Actually the ValueChangeListener is what I used initially, but because that didn’t work I changed it to an ItemClickListener (with the same result unfortunately)

But just to be sure I’ll try the ValueChangeListener once again.
I’ll let you know the result.

Thanks for your help so far.

Guy

Now this is weird… the ValueChangeListener does work now !
Really strange because I already tried it before without success.
I just had to uncomment it again in my code and it worked.

So actually my problem is solved by switching (back) to the ValueChangeListener, but nevertheless I still don’t understand why the ItemClickListener doesn’t work
as expected in IE and Chrome.

What I noticed in those browsers is that when I select a new item in the navigation tree, the ItemClickListener is never triggered, as mentioned before.
But when I then click on the old table at the right (the one that was loaded for the previously selected item and still visible because the new item was never loaded),
then suddenly the ItemClickListener is triggered and the data for the newly selected navigation item is loaded.

Also, when I switch to another tab in the accordion (I have 3 navigation trees, loaded in separate tabs in an accordion), and then switch back to the previously selected tab,
the ItemClickListener is suddenly triggered.

A Vaadin bug ?

Ok, good that you got it to work, although not with the ItemClickListener.

When I looked at the event handling code in VTree, there are some quite complex conditions about when the ItemClickEvent is immediate, not immediate, deferred by some amount of time or not fired at all. There’s most likely some bug in that code. Unfortunately the code is quite complex so I could not (at least yet) see why the event firing fails.

Please create a ticket about this issue to
Vaadin trac
, and if you can provide (a simplified) test case as pasted code or in zip/jar file it would be of great help when fixing the bug.


Tepi

Ok, I’ll definitely create a ticket in Trac.
Thanks again for your help

Guy