{"id":373,"date":"2009-07-25T07:55:00","date_gmt":"2009-07-25T07:55:00","guid":{"rendered":"http:\/\/www.tutego.de\/blog\/javainsel\/?p=373"},"modified":"2009-07-25T07:55:00","modified_gmt":"2009-07-25T07:55:00","slug":"gwt-und-sein-htmldom-alternativer-gwt-flowpanel","status":"publish","type":"post","link":"https:\/\/www.tutego.de\/blog\/javainsel\/2009\/07\/gwt-und-sein-htmldom-alternativer-gwt-flowpanel\/","title":{"rendered":"GWT und sein HTML\/DOM, alternativer GWT FlowPanel"},"content":{"rendered":"<p>Zum Layout von GWT-Komponenten ist es unerl\u00e4sslich zu verstehen, was GWT f\u00fcr ein DOM erzeugt. Zum einen sind da Werkzeuge wie <a href=\"http:\/\/getfirebug.com\/\">FireBug<\/a> unerl\u00e4sslich und zum Anderen kann man sich vorher schon bei <a title=\"http:\/\/javabyexample.wisdomplug.com\/component\/content\/article\/75.html\" href=\"http:\/\/javabyexample.wisdomplug.com\/component\/content\/article\/75.html\">http:\/\/javabyexample.wisdomplug.com\/component\/content\/article\/75.html<\/a> informieren, was GWT f\u00fcr eine Struktur erzeugen wird.<\/p>\n<p>Schnell entstehen bei GWT-Anwendungen eine Unzahl geschachtelter Tabellen. Sie sind f\u00fcr die Performance der Darstellung nicht unerheblich, denn wenn man das Fenster zum Beispiel in der Gr\u00f6\u00dfe \u00e4ndert, so m\u00fcssen die ganzen Gr\u00f6\u00dfeninformationen neu berechnet werden.<\/p>\n<p>Um das HTML schlank zu halten, l\u00e4sst sich auf alternative Container zur\u00fcckgreifen. 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 \u201cblal@googlemail.com&nbsp; | My favorites | Profile&nbsp; | Sign out\u201d aufbauen m\u00f6chte, ist das HorizontalPanel unn\u00f6tig und schwergewichtig. Es bietet sich an, eine neue Panel-Klasse zu nutzen, etwa wie sie etwa <a title=\"http:\/\/blog.sudhirj.com\/2009\/05\/vertical-and-horizontal-flow-panels-in.html\" href=\"http:\/\/blog.sudhirj.com\/2009\/05\/vertical-and-horizontal-flow-panels-in.html\">http:\/\/blog.sudhirj.com\/2009\/05\/vertical-and-horizontal-flow-panels-in.html<\/a> vorstellt. Etwas komprimiert:<\/p>\n<p>import com.google.gwt.user.client.ui.FlowPanel;<br \/>import com.google.gwt.user.client.ui.Widget;  <\/p>\n<p>public class HorizontalFlowPanel extends FlowPanel<br \/>{<br \/>&nbsp; @Override<br \/>&nbsp; public void add( Widget w )<br \/>&nbsp; {<br \/>&nbsp;&nbsp;&nbsp; w.getElement().getStyle().setProperty( &#8222;display&#8220;, &#8222;inline&#8220; );<br \/>&nbsp;&nbsp;&nbsp; super.add( w );<br \/>&nbsp; }<br \/>} <\/p>\n<p>Diese Implementierung f\u00fchrt nur zu einem &lt;div&gt;-Block statt einer &lt;table&gt;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zum Layout von GWT-Komponenten ist es unerl\u00e4sslich zu verstehen, was GWT f\u00fcr ein DOM erzeugt. Zum einen sind da Werkzeuge wie FireBug unerl\u00e4sslich und zum Anderen kann man sich vorher schon bei http:\/\/javabyexample.wisdomplug.com\/component\/content\/article\/75.html informieren, was GWT f\u00fcr eine Struktur erzeugen wird. Schnell entstehen bei GWT-Anwendungen eine Unzahl geschachtelter Tabellen. Sie sind f\u00fcr die Performance der [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[16],"tags":[],"class_list":["post-373","post","type-post","status-publish","format-standard","hentry","category-gwt"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/comments?post=373"}],"version-history":[{"count":0,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/posts\/373\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/media?parent=373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/categories?post=373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tutego.de\/blog\/javainsel\/wp-json\/wp\/v2\/tags?post=373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}