Client side component, inside tab disappears

Vaadin 6 / 7 / 8
1

I’ve written a client side componet which I have placed inside a Tab.

The client side compoents works as expected, except that when I change tabs and come back to the tab containing my client side compoent it is no longer present.

I believe that the TabSheet is removing my compoent from the DOM when the selected Tab changes, and then recreating it from scratch and expecting my compoent to rebuild itself from the shared state in the OnStateChange method. Is this correct?

If this is correct how can I avoid this?

I need to avoid this because there is no way for my client side component to recreate it’s state as it displays 3rd party html and invokes 3rd party javascript which it and users interact with.

Thanks

2

Do you resolve the issue?

I have the same problem…

3

I worked around it by creating a replacement Tab component that doesn’t destroy the client when the tab is changed. see below…

import com.vaadin.shared.ui.MarginInfo;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Component;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.VerticalLayout;

/**
 *
 *
 * unfortunately when a Component is hidden vaadin removes it from the browser
 * completely causing it to loose any non vaadin state... vaadin tabs take this
 * one step further by actively causing the removal of the component from the
 * browser when the tab is not selected.
 *
 * As this is a problem for our component (it has state which can not be
 * persisted in vaadin), this "VirtualTabs" was created
 * which works by changing the size of the various tabs to 0 when not selected
 *
 * The public methods which are implemented conform to the Vaadin TabSheet
 * method signatures
 *
 * @author rsutton
 *
 */
public class VirtualTabs extends VerticalLayout
{
    private static final long serialVersionUID = 1L;
    // Logger logger = LogManager.getLogger();
    CssLayout buttons;
    Component currentComponent = null;

    VirtualTabs()
    {
        setMargin(new MarginInfo(true, false, false, false));
        buttons = new CssLayout();
        buttons.addStyleName("v-component-group");

        buttons.setWidth("100%");
        buttons.setHeight("35");
        addComponent(buttons);
    }

    public void addTab(final Component htmlContainer, final String caption)
    {
        Button tabButton = new Button(caption);
         tabButton.addClickListener(new ClickListener()
        {

            private static final long serialVersionUID = 1L;

            @Override
            public void buttonClick(ClickEvent event)
            {

                currentComponent.setHeight("0");
                setExpandRatio(currentComponent, 0);

                currentComponent = htmlContainer;
                currentComponent.setHeight("100%");
                setExpandRatio(currentComponent, 10000);

            }
        });
        addComponent(htmlContainer);
        htmlContainer.setHeight("0");
        if (currentComponent == null)
        {
            htmlContainer.setHeight("100%");
            currentComponent = htmlContainer;
            setExpandRatio(htmlContainer, 10000);
        }

        buttons.addComponent(tabButton);

 
    }

    public Component getSelectedTab()
    {
        return currentComponent;
    }
}