How to format custom TreeItems with images?

[dhoffer]

I have a GWT Tree that contains custom TreeItems that consist of a
leading image (ImageResource), then some text, and followed with
another optional image. The later image is a URL not an ImageResource
because the contents are dynamic at runtime.

Currently I'm building some custom SafeHtml just appending three
SafeHtml's together. I use ImageResourceRenderer for the first image,
then SimpleSafeHtmlRenderer for the text, and then Template for the
URL image.

However the results are not good. The first image is top aligned
instead of centered with the text and the selection rectangle. (I
haven't even gotten to testing with the trailing image yet.)

I do have my custom HTML wrapped in a span with custom class name so I
can configure with CSS but I have a feeling I'm not doing this the
right way.

How can I have better control over the vertical alignment of things?
Specifically the ImageResource needs to be centered.

-Dave

[Chris Price]

I've not used the Tree myself but inline-block might be of use here e.g.

http://jsfiddle.net/2uQB3/1/

If that is what you're after then GWT provides the inline-block rule
correctly browser-sniffed -

http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/resources/client/CommonResources.java

> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>

[Jim Douglas]

Instead of constructing your TreeItems with html, write your own
custom tree item renderer and pass it in to the TreeItem(Widget)
constructor.

http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/user/client/ui/TreeItem.html

My TreeItemRenderer extends HorizontalPanel, but you can use any
Widget that works for you.

[dhoffer]

Jim,

I'm trying to replace with a HorizontalPanel that contains 3 widgets
but I'm running into problems.

1. It's not possible to call setVerticalAlignment because the input
parameter has no public values so I'm calling
DOM.setStyleAttribute(td1, "verticalAlign", "middle") on each widget
added to the panel and that seems to work fine.
2. However I need to set the horizontal alignment of the 3rd widget to
be right aligned so I'm calling DOM.setStyleAttribute(td3, "align",
"right") but it's being ignored. Firebug indicates that the td align
is always 'left'. How do I set this to 'right'?
3. With this change to use a HorizontalPanel there is no visual
indicator that a tree item is selected? How can I make the item look
selected? At least the middle text part?

If I can solve items 2 & 3 I think this will work well.

-Dave

On Mar 22, 5:01 pm, Jim Douglas <jdou...@basis.com> wrote:
> Instead of constructing your TreeItems with html, write your own
> custom tree item renderer and pass it in to the TreeItem(Widget)
> constructor.
>

> http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/g...

[Jim Douglas]

Not sure if this helps, but here's the skeleton for my
TreeItemRenderer:

public class TreeItemRenderer extends HorizontalPanel implements
HasText
{
private final Image image = new Image();
private final HTML label = new HTML();

public TreeItemRenderer()
{
setVerticalAlignment(ALIGN_MIDDLE);
add(image);
add(label);
addEditListeners(getElement());
addStyleName("BBjTree-node");
}
}

I override setSelected() in my TreeItem class with:


@Override
public void setSelected(boolean selected)
{
super.setSelected(selected);
if (selected)
{
addStyleName("tree-selected");
}
else
{
removeStyleName("tree-selected");
}
updateRenderer();
setStyleName(getRenderer().getLabelWidget().getElement(),
"gwt-TreeItem-selected", selected);