Question

I have a requirement, where I need to provide adding text boxes dynamically. Consider following example:

TextBox1 TextBox2 TextBox3 AddButton

First, I need to display text boxes as above and one add button next to them. When clicking on the add button, there should appear a new line of textboxes as above. How can this be implemented in GWT ?

Thanks!

Answer 1

First of all let’s create UI file for your task:

<g:VerticalPanel>
    <g:FlowPanel ui:field="textAreaContainer">
        <g:TextBox ui:field="Textbox1"/>
        <g:TextBox ui:field="Textbox2"/>
        <g:TextBox ui:field="Textbox3"/>
    </g:FlowPanel>
    <g:Button ui:field="addTButton" />
</g:VerticalPanel>

There is no any styles and etc.. only as example.
And lest create java file for this view.

public class SampleGWT {
interface SampleGWTUiBinder extends UiBinder<VerticalPanel, SampleGWT> {
}

private static SampleGWTUiBinder ourUiBinder = GWT.create(SampleGWTUiBinder.class);
@UiField
FlowPanel textAreaContainer;
@UiField
TextBox Textbox1;
@UiField
TextBox Textbox2;
@UiField
TextBox Textbox3;
@UiField
Button addTButton;

public SampleGWT() {
    VerticalPanel rootElement = ourUiBinder.createAndBindUi(this);
}

@UiHandler("addTButton")
public void onAddTB(ClickEvent event){
    TextBox textBox = new TextBox();
    textAreaContainer.add(textBox);
}}

If you have any question – please welcome.