Using GWT Widgets in SmartGWT Layouts

[NestorDRod]

I've looked through the forums without finding any usable information regarding this issue, so I'll go ahead and explicitly ask the question.

I'm evaluating how much effort it would take to migrate our existing GWT application to using SmartGWT and came across this conundrum.

I have VLayout which contains a HLayout, which in turn contains two GWT widgets, a Hyperlink and an Anchor. The code looks something like this:

Label userLabel = new Label("Welcome, user");
userLabel.setAlign(Alignment.RIGHT);
userLabel.setAutoHeight();
userLabel.setWidth100();

Hyperlink link = new Hyperlink("My Profile");

Anchor anchor = new Anchor("Help");

HLayout links = new HLayout();
links.setAlign(ALignment.RIGHT);
links.setAutoHeight();
links.setWidth100();
links.setMembersMargin(10);
links.addMember(link);
links.addMember(anchor);

VLayout titlePanel = new VLayout();
titlePanel.setHeight(60);
titlePanel.setWidth100();
titlePanel.setMembersMargin(5);
titlePanel.setPadding(5);
titlePanel.addMember(userLabel);
titlePanel.addMember(links);

The problem is that the two GWT widgets end up spaced widely apart. Examining the page through Firebug, I discovered that the widgets are placed inside WidgetCanvases with default widths of 100px.

My question is: why set the width to an arbitrary value like that? What's the reasoning behind that implementation? And what solution do I have to remove the default, other than explicitly wrapping every single GWT widget I use inside a sized WidgetCanvas?

For the record, I'm using Smart GWT 3.0, GWT 2.3.0 and Firefox 3.5.3.

[Isomorphic]

First, what you've done here is put two GWT widgets into an HLayout, which will in general try to fill the space it is allocated. You seem to want them close together so you probably want an HStack.

As far as setting a default width, SmartGWT components effectively advertise several things about how they should be sized to their containers (via sizes and overflow and other settings). GWT components don't have similar semantics so there's little we can do to guess what treatment they may want.

In practice, very few such situations will come up, and when they do, generally at most one GWT component would require explicit creation of a WidgetCanvas in order to provide size settings (as is the case here).

Remember, you also have the ability to preserve the GWT parent as well and add that to a SmartGWT container, so long as, as mentioned in the FAQ, everything under that parent is GWT and not a mix of GWT and SmartGWT.

[chrylis]

SmartGWT uses a completely separate layout engine from stock GWT; it's actually a GWT wrapper around the JavaScript SmartClient library. By default, all SmartClient widgets are arbitrarily sized at 100px. Generally speaking, mixing SmartGWT and GWT widgets isn't a good idea; it's unavoidable in the case of a few special-purpose widgets (such as live maps), but it's usually better not to mix widget toolkits. (As a side note, your version of Firefox is ancient, and while Isomorphic tries quite hard to keep support for old browsers, even your GWT layouts may be starting to go stale.)

[NestorDRod]

SmartGWT uses a completely separate layout engine from stock GWT; it's actually a GWT wrapper around the JavaScript SmartClient library. By default, all SmartClient widgets are arbitrarily sized at 100px. Generally speaking, mixing SmartGWT and GWT widgets isn't a good idea; it's unavoidable in the case of a few special-purpose widgets (such as live maps), but it's usually better not to mix widget toolkits. (As a side note, your version of Firefox is ancient, and while Isomorphic tries quite hard to keep support for old browsers, even your GWT layouts may be starting to go stale.)

I'd be happy to use SmartGWT widgets throughout. Unfortunately, as far as I can see, there are no SmartGWT equivalents for anchors and hyperlinks, so I'm kind of stuck there.

Why 100px? Or more generally, why a fixed size? Are SmartClient widgets unable to handle dynamic resizing?

[NestorDRod]

First, what you've done here is put two GWT widgets into an HLayout, which will in general try to fill the space it is allocated. You seem to want them close together so you probably want an HStack.

I'll try using a HStack, but previous experimentation leads me to believe I'll staill have two widgets with 100px width separating them.

As far as setting a default width, SmartGWT components effectively advertise several things about how they should be sized to their containers (via sizes and overflow and other settings). GWT components don't have similar semantics so there's little we can do to guess what treatment they may want.

In practice, very few such situations will come up, and when they do, generally at most one GWT component would require explicit creation of a WidgetCanvas in order to provide size settings (as is the case here).

Actually, in the example above, I'd have to create two separate WidgetCanvases, one for each GWT widget.

I'm still confused as to using 100px as a default width. Was setting it to, say "auto", out of the question?

Remember, you also have the ability to preserve the GWT parent as well and add that to a SmartGWT container, so long as, as mentioned in the FAQ, everything under that parent is GWT and not a mix of GWT and SmartGWT.

So your suggestion would be to place the two widgets in a HorizontalPanel and then add that to the VLayout? Would the HorizontalPanel then be set to a default width of 100px?

[amcculley]

Yes - try using a GWT container / parent and adding the GWT widgets to that. It shouldn't take long to test.

[NestorDRod]

Using a HorizontalPanel or HStack didn't seem to fix anything. In either case, I still had to deal with the 100px default size issue.

So it seems I'm stuck with having to wrap any GWT Widget I use with an explicit WidgetCanvas.