Preloading Embedded in the next tabsheet

Hi,
I just create a tabsheet in my application to display some reports generated dynamically by jasperserver using the URL and adding some parameters to the URL.
To display the report I use the object com.vaadin.ui.Embedded and for some tabs i have a layout to display more than one report.
The thing is that in the first tab there is a form to fill and some others things to do, but in order to validate the form we have to check some information in the others tab with reports.
So I would like to show the first tab but i also want the others tabs to load in background, so when the user change the tab he doesn’t have to wait long for the report.
I’am pretty sure it’s possible cause i can preload a tab by manually (mouseClick) change the tab for 1 sec before coming back to the first tab. Then the browser load the embedded url for the report tab in background and i can fill my form in the first tab and when loading is done i change the tab and the report show immediately.

I try to use tabSheet.TabSheetsetSelectedTab() to show the tab for an instant in order to preload it but it seems that it’s not like when i change it manually with a mouse click.

Do you have some idea ?

The TabSheet has been specifically designed that the tabs are loaded lazily, for optimization purposes.

There’s no official way to eagerly load tabs with TabSheet, so you probably don’t want to use it. Your best bet would be to emulate the behavior yourself:

Create a row of buttons, that act as your tabs. Underneath, use a VerticalLayout (or HorizontalLayout) that is populated with all the components you currently have in separate tabs. What you then do is to bind each button to each component (“tab”) in your layout. As a button is pressed, you call “layout.setExpandRatio(tab, 1.0f)” for the corresponding component, and put a “0.0f” expand ratio for all the others. Also, you need to call “tab.setHeight(“100%”)” for the current component, while setting “tab.setHeight(“0px”)” for the others.

So, the idea is to squash to a height 0 all the tabs that aren’t shown, and then just show the one component. This way, all the components are put directly into the DOM, and thus loaded. You might need to add some additional CSS to make sure that all the invisible tabs are really not shown.