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 ?
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”);
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:
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:
Create your subclass of VTree (or a copy of VTree) which implements the change
Optional: subclass Tree (the server side component), using your own custom tag
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
Modify your application to use the widgetset (if a new one) in web.xml
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.
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.
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.
I noticed that ILabel inherits from HTML, but ITree.TreeNode does not. Could this have any effect ?
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
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:
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()?
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:
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
As you and others suggested though, the customized component is a better approach, rather than modifying the ITMill/Vaadin distributed source.
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.