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

Morfic · Accepted Answer · 2017-10-12T11:18:58.990

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);
    }
}

thank you for your help. Do you know any other vaadin solutions like this? — Anna K, Oct 12 '17 at 08:44
@AnnaK if you can describe your use case, maybe we can find some alternatives or workarounds using just standard Valo styles. — Morfic, Oct 12 '17 at 09:28
thank you :) I updated my question and send an image what I would like to achive! — Anna K, Oct 12 '17 at 09:34
@AnnaK see bottom update using regular button and a predefined Valo style, without any add-on. — Morfic, Oct 12 '17 at 11:11
It looks great thank you. But I need something that I click once I get icon in the button if I click once again I have no icon — Anna K, Oct 12 '17 at 13:14
@AnnaK I used multiple icons just to show how to and that you can change the button icon. When you don't want the icon any longer, it should be as simple as `button.setIcon(null)` :-) — Morfic, Oct 12 '17 at 13:21
I think I dont understand how it works button listener :( How can I define when button was clicked? Button buttonBig = new Button("Neue ASE", event -> event.getButton().setIcon(resource)); No it always show icon when I click on this — Anna K, Oct 12 '17 at 13:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156562/discussion-between-morfic-and-anna-k). — Morfic, Oct 12 '17 at 13:25

Vaadin 8. Resource cannot be resolved

1 Answers1