Layout, setSize() and CSS

[galgefen]

have been trying GWT for several weeks now, and I find it a complete
mistery how setting a layout is supposed to work.
>From what I have seen, a widget can let his parent know his size
preferences using the setSize method. But it never works as I expect,
espcially if I use percentage size (like "20%").
Also, what supposed to happen if you specify more pixels than the
parent has ?
I can't find any documentation of setting the actual layout using size
or CSS.

Does GWT has any defined behavior for layouts, or is it just "try
until you get it right"?

Please answer if you know, as I'm sure I'm not the only one stuck on
this !

[Jason Essington]

Layout is a difficult problem, and as it turns out, it is more of an
HTML problem than a GWT problem.

First off, percentages refer to percent of parent width, so if you
have an element that you set to 20% and that element is inside of an
element that has a 50% width, The ultimate width of that element
would be 10% (or 20% of the 50%)

now, explicit widths are handled differently depending upon what the
parent is. in many cases if you set an explicit width, the item will
render at that width, but if you've got a parent that is set to hide
overflow, or to scroll and it is set to a width that is incapable of
displaying the child, it'll be clipped or shown with a scroll bar.

GWT uses the concept of Panels, Tables, and Grids to help ease layout
(all of these things ultimately become HTML tables in the end), but
you are still left to work out how you are going to specify widths if
just letting the browser have its way isn't working for you.

As far as defined behavior goes, remember that all of the layout aids
are tables, and their behavior just follows what the browser would do
with a table.

I do have to say, that there is a bit of a learning curve to getting
your layout to work like you want, but stick with it, it does become
easier.

-jason

[galgefen]

Thanks, that was fast, and actually as I suspected.

Do you have any recomendations as to using relative versus fixed
layouts (I mean "30px" vs. "30%") ?
I had some issues with relative and in many examples I see fixed, but
I read (and it makes sense) that relative is better.
Do you know what is considered "best practice" ?

> > this !- Hide quoted text -
>
> - Show quoted text -

[Fred Sauer]

On 3/8/07, Jason Essington <jason.e...@gmail.com> wrote:

Layout is a difficult problem, and as it turns out, it is more of an
HTML problem than a GWT problem.

You will also find that (with HTML and thus GWT), especially in standard (not quirks) mode, that heights are tricky things. Block elements ( i.e. "display: block" tend not to fill their parent vertically. The classic problem is you have a news paper layout of multiple columns (a table with one row and say three columns/cells), and you want each of three columns to fill the table to 100% height.

Out of the box the 100% height case appears impossible to address, but there are some really neat/funky tricks out there, from simple background images that simulate columns to CSS tricks like "padding-bottom: 10000px; margin-bottom: -10000px", although the latter has ugly focus side-effects.

To go with what Jason was saying, try to use the standard widgets in GWT (Grid, VerticalPanel, HorizontalPanel, DockPanel, etc.) to layout your page instead of trying to create specific HTML and CSS as you would in other tools. For example, if you need scroll bars, wrap your widget in a ScrollPanel. Do not attempt to change the "overflow" CSS value directly. Similarly, if you need to position widgets at exact pixel coordinates, use AbsolutePanel instead of CSS to place widgets directly. Finally, consider DOM.setStyleAttribute() as a last resort. See first if there's a API method (setWordWrap(), setCellSpacing(), setCellPadding(), etc.), then try addStyleName/removeStyleName, but limit your style sheet to real styling (colors, borders, look and feel, etc.), leave the positioning/placement of widgets to the GWT classes.

Hope this helps.

--
Fred Sauer
fr...@allen-sauer.com

[Jason Essington]

When I actually specify sizes I use fixed sizes, BUT I do it via CSS
so it can be changed without a recompile.
I actually use setStyleName, and addStyleName liberally to allow
quite a lot of control over styling, but that is absolutely just a
preference.

In most cases, I am able to just use the supplied panels, and let my
widgets fill them to whatever size they take up (no sizing specified)
and I get a reasonable layout.

Basically it amounts to, "use whatever works best for your particular
situation", and the farther along you get the better you will know
what strategy works best for your application (they tend to all be a
bit different).

Hope we haven't been too discouraging on this one, but layout is
really a try it and see sort of a thing.

-jason

[Bosco So]

To paraphrase Jason and others, layout is not a hard science. Some
tricks I use are:

1. Build a project of various combinations of panels & widgets and
inspect them in Firebug or IE Dom Inspector. That'll give you a sense
of the kind of HTML that GWT is emitting. Keep this project always
running so you can refer to it.

2. Firebug is a great tool to test layout. The latest version allows
you to change CSS on the fly and see the result. Make sure you set
plenty of styles in your panels and widgets - they're the entry point
in Firebug where you can start tweaking. Just remember to test your
beautiful tweaks in other browsers.

3. Style, style, and style with CSS. Styling performed in code is set
in stone - you can never override it; but styling with CSS classes is
simply another level of abstraction. If you have generic widgets that
are reused, give them (and their components) generic style names. When
you reuse them in a specific functional area, wrap them in a panel and
style that also. You can then make your generic widgets look totally
different depending on where it is deployed.

For example, consider a click-to-edit widget that's normally a Label
but which turns into a TextBox when you click on it. Style the Label
as "c2e-label", the TextBox as "c2e-textbox", and the whole thing as
"c2e-widget". When you use this widget in a production information
pane, wrap it in a Panel and style it "prod-info". In a user info
pane, wrap it with a Panel and style it with "user-info". Then, in
your CSS, you can make them look very different:

.prod-info .c2e-widget { ... }
.user-info .c2e-widget { ... }

You can even make the internal components look very different:

.prod-info .c2e-widget .c2e-label { ... }
.user-info .c2e-widget .c2e-textbox { ... }

Good luck.

-- bosco

On Mar 8, 1:12 pm, Jason Essington <jason.essing...@gmail.com> wrote:
> [...]

> Basically it amounts to, "use whatever works best for your particular
> situation", and the farther along you get the better you will know
> what strategy works best for your application (they tend to all be a
> bit different).
>
> Hope we haven't been too discouraging on this one, but layout is

> really a try it and see sort of a thing. [...]