Custom Widget in FlowPanel seem not to work

[AngeloSchneider]

Hi everyone,

I tried to build my own Widget (following this example: http://code.google.com/p/google-web-toolkit-doc-1-4/wiki/DevGuideCreatingCustomWidgets)

However when I place the resulting Widget into a FlowPanel, it is layouted from top to down, like in a VerticalPanel.

I'm using GWT SDK 2.3.0 right now. 

My widget is basically a VerticalPanel containing a header, a content part and a footer. When I simply add some VerticalPanel(s) to the FlowPanel the result looks the same. 

What I want to do is the following: I like to display some data in a kind of Tile, that Tile should be placable in any Panel. Perhaps you have a suggestion how to program such a Tile?

Best Regards,

    Angelo

[Jens]

However when I place the resulting Widget into a FlowPanel, it is layouted from top to down, like in a VerticalPanel.

Your widget needs some CSS rules (probably display:inline) so it does not fill up the entire width of the FlowPanel. If there is no horizontal space available FlowPanel can only layout its childs vertically (FlowPanel is only a simple <div></div> block)

-- J.

[AngeloSchneider]

What I mean is:

I place multiple of my own Widgets into the FlowPanel.

Then they don't flow from left to right but top down.

I figured the reason is, that my own Widget uses a VerticalPanel, which is internal using an HTML table.

So how do I make a Widget (via Composite) that is using an DIV instead?

[Jens]

You can still use VerticalPanel but you have to tweak it a bit so that Flowpanel can layout your widgets from left to right:

See (CSS class names represent the GWT widget):

- http://jsfiddle.net/TBWTe/ (should work even in IE6)

- http://jsfiddle.net/88v6K/ (should work in IE8 and above)

In both cases if you remove the CSS style in .verticalpanel you will see what you have now (VerticalPanels are laid out vertical inside FlowPanel).

If you want to avoid HTML tables then you could build your widget based on a FlowPanel as root and SimplePanels as "cells". But you still need some CSS to achieve what you want.

-- J.

[AngeloSchneider]

Thank you,

the two links you gave me, that is what I want to achieve! But how do I do that with GWT and not HTML? I want to add a dynamic amount of those "VerticalPanels" into the surrounding panel.

Especially I can not define a CSS style for "all" VerticalPanels ... because I don't know where else they get used as well.

Should I simply set the style attribute with java code? That sounds not right to me. Or can I "change" the class attribute for my custom panel/widget even as it is inheriting from VerticalPanel?

Regards,

Angelo

[AngeloSchneider]

Hi Jens,

thank you I figured I can use simply widget.setStylePrimaryName("someStyle"); on the Widget that I'm using inside of my composite, it works marvelous!

Thanx a lot for pointing me in the right direction.

Angelo