¿Cómo mezclar html con widgets de gwt?

Question

Intento generar un ui dinámicamente gwt. Como resultado que obtendría un fragmento HTML así:

<ol> 
<li>MyLabel</li> 
<li><input type="text"></li> 
</ol> 

la etiqueta debe ser una etiqueta de GWT y la entrada debería ser un cuadro de texto GWT. ¿Cómo puedo lograr esto con GWT? Intenté usar la clase HTMLPanel, pero ¿cómo puedo inyectar el

<li> 

¿Qué etiquetas?

No puedo usar UIBinder, ya que me gustaría crear dinámicamente dichos fragmentos como se muestra arriba.

Answer 1

Usted debe crear su propia subclase de ComplexPanel. Esto le dará algo que funciona de manera similar a HorizontalPanel o VerticalPanel, solo se basa en elementos de lista en lugar de elementos de tabla. Debería verse algo como esto:

public class OListPanel extends ComplexPanel { 
final OListElement ol = Document.get().createOLElement(); 

public OListPanel() { 
    setElement(ol); 
} 

public void add(Widget w) { 
    LIElement li = Document.get().createLIElement(); 
    ol.appendChild(li); 
    add(w, (Element)li.cast()); 
} 

public void insert(Widget w, int beforeIndex) { 
    checkIndexBoundsForInsertion(beforeIndex); 

    LIElement li = Document.get().createLIElement(); 
    ol.insertBefore(li, ol.getChild(beforeIndex)); 
    insert(w, (Element)li.cast(), beforeIndex, false); 
} 

public boolean remove(Widget w) { 
    Element li = DOM.getParent(w.getElement()); 
    boolean removed = super.remove(w); 
    if (removed) { 
     ol.removeChild(li); 
    } 
    return removed; 
} 
} 

No lo he probado pero básicamente es correcto. WRT el marcado informados en su pregunta, este código producirá una diferencia ligera, ya que las etiquetas GWT tienen su propio elemento <div>:

<ol> 
<li><div>MyLabel</div></li> 
<li><input type="text"></li> 
</ol> 

Es posible que prefiera InlineLabel, que se basa en el elemento de <span> menos intrusivo.

Answer 2

¿Por qué no poner ese fragmento en un Widget independiente creado a través de UiBinder? (si sabe cómo se verá la estructura de antemano y solo quiere insertar MyLabel y TextBox)
No tenga miedo de dividir sus widgets de esta manera: el compilador GWT es excelente para optimizar y las plantillas UiBinder se procesan en tiempo de compilación, por lo que no debe haber ninguna penalización en el rendimiento (todavía se recomienda encarecidamente la evaluación comparativa - YMMV). Incluso diría que sería más rápido intentar agregar esta estructura a través del paquete DOM: con UiBinder, el compilador sabe con qué está tratando, con DOM básicamente dices: "Sé lo que estoy haciendo, don '¡toca mi código! (al menos esa es mi opinión sobre esto :)). HTMLPanel podría ser una alternativa, pero tendría que asignar una identificación a cada elemento que desea modificar/adjuntar cosas a ...:/

En pocas palabras: use UiBinder para esto, para eso fue diseñado.

Answer 3

Siempre se puede hacer algo como:

Document doc = Document.get(); 
    final OListElement ol = doc.createOLElement(); 
    LIElement li = doc.createLIElement(); 
    li.appendChild((new Label()).getElement()); 
    ol.appendChild(li); 
    li = doc.createLIElement(); 
    li.appendChild((new TextBox()).getElement()); 
    ol.appendChild(li); 
    panel.add(new Widget() {{ 
     setElement(ol); 
    }});