Update a view in GWT

Question

I'm so new in GWT and having some troubles while I'm trying to update a view. I'm trying to code based on MVP pattern, so I have these two classes TempPresenter and TempViewer. After loading this UI (TempViewer.ui.xml), I want to add a new panel to this display when the user clicks on submitButton:

<g:HTMLPanel ui:field="temp">
<div align="center">
    <g:HorizontalPanel>
        <g:VerticalPanel>
            <g:Label text="X data"/>
            <g:TextArea ui:field="xData" visibleLines="10"/>
        </g:VerticalPanel>
    </g:HorizontalPanel>

    <g:Button ui:field="submitButton" text="Submit" />
    <g:VerticalPanel ui:field="newPanel" />
</div>
</g:HTMLPanel>

So, I wrote these lines in TempView:

// TempView.java
...
@UiField
VerticalPanel verticalPanel;

public void setVerticalPanel(VerticalPanel v) {
    this.verticalPanel = v;
}
...
@UiHandler("submitButton")
public void onSubmitButtonClick(ClickEvent event){
    presenter.onSubmitButtonClicked(event);
}
...

and these lines in TempPresenter:

// TempPresenter.java
...
public void onSubmitButtonClicked(ClickEvent event) {
    VerticalPanel panel = new VerticalPanel();
    panel.add(new Label("newLabel"));

    view.setVerticalPanel(panel);

    ...
}

When I run this program, I get no errors and everything is OK. However, when I clicked on submitButton, there is no change. Did I make a mistake until now? Or isn't updating view possible using this way. So, how can I update it?

Answer 1

Try

<g:HTMLPanel ui:field="temp">
<div align="center">
    <g:HorizontalPanel ui:field="hPanel"/>

    <g:Button ui:field="submitButton" text="Submit" />
    <g:VerticalPanel ui:field="newPanel" />
</div>
</g:HTMLPanel>

and

// TempView.java
...
@UiField
HorizontalPanel hPanel;

public void setVerticalPanel(VerticalPanel v) {
    hPanel.add(v);
}

Or set the panel in the view constructor before calling

initWidget(uiBinder.createAndBindUi(this));