Cómo obtener un div anidado en GWT

Question

Quiero obtener un div anidado en GWT y poder poner un widget allí. Algo como esto:

<div id="container"> 
    <div id="content_left"> 
    </div> 
    ...other divs 
</div> 

Quiero ser capaz de obtener content_left y poner un widget allí. Hasta ahora todo lo que RootPanel obtiene son los divs dentro de la etiqueta. También intenté usar DOM.getElementById (...) pero no sé cómo poner un widget ya que el método add especifica que los parámetros de entrada deben ser de tipo child.

Ahora no sé mucho sobre CSS y posicionamiento y no hice el estilo anterior. Es algo que obtuve de mi diseñador gráfico. Creo que esta era su manera de presentar las cosas. Ya estaba pensando en diseñar sin tener que usar un div externo como el div con id = contenedor de arriba, así que no tendría este problema en primer lugar, pero me gustaría saber si es una buena idea.

Answer 1

GWT proporciona widgets de contenedor para este tipo de cosas: generan tus DIV por ti, y puedes anidarlos a cualquier profundidad de acuerdo con sus propias reglas. Realmente no necesita usar DIVs explícitos para nada.

Dijiste

Ahora no sé mucho sobre CSS y el emplazamiento, no lo hice el estilo anterior.

De eso se trata exactamente GWT: No es necesario. Une tu GUI en código y deja que GWT se preocupe por cómo traducirlo a CSS. Sugerencia: es mucho mejor que la mayoría de nosotros. Hay soluciones para muchos, muchos caprichos conocidos del navegador para hacerlo tan multiplataforma como sea humanamente posible.

Answer 2

Un ejemplo específico para el fragmento de HTML que proporcionó sería algo como esto. Los FlowPanels son divisiones que admiten agregar un número arbitrario de cosas. Si sabes que un div dado solo tendrá un widget, SimplePanel es probablemente una mejor opción.

Sin embargo, en general, lo que quiere hacer es tomar el HTML que desea generar y crear el código GWT para generar esa estructura DOM particular. Un artículo decente sobre cómo tiendo a tratar con widgets más simples es tags first gwt.

FlowPanel container = new FlowPanel(); 
container.setStyleName("container"); 

FlowPanel contentLeft = new FlowPanel(); 
contentLeft.setStyleName("content_left"); 
container.add(contentLeft); 

container.add(otherDivs); 


//elsewhere in your code: 
contentLeft.add(oneWidget); 
contentLeft.add(secondWidget); 

Answer 3

Si usted tiene un diseñador que está produciendo código de diseño de calidad, que se debe utilizar, pero sólo si usted es consciente de todos los riesgos y problemas de compatibilidad y no les importa o tener la capacidad de poner a prueba sus diseños. .

Suponiendo que todas estas cosas, Im encontrar este enfoque extremadamente eficiente ..

Simplemente construir sus widgets de una HTMLPanel y utilizar divs que sólo desea el canje de objetos de primera clase para representar a su disposición cuando se necesita programática control

<g:HTMLPanel > 

      <div class="normal style classes {obfuscated.style.class}"> 
        <g:FlowPanel ui:field="programmaticPanel" stylePrimaryName="style"> 
          <g:HTMLPanel> 
            <p>CONTENT</p> 
          </g:HTMLPanel> 
        </g:FlowPanel> 
      </div> 

    </g:HTMLPanel > 

Tenga en cuenta que todavía puede usar sus estilos ofuscados con los divs/tramos de vainilla etc. ¡o mezclar y combinar!

Answer 4

Puede cambiar (o informe a su diseñador cambiar) tu html para

<div id="container"> 
    <div id="content_left"> 
     <span id="qq"/> 
    </div> 
    ...other divs 
</div> 

Y en su utilización código:

FlowPanel panel = new FlowPanel(); 
RootPanel.get("qq").add(panel); 
panel.add(w1); 
panel.add(w2); 
... 

Answer 5

Bienvenido a UiBinder http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html

soporta HTML personalizado + widgets

"hace que sea más fácil colaborar con UI desi gners que se sienten más cómodos con XML, HTML y CSS que el código fuente de Java "