I have a nested Tabsheet with some heavy DOM structures. A little background of the app:
The heavy outerTab has 5 tabs, each has several tables.
The Application also implements the outerTab TabSheet.SelectedTabChangeListener, as well as HttpServletRequestListener.
I also implemented ThreadLocal pattern to process new requests, b/c I have a “search” page in the same application, as the nested Tabsheets.
My problem is, after a few minutes, if I were to click back on, say, the heavy inactive outer tab, the tab shows blank page sporadically.
The code is like this:
public void selectedTabChange(SelectedTabChangeEvent event) {
final TabSheet source = (TabSheet)((TabSheet.SelectedTabChangeEvent)event).getSource();
Component c = event.getTabSheet().getSelectedTab();
if (c != null) {
c.setVisible(true);
c.setEnabled(true);
// here I omit logic to lazy-init the heavy OuterTab if it’s not been rendered
…
// here is the general notification message
Window cWindow = c.getWindow();
if (cWindow != null) {
c.getWindow().showNotification(“Loading Tab Data.” + (StringUtils.isNotBlank(caption) ? caption : “”));
}
}
}
I checked the Chrome/Firefox/IE and there is no exception or error;
c.setVisible(true);
c.setEnabled(true);
doesn’t help the issue either.
I realize the heavy Tab has a lot of DOM structure. IS that why I am seeing the blank page?
Artur, I’ve seen no exceptions. I did see several warnings, like this:
Layout problem detected: Component with relative height inside a VerticalLayout with no height defined.
Relative sizes were replaced by undefined sizes, components may not render as expected.
So I specified the width(and height) of the components(Labels in this case), still that Blank Page occurs.
I also noticed that when after like 5 minutes of incognito, when I went back to click on the heavy OuterTab, it went through all the outerTabs, including any news ones that user opens.
BTW, I have also allowed user to open new OuterTabs dynamically, the code is kinda like this:
button.addListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
try {
VerticalLayout externalPanel = new VerticalLayout();
externalPanel.addComponent(createURL(urlString, “”));
tabSheetMain.addTab(externalPanel, tabName, null).setClosable(closeable);
layoutMain.addComponent(tabSheetMain);
layoutMain.getWindow().addComponent(layoutMain);
externalPanel.setEnabled(true);
externalPanel.setVisible(true);
externalPanel.setImmediate(true);
tabSheetMain.setSelectedTab(externalPanel);
} catch (Exception e) {
e.printStackTrace();
}
}
});
To get the current selected Tab in the method
public void selectedTabChange(SelectedTabChangeEvent event) {
final TabSheet tabSheet = event.getTabSheet();
Component c = tabSheet.getSelectedTab();
Tab tab = tabSheet.getTab(c);
if (c != null && tab != null) {
//omit code to lazy load Tabs if it’s not been instantiated
Window cWindow = c.getWindow();
if (cWindow != null) {
logger.info(“got c.getWindow()…loading Tab Data:” + caption);
c.getWindow().showNotification(“Loading Tab Data.” + (StringUtils.isNotBlank(caption) ? caption : “”));
}
}
}
[b]
I was wondering if I could escalate this to a paid case to you? B/c I am under tight schedule?
[/b]
Update:
I am using vaadin 6.4.8 and I even tried using LazyLoadWrapper add-on; the indicator(spinner wheel) didn’t come up, and the externally opened OuterTabs invoked by users didn’t come up either.
I am wondering if all of this “blank page” is due to the the recalculations of heavy nested Tab components. Do I need to really resort to re-design the UI ( I certainly didn’t design the heavy && cmplex UI :p)
I also looked thru the forum and found TPT (Threading solution, invokeLater for heavy thread), but myApplication implements HttpServletRequestListener(as recommended, and not TrasactionListener (and as I understand, why I should use HttpServletRequestListener is b/c the CDI&& ThreadLocal problem??What is the reason for it )?
I think I should update my status for fellow vaadin lovers. The blank page is there b/c the current 1 application instance → 1 window design in vaadin6.
To reproduce it, say I have 2 tabbed windows with same URIs, and one user enters something in the search section (which is in the same window as the TabbedView page) and somehow went to the other Tab/Window instead and click enter, then the page goes blank. In contrast, If there is a “Ajax” request like sorting a table in the TabbedView page, and user goes to the other window/tab, the “OUT OF SYNC” error occurs.
I did override the getWindow() method to allow framework randomly assign the sessionId/windowId but the users don’t like not being able to bookmark their searches. If the app were only accessible from URI reference this wouldn’t have been an issue; but there are multiple entry points (including being a stand alone app); and there is a search page right along the TabbedView Page.
So I ended up having to use navigator7 addon. So far so good; except my excel download invokes brand new TabbedView Page and the state cannot be persisted…I am waiting for annotated @Page(toBeResued=true) so I still have Param digested but reusing the same TabbedView Page instance.
If anyone else has an idea on how to somehow implement that, I’d really appreciate it!