GWT Html Layoutkonventionen

8

Ich habe gerade angefangen, mit GWT zu arbeiten, und ich erkenne bereits die außergewöhnliche Kraft, 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.

Das größte Problem, das mich im Moment jedoch bremst, ist die Entscheidung, wie ich das Design meiner Website richtig gestalten soll. Ich habe eine ziemlich standardmäßige 2-Spalten-Kopf- / Fuß-Seite (feste Breite), die ich entwerfen möchte, aber ich bin kein Fan von allen zusätzlichen Divs / Stilen usw., die zum Beispiel mit dem DockLayoutPanel geliefert werden.

>

Ich denke, ich sollte einfach mein eigenes Layout-Widget schreiben, das Composite mit HTMLPanels für das allgemeine Seitenlayout erweitert. (Ich denke ... habe das noch nicht vollständig herausgefunden, d. Wie füge ich IDs zu diesen Panel-Divs "#header", "#nav" usw. hinzu ...)
dann kann ich andere Widgets in dieses Layout einfügen

Aber die andere Sache, die ich sehe, ist, dass ich eine Layout-Klasse schreiben könnte, die UiBuilder erweitert und gerade Divs in der Datei ui.xml hat.

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

Irgendwelche Tipps oder Tricks werden sehr geschätzt! Und wenn ich das Boot komplett vermisst habe, lass es mich wissen.

    
brad 30.03.2010, 22:56
quelle

3 Antworten

8

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

Platzieren Sie in Ihrer .ui.xml einen ähnlichen Code wie -

%Vor%

In der entsprechenden .java-Klasse haben Sie Methoden wie setHeader (), setSecondaryNav (), setMenu (), setFooter () usw.

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.

    
Sripathi Krishnan 31.03.2010, 08:17
quelle
3

Wenn Sie die Seite einfach mit Ihren eigenen divs erstellen möchten, verwenden Sie am einfachsten Divs in der UiBinder XML-Datei. Dort können Sie auch das id-Attribut wie gewohnt setzen:

%Vor%

Die von GWT zur Verfügung gestellten Layout-Panels können ebenfalls nützlich sein - vielleicht möchten Sie etwas mehr mit ihnen herumspielen und sehen, ob sie für Sie einen Wert bieten (wie etwa die Vermeidung von Cross-Browser-Problemen) .

    
Chris Lercher 30.03.2010 23:16
quelle
0

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 Obfuscation (mehrere UiBinders können eine einzige CSS-Ressource teilen)

    
Mark Renouf 30.03.2010 23:10
quelle

Tags und Links