JavaScript components inside a TabSheet

Vaadin 6 / 7 / 8
1

Hey,

I’m having trouble properly using JavaScript components inside a tabsheet. Initially the components are displayed correctly but when switching to a different tab and then switching back to the tab with the JavaScript component the component is either not rendered at all (tab stays blank) or completly reinitialized.
Is there any way to fix this such that switching tabs only hides the component instead of reinitializing it all the time?

Thanks in advance

2

Have you written beforeClientResponse() method in your class which extends AbstractJavaScriptComponent? TabSheet is not caching the hidden tabs, so when user changes tabs, the content is completelyh redrawn. Hence beforeClientResponse() needs to be implemented in javascript component, which takes care of calling appropriate function to redraw the content.

3

So i have to save the internal state of the JS component (say for a map the viewport, zoomlevel, selected layers, etc) somewhere and then use beforeClientResponse() to recreate the whole JS component with the saved parameters every time the user switches a tab? That seems like a ton of overhead and work for getting a component to work inside tabs.
My JS connector looks like this:

de_..._JsOpenLayers3 = function() { var rnd = Math.random(); ...... }; Every time i switch to the tab rnd contains a new random value, is this the intended behaviour?

4

Yes, that is how tabsheets work currently.