how to make imageComponent clickable

Hello again,

I am using the image component from
Incubator

and I dont have an idea if it is possible to make the image clickable…ie have the clickListener.

Any idea will be appreciated.

Thanks

Hello,

This isn’t exactly what you asked for, but I did a clickable layout and following the same basics you should be able to make the image component clickable.

Server-side ClickableVerticalLayout:

 public class ClickableVerticalLayout extends VerticalLayout implements
        VariableOwner {

    private ArrayList<ClickListener> listeners;

    public ClickableVerticalLayout() {
        super();
    }

    @Override
    public void paintContent(PaintTarget target) throws PaintException {
        super.paintContent(target);
        target.addVariable(this, "click", false);
    }

    @SuppressWarnings("unchecked")
    @Override
    public void changeVariables(Object source, Map variables) {
        super.changeVariables(source, variables);
        if (variables.containsKey("click")) {
            fireClickEvent();
        }
    }

    private void fireClickEvent() {
        if (listeners != null) {
            for (ClickableVerticalLayout.ClickListener listener : listeners) {
                listener.wrapperClicked(this);
            }
        }
    }

    public void addListener(ClickableVerticalLayout.ClickListener listener) {
        if (listeners == null) {
            listeners = new ArrayList<ClickableVerticalLayout.ClickListener>();
        }
        if (!listeners.contains(listener)) {
            listeners.add(listener);
        }
    }

    public void removeListener(ClickableVerticalLayout.ClickListener listener) {
        if (listeners != null && listeners.contains(listener)) {
            listeners.remove(listener);
        }
    }

    @Override
    public String getTag() {
        return "clickableverticallayout";
    }

    public interface ClickListener {
        public void wrapperClicked(ClickableVerticalLayout wrapper);
    }

}

Client-side VClickableLayout:

public class VClickableVerticalLayout extends VOrderedLayout {
    public static final String CLASSNAME = "v-verticallayout-clickable";

    private ApplicationConnection client;
    private String id;

    public VClickableVerticalLayout() {
        super(CLASSNAME, ORIENTATION_VERTICAL);
        DOM.sinkEvents(getElement(), Event.ONCLICK);
    }

    @Override
    public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
        super.updateFromUIDL(uidl, client);
        this.client = client;
        id = uidl.getId();
    }

    @Override
    public void onBrowserEvent(Event event) {
        if (DOM.eventGetType(event) == Event.ONCLICK) {
            client.updateVariable(id, "click", true, true);
        }
    }
}

This was done for an older version of Vaadin, so I haven’t tested with the new 6.0 release. See the reference manual for more info on creating a widgetset of your own.

HTH,
/Jonatan