GWT - Cómo definir un widget fuera de la jerarquía de diseño en el archivo xml de uibinder

Question

esta es mi primera publicación. Espero que alguien pueda ayudarme
Estoy buscando una manera de definir un widget en el archivo de diseño XML de UiBinder por separado, sin ser parte de la jerarquía de diseño. Aquí hay un pequeño ejemplo:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

<g:Label ui:field="testlabel" text="Hallo" /> 
<g:HTMLPanel>  
... 
</g:HTMLPanel> 

El compilador falla desde la interfaz de usuario: Elemento UiBinder espera elemento de un solo hijo.
en código Java voy a acceder y enlazar el control Label como de costumbre:

@UiField Label testlabel; 

Por ejemplo, esto podría ser útil cuando se define una cuadrícula o FlexTable - quiero definir las etiquetas para el encabezado de la tabla dentro de la Archivo de diseño XML, no programáticamente dentro del código.

Muchas gracias de antemano

Answer 1

sentimos, pero no puede hacerlo, UiBinder simplemente no es compatible con este tipo de sintaxis. Piénselo: ¿a dónde iría este Widget? ¿Debería ser agregado al árbol DOM? También hace que sea difícil para el compilador decir si este código debe ser eliminado como no utilizado.

Tendrá que esperar a que el equipo de GWT cree etiquetas personalizadas para Grid (como lo hicieron con, por ejemplo, DockLayoutPanel). Sin embargo, no esperaría esa funcionalidad para el FlexTable, ya que se entiende por diseño para el contenido dinámico, lo que significa agregarlo de forma programática de todos modos.

Answer 2

Entender el UiBinder Dev Guide es la clave para descubrir cómo estructurar sus plantillas de UiBinder limpiamente.

Por lo tanto, si todo lo que quiere hacer es crear un widget y no tenerlo inicialmente en el DOM, entonces no lo mencione en absoluto en la plantilla de UiBinder. En cambio, en el archivo Java que acompaña a su plantilla de UiBinder, créelo y agréguelo a un panel que esté definido en su plantilla.

Por ejemplo, poner esto en su plantilla:

<g:HTMLPanel ui:field='container'>  
... 

Y poner esto en su archivo Java:

@UiField HTMLPanel container; 
public MyWidget() { 
    initWidget(uiBinder.createAndBindUi(this)); 
    Label testLabel = new Label("hallo"); 
    // Do whatever you want to testLabel 
    container.add(testLabel); 
} 

Answer 3

No estoy seguro de si y tiene la misma motivación inusual para colocar más de dos widgets raíz bajo la etiqueta uibinder. De todos modos, así es como lo hago.

Dado que la etiqueta uibinder solo permite un widget raíz, coloco una etiqueta ui HTML como el widget raíz y luego apilo mis múltiples widgets pseudo-root dentro de esa etiqueta.

En el siguiente ejemplo, observe que el widget raíz real no tiene ui: nombre de campo, porque no tenemos la intención de usarlo. En lo que a nosotros respecta, los widgets raíz efectivos son "tabLayout" y "content".

Hello.ui.xml del archivo:

<ui:UiBinder 
    xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
    <g:HTML> 
    <g:TabLayoutPanel ui:field="tabLayout" ... > 
     blah ... blah 
    </g:TabLayoutPanel> 
    <g:VerticalPanel ui:field="content"> 
     blah .. blah 
    </g:VerticalPanel> 
    </g:HTML> 
</ui:UiBinder> 

No extienda compuesta por ejemplo el código java detrás de la plantilla. Crea una clase importada por el punto de entrada de tu módulo o utiliza la plantilla directamente en tu módulo.

Tengo varias razones por las que necesito más de un widget raíz.En este ejemplo, hay que adjuntar el "widget de efectivo raíz" condicionalmente:

public class Hello 
    implements EntryPoint{ 

    private static HelloUiBinder uiBinder = GWT.create(HelloUiBinder.class); 

    interface HelloUiBinder 
    extends UiBinder<Widget, Hello>{} 

    @UiField TabLayoutPanel tabLayout; 
    @UiField VerticalPanel content; 

    @Override public void onModuleLoad() { 
    uiBinder.createAndBindUi(this); 

    if (condition1) 
     RootPanel.get().add(tabLayout); 
    else 
     RootPanel.get().add(content); 

    blah ... blah 
    } 
} 

Por lo tanto, el truco es no usar el control real de la raíz en absoluto.