build form in gwt with uiBinder

Question

I'm developing an app that needs a form, but I don't know how to make it. I'm looking for helpful information (manuals, books, and so), but I can't find anything useful. I want to make a form and when user clicks in the button, I want to gather up the information that the form had.

I'm developing with GWT and UiBinder.

InterfazUsuario.ui.xml:

    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    >
<g:DockLayoutPanel unit='EM'>
    <g:center>
        <g:FormPanel ui:field="form" action="/InterfazUsuario">
            <g:HTMLPanel height="427px">
                <g:Label text="Idioma:" width="49px"/>
                <g:ListBox visibleItemCount="1" name="lbIdioma" width="118px" ui:field="rellenarIdioma"/>
                <g:Label text="Tipo de Recurso:" width="100px"/>
                <g:ListBox ui:field="rellenarTipoRecurso" name="lbTipoRecurso" visibleItemCount="1" width="118px"/>
                <g:Label text="Motor de Búsqueda:" width="125px"/>
                <g:ListBox name="lbMotorBusqueda" visibleItemCount="1" width="118px"/>
                <g:Label text="Consulta:" width="125px"/>
                <g:TextBox visibleLength="50" name="txtConsulta"/>
                <g:Label text="Número de Recurso:" width="125px"/>
                <g:ListBox name="lbNumRecurso" visibleItemCount="1" width="118px"/>
                <g:Label text="Matriz:" width="125px"/>
                <g:ListBox name="lbMatriz" visibleItemCount="1" width="118px"/>
                <g:Label text="Fila:" width="125px"/>
                <g:ListBox name="lbFila" visibleItemCount="1" width="118px"/>
                <g:Label text="Columna:" width="125px"/>
                <g:ListBox name="lbColumna" visibleItemCount="1" width="118px"/>
                <g:Button width="142px" text="Aceptar" ui:field="btnAceptar"/>
            </g:HTMLPanel>
        </g:FormPanel>
    </g:center>
</g:DockLayoutPanel>

InterfazUsuario.java

public class InterfazUsuario extends Composite {

//interface InterfazUsuarioUiBinder extends UiBinder<Widget, InterfazUsuario> {}
interface InterfazUsuarioUiBinder extends UiBinder<DockLayoutPanel, InterfazUsuario> {}

private static final InterfazUsuarioUiBinder binder = GWT.create(InterfazUsuarioUiBinder.class);

RootLayoutPanel root;

@UiField
ListBox rellenarIdioma;

@UiField
ListBox rellenarTipoRecurso;

@UiField
FormPanel form;

@UiField 
Button btnAceptar;

public InterfazUsuario(List<String> idiomas, List<String> tipoRecurso){
    System.out.println("Entra en el constructor");
    // sets listBox
    initWidget(binder.createAndBindUi(this));
    for (Iterator iter = idiomas.iterator(); iter.hasNext();) {
        System.out.println("Entra en el primer for");
        String name = (String) iter.next();
        rellenarIdioma.addItem(name);

    }

    System.out.println(rellenarIdioma.getItemText(1));

    for(Iterator iter = tipoRecurso.iterator(); iter.hasNext();){
        String tipoRec = (String) iter.next();
        rellenarTipoRecurso.addItem(tipoRec);
    }
    System.out.println("vamos a salir del constructor");

    // Add an event handler to the form.
      form.addSubmitHandler(new FormPanel.SubmitHandler() {
          public void onSubmit(SubmitEvent event) {
           Window.alert("The text box must not be empty");

          }
      });

    form.setAction("/InterfazUsuario");
    form.setEncoding(FormPanel.ENCODING_MULTIPART);
    form.setMethod(FormPanel.METHOD_POST);

    form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
         @Override
         public void onSubmitComplete(SubmitCompleteEvent event) 
                  {Window.alert(event.getResults());                    
         }
      });
    System.out.println("despues de llamar al handler");
    System.out.println(form.getMethod());

}

@UiHandler("btnAceptar")
public void onClick(ClickEvent event) {
        form.submit();                  
    }

public InterfazUsuario(){

}

Thanks.

Answer 1

You can find plenty of examples by going through GWT teams sample code and unit tests based on UiBinder - http://code.google.com/p/google-web-toolkit/source/search?q=.ui.xml&origq=.ui.xml&btnG=Search+Trunk

You should also go step by step through https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder

Answer 2

I don't think that's the way GWT is meant to be used. Why don't you give every ListBox an ui:field identifier and than assign the values from the ListBoxes to a shared data class and send this class via RPC to the server.