How to control Tree component?


I have a bit of problem on my project. I need to implement hierarchical selection list for user, which would work as described on code section below:

|item A              |  ->  |                      |
|  - item B          |      |                      |
|      - item C      |  <-  |                      |
|          - item D  |      |                      |

1. user select item B and press button "->" => item B,C,D moves to right
2. user select item C and press button "<-" => item C,D moves to left, item B stays on right
3. user select item D and press button "->" => item D moves to right,

leaving us with situation as described below:

|item A              |  ->  | - item B             |
|  - item B (grayed) |      |     - item C (grayed)|
|      - item C      |  <-  |         - item D     |
|                    |      |                      |

I’m populating tree on left with class which implements Container.Hierarchical, and most probably I control data of tree on left with similar container.

Now my question: can you tell me what would be best way to do this? Can this be done by extending Tree and overriding some methods from it? Or do I have to create custom component from scratch?

So far I have tried to extend Tree and override paintContent, but tbh, I have no clue on what paintContent does, and documentation wont help so much.

Any tips are really appreciated.


The most straightforward way to do this would be to extend CustomComponent (which is sort of a helper class when making composite components) and set (for example) a horizontal OrderedLayout as composition root. Then add the left Tree, the buttons, and the right Tree to the layout, and implement the Button.ClickListeners that move the items (the selected item and it’s children - this will probably make up the bulk of your code). Voila.

This way you do not have to make any special client-side widget, or override paintContent(), just composite existing components into a new one.

Just a quick description, hope it helps - ask if it was unclear or not what you’re looking for…

Best Regards,

p.s. Your description of what you are trying to make was exemplary!

Thanks for solution Marc,

I had something similar in mind for higher level component set. But my problem is with lower level component which I’m building for this higher level set.

I have to apologize, my question was lacking proper problem description.

I’m dealing with following requirement in my project: user can make arbitrary selection not respecting hierarchy structure, i.e. item B and item D can be selected, while item C is not… From data structure point of view this doesn’t make any sense… I would end up with children without parents on hierarchy. So the way I’m trying to deal with this requirement is to have adoptive parent for children without parent, just to keep data structure together. And those adoptive parents should be marked somehow.

So, the problem I have is with Tree component. How can I control drawing of nodes? I need to be able to change style (font color to gray, and maybe some other characteristics) for nodes which are marked “(grayed)” in my earlier description.

And sorry, forgot to log on again.

I understand that it’s not currently possible to style individual items in a tree without changing the actual Tree component to support such things.

In one project, a ComponentTree has been created, in which each item is a Component (for example a Label) that can be individually styled, but this could be pretty much work to implement.

An easy “quick-fix” would be to add icons to the items and have the icons reflect the selection state. This functionality exists right now and can easily be added to your project, but more intuitive for the user would be to style the actual text, which brings us back to coding components :confused:

Perhaps someone at our R&D department would like to comment further?