GWT und sein HTML/DOM, alternativer GWT FlowPanel
1 Kommentar(e). Veröffentlicht von Christian Ullenboom am Samstag, Juli 25, 2009.
Zum Layout von GWT-Komponenten ist es unerlässlich zu verstehen, was GWT für ein DOM erzeugt. Zum einen sind da Werkzeuge wie FireBug unerlässlich und zum Anderen kann man sich vorher schon bei http://javabyexample.wisdomplug.com/component/content/article/75.html informieren, was GWT für eine Struktur erzeugen wird.
Schnell entstehen bei GWT-Anwendungen eine Unzahl geschachtelter Tabellen. Sie sind für die Performance der Darstellung nicht unerheblich, denn wenn man das Fenster zum Beispiel in der Größe ändert, so müssen die ganzen Größeninformationen neu berechnet werden.
Um das HTML schlank zu halten, lässt sich auf alternative Container zurückgreifen. Wer zum Beispiel horizontal oder vertikal anordnen will, greift sofort zum HorizontalPanel bzw. VerticalPanel. Doch zur Umsetzung setzt eben GWT eine Tabelle ein. Wenn man nur zum Beispiel eine Zeile wie “blal@googlemail.com | My favorites | Profile | Sign out” aufbauen möchte, ist das HorizontalPanel unnötig und schwergewichtig. Es bietet sich an, eine neue Panel-Klasse zu nutzen, etwa wie sie etwa http://blog.sudhirj.com/2009/05/vertical-and-horizontal-flow-panels-in.html vorstellt. Etwas komprimiert:
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Widget;
public class HorizontalFlowPanel extends FlowPanel
{
@Override
public void add( Widget w )
{
w.getElement().getStyle().setProperty( "display", "inline" );
super.add( w );
}
}
Diese Implementierung führt nur zu einem <div>-Block statt einer <table>.
Labels: GWT
Bald neu: UiBinder
Ja die abstrakte Interface-Deklaration mit Widgets ist eines der Problemfelder von GWT. Ich war noch nie ein Freund der abstrakten "programmierten" Deklaration in GWT. Meiner Meinung ist die oft zu umständlich und ineffizient verglichen mit direktem Html(Liegt evtl. auch an meiner liebe zum Html ;)
Das hat aber nun auch das Google Wave Team erkannt und mit dem GWT-Team eine neue Lösung entwickelt -> UiBinder. Das kombiniert die Vorzüge der Widgets mit purem Html.
http://code.google.com/p/google-web-toolkit-incubator/wiki/UiBinder
Mit UIBinder lässt sich (wieder) direkt HTML zur Definition einsetzen. Einziges Manko: Leider in der aktuellen GWT-Version (1.7) noch nicht enthalten :)
Siehe dazu aber auch folgendes Video.
Sehr empfehlenswert!
Es handelt um die Probleme und Lösungen in größeren GWT-Implementationen (konkret Google Wave)
http://code.google.com/events/io/sessions/GoogleWavePoweredByGWT.html
Cheers,
Matthias