Skip to content

Vaadin Tree: custom mimetypes icons

These notes will help you getting started in creating a tree view, linked with a FilesystemContainer, using custom icons for each mimetype, all of this using Vaadin. I find that Vaadin is a powerful tool but in some cases documentation is poor. I spent hours trying to figure out how to do this, and forums didn't help me at all.


In this brief note I show how to create a tree view, connected to the server's filesystem, using custom icons for the various files.

Tree initialisation

Let's begin with the Tree creation (excerpt of useful code):

Tree tree = new Tree();

FilesystemContainer cont = new FilesystemContainer(new File("/path/to/directory"), true);

tree.setContainerDataSource(cont); // This links the tree to the filesystem in no time. Handy.
tree.setItemCaptionPropertyId("Name"); // This tells the tree to use the file name instead of all path.
tree.setItemIconPropertyId("Icon"); // This tells the tree to show the icon too.

Now the tree is ready to be used. Note how every file is displayed with the same default blank file icon.

Where is the icon returned?

The tree gets the file's icon from the FilesystemContainer, which, in turn, gets the icon from the FileTypeResolver class.

This class has a big list of supported MimeTypes (see the source code of the class) but none of those is actually linked to a resource file.

Customise the FileTypeResolver

In order to use our own iconset we must associate manually the icons to the files, using the static function addIcon(String, Resource).

Get some images

First we must get some images and put them into the WebContent/VAADIN/themes/my-theme/... directory. I chose to use the following sub directory to easily remember where to put things:


In this example I only inserted the "doc.png" and "png.png" icons to be quicker.

Add the resources

Now let's create a new function to add all of our icons

private void initMimeTypes() {
    FileTypeResolver.addIcon("image/png", new ThemeResource("img/mimetypes/png.png"));
    FileTypeResolver.addIcon("application/msword", new ThemeResource("img/mimetypes/doc.png"));

and link it in the init() method:

protected void init(VaadinRequest request) {

This should do the trick.

Of course this can be enhanced in many ways, but the main objective was to give you a kickstart.

Hope you found this useful!