Dynamic tree icon on the right

Flow
1

Hi everybody,

i’m fairly new to the Vaadin framework and i’m still learning how to use this awesome framework
I’m looking to feasible solution to solve these two problems while using the Tree component (not the treetable one)

  1. is it possible to render a tree icon on the right side ofthe node caption?
  2. also, there is a way to dynamically render different type of icons at runtime (by using a Tree renderer for example), or, set the background-image url dynamically by send a specific url parameter through java code?
    Thank you very much!
2

Hey Pippo,

You’ll probably have to use some (S)CSS and an ItemStyleGenerator.

Example:

@Override
protected void init(VaadinRequest request) {
  final VerticalLayout layout = new VerticalLayout();
  layout.setMargin(true);
  setContent(layout);

  final Object planets = new Object { new Object { "Mercury" }, new Object { "Venus" },
      new Object { "Earth", "The Moon" }, new Object { "Mars", "Phobos", "Deimos" },
      new Object { "Jupiter", "Io", "Europa", "Ganymedes", "Callisto" },
      new Object { "Saturn", "Titan", "Tethys", "Dione", "Rhea", "Iapetus" },
      new Object { "Uranus", "Miranda", "Ariel", "Umbriel", "Titania", "Oberon" },
      new Object { "Neptune", "Triton", "Proteus", "Nereid", "Larissa" } };

  Tree tree = new Tree("The Planets and Major Moons");
  for (int i = 0; i < planets.length; i++) {
    String planet = (String) (planets[i]
[0]
);
    tree.addItem(planet);

    if (planets[i]
.length == 1) {
      tree.setChildrenAllowed(planet, false);
    } else {
      for (int j = 1; j < planets[i]
.length; j++) {
        String moon = (String) planets[i]
[j]
;
        tree.addItem(moon);
        tree.setParent(moon, planet);
        tree.setChildrenAllowed(moon, false);
      }
      tree.expandItemsRecursively(planet);
    }
  }

  tree.setItemStyleGenerator(new ItemStyleGenerator() {
    @Override
    public String getStyle(Tree source, Object itemId) {
      if (itemId.equals("Mercury")) {
        return "motorcycle";
      }
      return null;
    }
  });

  layout.addComponents(tree);
}
[/i]
[/i]
[/i]
[/i]

[i]
[i]
[i]
[i]
As you can see if you inspect the Mercury item in your browser, it’s got an additional style name.

The following SCSS places a tree icon on the right side of every item in the Tree component.

.v-tree-node-caption span:after {
  content: "\f1bb";
  font-family: FontAwesome;
  position: absolute;
  right: 0;
}

And for the Mercury item we set the icon to a motorcycle.

.v-tree-node-caption-motorcycle span:after {
  content: "\f21c";
}

FontAwesome’s character codes:
https://fortawesome.github.io/Font-Awesome/cheatsheet
. Unfortunately we don’t have any setIcon method for Items yet, so you’d have to create a style for each icon that you want to show.

[/i]
[/i]
[/i]
[/i]

3

Attached screenshot.
22904.png

4

Thank you very much, it was very helpful!