I might not know exactly how the view lifecycle goes, but this is how I am doing things (Vaadin 8):
(1) The view layout is contructed in the constructor. For a given view, the layout and components are set up once in the constructor.
(2) The routine to update component data is called in enter() as well as after certain user actions.
Navigator configuration of view in MainUI:
this.navigator.addView("finances/cash", new CashAccountView());The CashAccountView class prototype is:
public class CashAccountView extends VerticalLayout implements View
In CashAccountView, the label is a class variable:
private Label label;
In the contructor, a layout is initialized.
HorizontalLayout layout = new HorizontalLayout();
this.label = new Label("Original Caption");
layout.addComponent(this.label);
// Other components
addComponent(layout);
In enter(), I try to update the label with the parameter.
@Override
public void enter(ViewChangeEvent event) {
if(event.getParameters() != null) {
try {
String[] parameters = event.getParameters().split("/");
Long financeId = Long.valueOf(parameters[0]
);
this.label.setCaption("Updated for #" + financeId);
} catch (Exception e) {}
}
}
What I see happening is that when the view is displayed, there are two labels in the view: one says “Original Caption”, with all the styling desired, and the other says “Updated for #14”, with no styling. I do not understand why, if I am referring to the same variable/label in Java code, I end up with two labels on the client and cannot access the label created in the contructor in the client.
As a variation, I decided to removeAllComponents() and reconstruct the layout in enter(), but attempts to update the label after that do not succeed either.
What am I doing wrong?