Vaadin 8. Resource cannot be resolved

Question

I tried to add an overlay plugin. https://vaadin.com/directory/component/overlays I have a problem with image overlay. Im getting that error:

The type com.vaadin.terminal.Resource cannot be resolved. 
It is indirectly referenced from required .class file

problem is with this line:

io.setImage(res);

how can I fix it? I put icon-new.png to the class package folder and added into maven overlays plugin

My code:

final ImageOverlay io = new ImageOverlay(button);

Resource res = new ClassResource(this.getClass(), "../icon-new.png");

io.setImage(res);
io.setComponentAnchor(Alignment.TOP_LEFT); // Top left of the button
io.setOverlayAnchor(Alignment.MIDDLE_CENTER); // Center of the image
io.setClickListener(new OverlayClickListener() {
public void overlayClicked(CustomClickableOverlay overlay) {
            Notification.show("ImageOverlay Clicked!");
        }
 });
 layout.addComponent(io);
 io.setEnabled(true);

I need to achive that on the button will show up an overlay. If the user clicked on this button and added a new content something like taht show up on the button

Answer 1

That's because it's compatible with Vaadin 6 only as it's indicated in the add-on page:

If you scroll to the comments section, someone is suggesting a fork of the add-on compatible with Vaadin 7, but I could not see anything related to 8:

HI ALL! You can find version 1.1.3 for Vaadin 7.6 here: https://github.com/Haulmont/vaadin-overlays/releases

YURIY ARTAMONOV

Add-ons that are compatible with multiple Vaadin versions, indicate this explicitly, and usually (but not necessarily... dev's choice) have different version numbering, eg: 1.x for Vaadin 6, 2.x For Vaadin 7, 3.x for Vaadin 8, etc:

Either way, clicking on the link for a specific Vaadin version, will select the latest add-on release compatible with it. Or, if you select an add-on release from the drop-down, the Vaadin version compatible with it will be updated accordingly.

---

Edit after update

You can use a regular button + the predefined BUTTON_ICON_ALIGN_RIGHT Valo style. From the javadoc:

/**
 * Align the icon to the right side of the button caption. Can be combined
 * with any other Button style.
 */
public static final String BUTTON_ICON_ALIGN_RIGHT = "icon-align-right";

Please note that for the best UI result, I've used 24x24 icons, but depending on your requirements you can tweak your theme for the size you need. Also if you don't have icons and don't want to spend money or time buying or creating your own icons, you can use the existing Vaadin Font Icons (list of icons and matching java enum)

public class ButtonWithIconOnTheRightComponent extends VerticalLayout {
    public ButtonWithIconOnTheRightComponent() {
        // text filed to specify icon URL
        TextField urlField = new TextField("Icon URL", "http://files.softicons.com/download/toolbar-icons/status-icons-set-by-iconleak/png/16x16/30.png");

        // button which updates its icon using the URL specified in the text field above
        Button button = new Button("Update icon", event -> event.getButton().setIcon(new ExternalResource(urlField.getValue())));

        // use valo style to align icon to the right
        button.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT);

        // add components to the UI
        addComponents(urlField, button);
        setSpacing(true);
    }
}