Display icons in Combobox using Vaadin 8.0.5

Vaadin 6 / 7 / 8
1

Hello,

I have an issue where I cannot seem to add icons to items in my combobox. Here is the code that I am using:

[code]
private Component getLanguagePicker() {
List countriesData = new ArrayList();
countriesData.add(new CountryData(“English”, Country.EN));
countriesData.add(new CountryData(“Swedish”, Country.SV));

ComboBox<CountryData> comboBox = new ComboBox<CountryData>();
comboBox.setCaption(resourceBundle.getString("combobox.country.title"));
comboBox.setItems(countriesData);
comboBox.setItemIconGenerator(new IconGenerator<CountryData>() {
    @Override
    public Resource apply(CountryData item) {
        String basepath = VaadinService.getCurrent()
                  .getBaseDirectory().getAbsolutePath();
        String flagName = null;
        switch(item.country) { // Flags from: https://www.iconfinder.com/iconsets/142-mini-country-flags-16x16px
        case EN: 
            flagName = "flag-united-kingdom";
            break;
        case SV:
            flagName = "flag-sweden";
            break;
        }
        // This path is correct
        String path = basepath + "/WEB-INF/images/" + flagName + ".png";
        return new ThemeResource(path);
    }
});
comboBox.setItemCaptionGenerator(new ItemCaptionGenerator<CountryData>() {
    @Override
    public String apply(CountryData item) {
        return item.countryName;
    }
});

//Example image that shows that the image is accessible
String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
FileResource resource = new FileResource(new File(basepath + "/WEB-INF/images/flag-sweden.png"));
Image image = new Image(VaadinService.getCurrent().getBaseDirectory().getAbsolutePath() + "/WEB-INF/images/flag-sweden.png", resource);

HorizontalLayout hLayoutLanguage = new HorizontalLayout();
hLayoutLanguage.setSpacing(true);
hLayoutLanguage.addComponents(comboBox, image);
hLayoutLanguage.setComponentAlignment(comboBox, Alignment.BOTTOM_LEFT);

return hLayoutLanguage;

}
[/code]For some reeason I cannot seem to get the “setItemIconGenerator” to work as it cannot load the images, however, the image is clearly on that path as it can be loaded using the FileSource in the end of the code. What am I doing wrong? How do you use “setItemIconGenerator” properly?

2

Hi,

I think the problem you have is with the ThemeResource. It will fetch resources relative to the theme folder, “VAADIN/themes/themename”. So in you case the path given to the ThemeResource constructor is wrong. See https://vaadin.com/docs/-/part/framework/application/application-resources.html for more info.

Hope this helps.

-Pontus

3

Hi,

Thank you for your response. I tried using FileResource instead, like I do for the example image, but it still does not seem to find the image. Can it be that the images have some wrong size that it cannot handle?

comboBox.setItemIconGenerator(new IconGenerator<CountryData>() {
    @Override
    public Resource apply(CountryData item) {
        String basepath = VaadinService.getCurrent()
                  .getBaseDirectory().getAbsolutePath();
        String flagName = null;
        switch(item.country) {
        case EN: 
            flagName = "flag-united-kingdom";
            break;
        case SV:
            flagName = "flag-sweden";
            break;
        }
        // Image as a file resource
        String path = basepath + "/WEB-INF/images/" + flagName + ".png";
        return new FileResource(new File(path));
    }
});
4 
dashboardViewCB.setItemIconGenerator((IconGenerator) item -> {
String basePath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
return new FileResource(new File(basePath + "/WEB-INF/images/" + ((ThemeBackgroundEnum) item).fileName + ".png"));
});

Same same here. When I evaluate

new FileResource(new File(basePath + "/WEB-INF/images/" + ((ThemeBackgroundEnum) item).fileName + ".png"))

I do get the RIGHT path where all my .pngs are, but chrome inspector shows http://192.168.0.54:8082/APP/connector/1/406/null/black.png 404 (Not Found)

5

I have the same issue. Probably by missing resourcehandler

6

Certain resources are so called ConnectorResources that need to be registered for a connector (typically a component) to work, and are not supported in some contexts. These resources are not available when not registered, providing an additional layer of security. They include ClassResource, FileResource and StreamResource.

The class ThemeResource is effectively a version of FileResource that does not require registration and is handled as a purely static resource, which must be located inside the theme folder.

For ComboBox icons,
#9041
 about StreamResource is really about all ConnectorResources. RadioButtonGroup and CheckBoxGroup icons seem to have the same problem (
#9536
).