How can I inject raw HTML into a Tree node caption ?

Hi,

I am using ITMill 5.3.1

I would like to be able to insert some custom HTML into the Tree caption. If I use the current implementation, it escapes the HTML, and the escaped HTML appears as the caption text. I know that Label can be set to take a RAW string, but the Tree node caption cannot. Can you please give me a few pointers as to what I would need to change in the ITMill source code in Tree.java, ITree.java, etc, to allow RAW HTML to be passed through for the caption string of an individual tree node ?

Thanks
Andrew

Did a fast look. I am using Vaadin 6.1 but I guess the Tree component is somewhat the same in 5.3.1. VTree is the client side of the tree component. The inner class TreeNode is a representation of a row. it sets the caption on the first row of updateFromUIDL (row 291 in V6) by calling setText(caption); that in turn calls DOM.setInnerText(text) when it should call DOM.setInnerHTML(text) to show html. You need to override that.

Note that you could do this extension quite easily - just extend VTree on client-side with the modification Jens mentioned. Add your new VHTMLTree implementation to your custom widgetset (override both resolveWidgetType() and createWidget()) that recognizes a specific style-name - say HTMLTree. For an example, see how “select” is treated on
DefaultWidgetSet.java
. On server-side you do not have to make any modification - just say tree.addStyleName(“HTMLTree”);

Thanks Joona/Jens,

I actually did try changing exactly what you suggested before I posted - I updated setText() to use DOM.setInnerHTML(text) instead of DOM.setInnerText(text) - BUT - the text was still escaped ! - so I assumed I had made the change in the wrong place. Is there any other place in the caption where the HTML text would be escaped, while going from the server application code to the client browser ?

For example, when I did the change described above with the application code below:

Tree tree;
Object itemId;

String caption “<span style="color:red">mynode”;
tree.setItemCaption(itemId, caption);

The tree node was displayed with the text: mynode
instead of “mynode” in red text.

Any ideas ?

Thanks
Andrew

Hmm… I looked at how the label does this and it was exactly this way. Two quick checks, even if I don’t think they are to blame:

  1. Your code referenced only to Tree tree - are you sure you tested it with your custom made Tree and not with the toolkit default tree?

  2. Your code had the end tag when it should be but I guess it would only do a faulty dom tree but still turn the font red.

To make sure this is clear: if you have not modified client side code before, see the Book of Vaadin chapter about client side widgets first.

In short, you should check that you have done all the steps below:

  1. Create your subclass of VTree (or a copy of VTree) which implements the change

  2. Optional: subclass Tree (the server side component), using your own custom tag

  3. Create a widgetset (or modify the you are using) - make sure that both createWidget() and resolveWidgetType() use your custom client side class for the trees you are interested in

  4. Modify your application to use the widgetset (if a new one) in web.xml

  5. Compile the widgetset into JavaScript (and, if necessary, refresh the compiled widgetset in your IDE cache)

Once you have all this done, adding or modifying the next client side widget is quicker - much of step 3 and step 4 can be omitted.

Also, do note that if you make this modification, you should make sure you properly escape any tree labels text that may have come from the user.

Jens,

  1. I actually modified the ITMill library, and rebuilt it - that is why I am still using Tree. I have done this before successfully, when I modified TreeNode to put the icon on the right instead of the left of the caption. I double checked my changes, and asked someone else to check my changes too, so I am pretty sure the code that is running is the modified code.

  2. I checked in Firebug, and the text of the caption was: <span style=“color:red”>andrewv2</span>
    which tells me something is still escaping the caption string I pass.

  3. I noticed that ILabel inherits from HTML, but ITree.TreeNode does not. Could this have any effect ?

Thanks,
Andrew

Seems like your doing this right. As far as I see it, which one it extends should not be an issue, as you say directly to the DOM “add html here”. I guess we are on the same page on how to do it and I guess changing

private void setText(String text) {DOM.setInnerText(nodeCaptionSpan, text);}

to

private void setText(String text) {DOM.setInnerHTML(nodeCaptionSpan, text);}

should be enough - as you modify the original source code itself.

Wierd.

Jens,

I finally got it to work, by creating a custom component. Using this method, I was able to easily colour the text, and add a unique tooltip to any Tree node, using the technique here:

http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/

This ticket also relates to this issue:

http://dev.vaadin.com/ticket/3070

Thanks to all who helped :slight_smile:
Andrew

Ah. Good to hear. Just out of curiosity, what exactly was the problem. Did you get it to work by only changing the four letters in the source (Text → HTML) in setText()?

Jens,

I ended up leaving the ITMill Tree as it was, and ONLY changed the following in a copy of ITree (I called it ICustomTree), which I then added as a custom widget:

From:

        private void setText(String text) {
        	DOM.setInnerText(nodeCaptionSpan, text);
        }

To:

        private void setText(String text) {
        	DOM.setInnerHTML(nodeCaptionSpan, text);
        }

As you suggested. In the custom component it worked - in the modified ITMill Tree it didn’t. I can only assume that there was some build issue - though I can’t think what it could have been … like you said … weird :wink:

As you and others suggested though, the customized component is a better approach, rather than modifying the ITMill/Vaadin distributed source.

Thanks again,
Andrew

Yup. Seems like the build somehow got hold of the original ITree. I too think adding a new custom widget is better than modifying the original code. It is a lot easier to update the Toolkit / Vaadin jar to newer versions that way.