GWT Html Layoutkonventionen

Question

Ich habe gerade angefangen, mit GWT zu arbeiten, und ich erkenne bereits die außerordentliche Macht, die es besitzt. Ich komme aus einer Frontend-Welt, also ist das Java eine große Lernkurve, aber ich denke, das wird mir helfen, eine richtig angelegte App (html-weise) zu bauen, anstatt mich nur auf die Standard-GWT-Panels zu verlassen Tabellen für Layout oder überflüssige, absolut positionierte divs.

Die größte Sache, die mich im Moment jedoch bremst, ist zu entscheiden, wie man das Design meiner Seite richtig auslegt. Ich habe eine ziemlich standardmäßige 2-Col-Kopf-/Fußseite (feste Breite), die ich entwerfen möchte, aber ich bin kein Fan von allen zusätzlichen Divs/Styling usw., die zum Beispiel mit dem DockLayoutPanel kommen.

Ich denke, dass ich nur meine eigene Layout-Widget erstreckt Composite-schreiben, die HTMLPanels für die allgemeine Site-Layout hat
(glaube ich ... immer noch nicht vollständig, dass aus noch dachte, dh., Wie zu tun ich füge IDs auf diese Platte divs „#header“, „#nav“ etc ...)
dann kann ich andere Widgets in diesem

Layout hinzufügen

Aber die andere Sache, die ich zu sehen bin, ist, dass ich schreiben könnte, eine Layout-Klasse, die UiBuilder erweitert und gerade Divs in der Datei ui.xml enthält.

Ich frage mich nur, was ist die bevorzugte Methode für Site-Layout mit GWT? Dies wird nicht im Sinne anderer Widgets wiederverwendet, es wird einmal verwendet und meine Steuerelemente usw. werden darin platziert.

Alle Tipps oder Tricks werden sehr geschätzt! Und wenn ich das Boot komplett verpasst habe, lassen Sie es mich wissen

Answer 1

Eine Kombination aus UI Binder und HTML Panel funktioniert am besten für uns.

In Ihrem .ui.xml, Platz Code ähnlich -

<gwt:HTMLPanel ui:field="container"> 



    <gwt:FlowPanel ui:field="header"></gwt:FlowPanel> 



     <gwt:HTMLPanel styleName="secondarynav"> 

      <gwt:FlowPanel ui:field="menuWidget"></gwt:FlowPanel> 

      <gwt:FlowPanel ui:field="someOtherWidget"></gwt:FlowPanel> 

     </gwt:HTMLPanel> 



     <gwt:FlowPanel styleName="secondarycontent"> 

      <gwt:FlowPanel ui:field="faqWidget"></gwt:FlowPanel> 

      <gwt:FlowPanel ui:field="advertisingWidget"></gwt:FlowPanel> 

     </gwt:FlowPanel> 



     <div class="content"> 
     <gwt:FlowPanel ui:field="mainContentWidget"/> 

     </div> 


     <div class="clearingDiv"/> 

    </div> 



    <gwt:FlowPanel ui:field="footer"></gwt:FlowPanel> 

</gwt:HTMLPanel> 

In der entsprechenden .java Klasse, haben Sie Methoden wie setHeader(), setSecondaryNav(), SetMenu(), setFooter() etc.

Auf diese Weise ist Ihr Layout vollständig in Ihrer ui.xml definiert. Außerdem können Sie Widget-Abstraktionen verwenden. Das heißt, Sie können ein Header-Widget erstellen und dann die setHeader() -Methode in Ihrem Layout aufrufen, um es richtig zu platzieren.

Answer 2

Verwenden Sie weiterhin Ihr Layout. GWT ist sehr anpassungsfähig.

Eine Option, die Sie vielleicht ausprobieren möchten, besteht darin, Ihr bestehendes statisches HTML/CSS-Layout beizubehalten. Sie können RootPanel.get ("id") verwenden, um einen Verweis auf ein Element (nach ID) als ein Panel abzurufen, in dem Sie GWT-Widgets (einschließlich anderer Panels) hinzufügen können.

Sie können Ihr Layout auch in eine UiBinder-Vorlage verschieben. Die Vorteile hier sind CSS Minification und Verschleierung (mehrere UiBinders können eine einzige CSS-Ressource teilen)

Answer 3

Wenn Sie einfach die Seite mit Ihren eigenen Divs erstellen möchten, ist der einfachste Weg, divs in der UiBinder XML-Datei zu verwenden. Es können Sie einstellen, auch das id-Attribut wie gewohnt:

<g:HTML> 
    <div id="header">...</div> 
    ... 
</g:HTML> 

Die Layout-Panels von GWT versehen kann nützlich sein, auch - vielleicht möchten Sie mit ihnen ein bisschen mehr spielen, um, und sehen, ob sie bieten jeden Wert (wie einige Cross-Browser-Probleme zu vermeiden) für Sie oder nicht.