使用uiBinder在gwt中构建表单

时间:2013-01-16 15:55:14

标签: java gwt uibinder

我正在开发一个需要表单的应用程序,但我不知道如何制作它。我正在寻找有用的信息(手册,书籍等),但我找不到任何有用的信息。我想制作一个表单,当用户点击按钮时,我想收集表单中的信息。

我正在使用GWT和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(){

}

感谢。

2 个答案:

答案 0 :(得分:1)

我认为这不是GWT的用途。为什么不给每个ListBox一个ui:字段标识符,而不是将ListBoxes中的值赋给共享数据类,并通过RPC将该类发送到服务器。

答案 1 :(得分:1)

您可以通过基于UiBinder的GWT团队示例代码和单元测试找到大量示例 - http://code.google.com/p/google-web-toolkit/source/search?q=.ui.xml&origq=.ui.xml&btnG=Search+Trunk

您还应该逐步完成https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder