Hello,
I have created a customer component, but in the same html page, i can just see the first which is updated by the server, the second is not changed.
How can i set more than one component correctly? It’s related to the same div id?
HTML template:
<div class="container" style="width:auto">
<div class="progress" style="height:40px">
<div id="occupied" class="progress-bar progress-bar-success" role="progressbar" style="width:0%; line-height:-moz-block-height; font-size:20px">
</div>
</div>
</div>
In js connector, when state change:
this.onStateChange = function() {
var state = this.getState();
console.log(state);
percentage = state.percentage;
console.log(percentage);
comment = state.comment;
console.log(comment);
[b]
$("#occupied").text(comment);
$("#occupied").css("width", percentage);
[/b]
}
Then in the java class CustomerBarComponent:
public CustomerBarComponent(int percentage, String comment)
{
super();
layout = new CustomLayout("capacitybarlayout");
setCompositionRoot(layout);
if(percentage >= 0 && percentage <= 100)
{
this.percentage = percentage + "%";
}
this.comment = comment;
bar = new CapacityBar();
bar.setPercentage(percentage);
bar.setComment(comment);
layout.addComponent(bar);
}
Finally, in the java view class:
private void init()
{
addComponent(buildPanel());
}
private Panel buildPanel()
{
Panel panel = new Panel();
VerticalLayout verticalLayout = new VerticalLayout();
panel.setContent(verticalLayout);
HorizontalLayout horizonLayout1 = new HorizontalLayout();
[b]
CustomerBarComponent
[/b]bar = new CustomerBarComponent(20, "20% free space");
bar.setWidth("600px");
TextArea desc = new TextArea();
desc.setValue("Description: ");
horizonLayout1.addComponents(bar, desc);
horizonLayout1.setComponentAlignment(bar, Alignment.MIDDLE_LEFT);
verticalLayout.addComponent(horizonLayout1);
HorizontalLayout horizonLayout2 = new HorizontalLayout();
[b]
CustomerBarComponent
[/b]bar2 = new CustomerBarComponent(50, "50% free space");
bar2.setWidth("600px");
TextArea desc2 = new TextArea();
desc2.setValue("Description: ");
horizonLayout2.addComponents(bar2, desc2);
horizonLayout2.setComponentAlignment(bar2, Alignment.MIDDLE_LEFT);
verticalLayout.addComponent(horizonLayout2);
return panel;
}
Thank you.