GWT + FlowPanel + CSS = Tableless

[Zé Vicente]

Hello All,

I am currently developing an application with GWT. It has all I need
in order to create a smart/dynamic user interface. But I just would
like to start a discussion about the usage of Grid, FlexTable,
Vertical Panel, HorizontalPanel and all other component in GWT that
generates after the compilation HTML Table structures. When I started
my developing I did use a lot those components. But today, I can
create my layout organization only using the FlowPanel component which
generates a HTML <div>. By using FlowPanel and CSS I can build my
layout and place my fields, images, links where I want.

Now I only use GRID, FlexTable when I really want to display a search
result. That is the goal of Tableless right?

This is my feedback:

I found out that is much more easy and fast to use FlowPanel + CSS to
build layouts than any other GWT components. I only use GRID,
FlexTable and similar when I am displaying a real "Grid".
I chose FlowPanel to organize my layout because it generates after the
compilation a <div> element. If I add CSS to it, I can do whatever I
want with my layout without changing the Java code.

What I expect from the community:

1. I would appreciate if you can share your experience in terms of
layout organization with GWT and the usage of Grid, FlexTable,
Vertical Panel, HorizontalPanel components in your code.
2. Are there others developers with similar strategy: FlowPanel + CSS?
3. Does anyone know if GWT can be faster if it has to build a layout
with less <table> tags?

Thank you in advance.
José Vicente

[Thomas Broyer]

On 18 fév, 11:44, Zé Vicente wrote:
>
> This is my feedback:
>
> I found out that is much more easy and fast to use FlowPanel + CSS to
> build layouts than any other GWT components. I only use GRID,
> FlexTable and similar when I am displaying a real "Grid".
> I chose FlowPanel to organize my layout because it generates after the
> compilation a <div> element. If I add CSS to it, I can do whatever I
> want with my layout without changing the Java code.
>
> What I expect from the community:
>
> 1. I would appreciate if you can share your experience in terms of
> layout organization with GWT and the usage of Grid, FlexTable,
> Vertical Panel, HorizontalPanel components in your code.

VerticalPanel is useful only in very rare cases. In most cases, you
just add your widgets to a FlowPanel, as most widgets are made with a
block-level root element.

To reduce the number of classes used in our code (and thus the output
size), we only use Grid (not even a single HorizontalPanel), and in
one occasion a FlexTable (because we're using a colspan, but replacing
it with an HTMLPanel or some other widget is on my TODO list).

For our Grids, we're almost always using table-layout:fixed, which
renders much faster on IE (we unfortunately *have* to support IE6 :'-
( ).

In some cases, we're using float:left and float:right on widgets added
to a FlowPanel where a GWT beginner would have put a Grid or
HorizontalPanel.

Finally, we've built a SpanPanel instead of using display:inline on a
FlowPanel (just a matter of taste; might also be a bit faster, dunno)
and we make use of InlineLabel and InlineHTML (we had them before they
were added to GWT, and happily switched to the new ones as soon as
they became available)

> 2. Are there others developers with similar strategy: FlowPanel + CSS?

We still have quite a lot of tables (mostly DecoratorPanels, Trees and
Grids), but yes.

Yahoo! UI's strategy is far better and I'd love to have the same kind
DOM behind similar GWT widgets, but they might not play as well as GWT
in old browsers (IE6, I'm looking at you).

> 3. Does anyone know if GWT can be faster if it has to build a layout
> with less <table> tags?

Sure!
(less elements created, and browsers tend to render DIVs and SPANs
faster than TABLEs; except maybe IE6 provided you're using table-
layout:fixed)

[Geraldo Lopes]

José Vicente,

Please read this:

http://meyerweb.com/eric/thoughts/2009/02/17/wanted-layout-system/

Hope this helps,

Geraldo

[ashutosh seth]

Hi all

 I am currently developing an application with GWT. It has all I need

 in order to create a smart/dynamic user interface.i m confused about using layout.

when i used Flow panel+CSS , HTML<div>i think  not compatible to all browser and if i used   FlexTable,

Vertical Panel, Horizontal Panel etc what is impact of the performance.

please help me

Thanks & Regards
Ashutosh

[logicpeters]

Excellent advice.. I went through the pain of VerticalPanel /
HorizontalPanel (and some of the Grid, and found that .addStyle was
not working the way it should -- because the components were being
rendered inside of TD tags instead of DIV's. A tremendous waste of
time -- although table CSS is somewhat easier for certain things such
as vertical alignment.

[CJ Wilks]

Geraldo, that Eric Meyer post is fantastic, most importantly because
he wrote it, and so perhaps people will listen and do something about
it.

Certain GWT uses of tables are clearly an abomination (e.g.
DecoratorPanel, DialogBox). There is no need to introduce a table and
9 cells, when other kits like jquery-ui's Themeroller are doing the
same thing with CSS -- for example see .ui-corner-all at
http://docs.jquery.com/UI/Theming/API#Corner_Radius_helpers

See it in action at http://jqueryui.com/themeroller/ -- fyi, since the
jquery theming api is well documented, there's no reason you can't
apply the same style classes to GWT widgets.

On the other hand, sometimes tables are the simplest tool for the job.
I am working on a GWT layout that needs to be 3 columns (33% each) at
times, and 2 columns (200px + remainder) at other times, depending on
which UI elements are present onscreen. I was trying to make it work
by applying YUI Grids but the css became too complicated. Some
browsers rendered it fine and others would push the righthand column
downscreen. More importantly the markup was full of nested divs
sprinkled with yui-gb and yui-u and yui-b and doc3 lots of other css
junk that I won't remember next week.

[El Mentecato Mayor]

Except you forgot to mention that JQuery's Themeroller doesn't display
properly on IE (not that I have anything against JQuery--a great
library, but the things you are pointing out don't look as nice or as
intended on the most popular browser, so that alone can make it
undesirable in many cases).

On Feb 20, 9:29 am, CJ Wilks <jeoffwi...@gmail.com> wrote:
> Geraldo, that Eric Meyer post is fantastic, most importantly because
> he wrote it, and so perhaps people will listen and do something about
> it.
>
> Certain GWT uses of tables are clearly an abomination (e.g.
> DecoratorPanel, DialogBox). There is no need to introduce a table and
> 9 cells, when other kits like jquery-ui's Themeroller are doing the

> same thing with CSS -- for example see .ui-corner-all athttp://docs.jquery.com/UI/Theming/API#Corner_Radius_helpers
>
> See it in action athttp://jqueryui.com/themeroller/-- fyi, since the

[Mahavir Jain]

I used GWT FlexTable.. 6 columns,8 columns, and many other combinations and formating  sometime in same table and sometime in different table.. It works perfectly for me :).. Horizontal and vertical panel also works but there is one issue related to decorator panel but it has got work-arround..

Mahavir