Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

TUTORIALVaadin lets you build secure, UX-first PWAs entirely in Java.
Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Calling javascript synchronously by Enver Haase, 1 week ago
Many customerComponent instance in one page
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.
Last updated on
You cannot reply to this thread.