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 ?
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;
}