Javascript and css are not flushed in AbstractJavaScriptComponent

Vaadin 6 / 7 / 8
1

Hello,

I built two AbstractJavaScriptComponent both of them with their own css and javascript resources.
One component is used in the first landing page, when the user clicks in a button the navigation is forwarded in second component. Using firebug in this second page the css resources of the first component are loaded in the page.

For instance I see that the css selectors defined in css of the first component are used for the second component.

As far as I understand each abstractJavaScriptComponent have their own resources and their are loaded only when the component is used and discarded when not. Am I right ? Is there a different lifecycle for those files ?

Is there any way to “flush” manually those js/css files ?

2

I did this example.
I written two abstractJavaScriptComponents both of them with their own resources.
MyCompo1 uses mycompo1.js and mycompo1.css.
MyCompo2 uses mycompo2.js and mycompo2.css.

When MyCompo2 is rendered, using firebug I see that mycompo1.css is being used.
I expect that each component have their own resources in their lifecycle. So when a component is removed from a layout, its resources should be removed from the generated html as well. Am I wrong ?

thanks for any help, here the code

@Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);
        
        MyCompo1 c = new MyCompo1();
        c.setWidth(20, Unit.PERCENTAGE);
        c.setHeight(20, Unit.PERCENTAGE);
        layout.addComponent(c);

        Button button = new Button("Click Me");
        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                layout.removeAllComponents();
                MyCompo2 c2 = new MyCompo2();
                c2.setWidth(20, Unit.PERCENTAGE);
                c2.setHeight(20, Unit.PERCENTAGE);
                layout.addComponent(c2);
            }
        });
        layout.addComponent(button);
    }

@JavaScript(value = { "mycompo1.js" })
@StyleSheet(value = { "mycompo1.css" })
public class MyCompo1 extends AbstractJavaScriptComponent {

}

@JavaScript(value = { "mycompo2.js" })
@StyleSheet(value = { "mycompo2.css" })
public class MyCompo2 extends AbstractJavaScriptComponent {

}
com_example_myvaadin_MyCompo1 = function()
{
    var e = this.getElement();
    
    var txtCtrl = document.createElement('input');
    e.appendChild(txtCtrl);
}

com_example_myvaadin_MyCompo2 = function()
{
    var e = this.getElement();
    
    var txtCtrl = document.createElement('input');
    txtCtrl.className = 'simple';
    e.appendChild(txtCtrl);
}

.simple { // MyCompo1.css
    width: 275px;    
}

input[type=text]
{ // MyCompo2.css
    border: 1px dotted #000000;

}