Invisible button?

I would like to make a button that is completely invisbile, but clickable. It would be bundled into a CustomComponent with a Canvas drawing under it, z-order wise. The drawing would be modified by calling methods on it in reaction to the button click and other logic.

Currently I do a poor-man’s version of this using:

button.setStyleName(BaseTheme.BUTTON_LINK); and changing the .png icon using the setIcon method on the button. But there are several disadvantages:

  1. .png files have to be externally generated, stored, converted to Image and FileResource…
  2. A 4K .png file is transmitted, when a button graphic changes
  3. The little .png file’s resolution is quite low, looking fine at normal zoom, but looking
    bad when zoomed in, especially compared to scalable HTML5 components in Charts
  4. Button icons are static, have to be swapped out to make a change.

Wrapping an invisible button on top of dynamic graphics would solve this in a better way, allowing the assignment of button functionality to arbitrary CustomComponents. So what is the best way to make an invisible button? Is it possible with CSS theme modifications? Or make a transparent drawing as the BUTTON_LINK icon?

Perhaps a better solution would be if the framework provided button functionality to be added to arbitrary components, in much the same way that a tooltip can be added.

One solution is to use a LayoutClickListner, but that will then only work with the mouse/finger, not with the keyboard.

As you suggested, making arbitrary components clickable is probably the right approach, and this tutorial should get you on the right track with that: