ClickableCustomLayout

Flow
1

I’m writing a new UI front end to a legacy application in Vaadin. There are some features in the legacy application that generate their own XHTML and need some simple mouseclick functionality. I decided the currently-available means of doing this were not what I wanted and here’s the result. Hopefully someone else finds this useful =)

http://vaadin.com/directory#addon/clickable-custom-layout

A simple extension to CustomLayout allowing elements (

, , , etc) in the template to be marked with a “click-name” attribute. Elements marked with this attribute will cause the component to listen for mouse clicks on these elements.

Users of the ClickableCustomLayout class may register click listeners who’re notified when these elements are clicked.

This is handy when dealing with custom/legacy HTML that requires super simple click handling functionality.

It’s worth noting there are alternatives to using this add on, namely:

Anchors and URIFragmentUtility
Wrapping things in layouts that implement LayoutClickNotifier

Sometimes the alternatives are undesirable, this add-on may help.

Example template xhtml:

<div>
<h1>A title</h1>
<p>Some example text</p>
<img src="example.jpg" click-name="imageClicked"/>
<span click-name="caption">This is a clickable caption</span>
</div>

If the image or span is clicked on in the above example, listeners registered against the ClickableCustomLayout will be notified of the clicked “click-name”.

This is my first add-on. Let me know if I’ve done something horribly wrong :wink:

2


Royce
, thanks a lot for the wonderful addon – it helped me to move further to complete my task. In your source code you made the following comment, which is of interest for me:

  • Do you happen to know any good code sample of using
    URIFragmentUtility
     for this purpose? I have failed to do something simple as in Vaadin book…
  • To what I know,
    CssLayout
     becomes very slow, when one adds 10000 components to it: the server side completes fast, but it takes a minute for the browser to render the page. Do you have the same experience?
3

Glad you like it, Dmitry!

I don’t have any samples. One gotchya I’ve seen around the forums is that the URIFragmentUtility needs to be put in to the top level, main window, say during your application’s init() method. Perhaps you could post your code and I could help you find out where you’ve gone wrong?

10,000 components is alot! I’ve never needed that many… What is your use case? I’d seriously try reducing that number, but if you can’t I’ve seen suggestions in the forums to use things like the lazy load wrapper (to only load what’s visible), for example. That’d allow you to load the component in stages on the browser.

4

Just posted version 0.9.2 which reports a ClickableCustomLayoutClickEvent instead of a string to listeners. This Event object includes the X, Y position of the click along with the click-name.

5

Is it possible to recompile this plugin with Java 1.5 compatibility? Not super-critical, but as long as Vaadin is 1.5-compatible, plugins should be as well.

6

Royce, maybe you can suggest me here:

Is it possible to add absolute positioning feature to
ClickableCustomLayout
? The problem I am facing now is that I need to show the popup window in the point where the user clicked on component. I have tried different sandwiches, but it turned out that
AbsoluteLayout
can’t hold contents with undefined height
. Thanks for your comments in
this thread
 as well.

7

And few more notes concerning the event mechanism:


  • ClickableCustomLayoutClickEvent
     should somehow make friends with
    MouseEvents.ClickEvent
     (e.g. extend it): modifier key state (Alt/Ctrl/Shift) is important.

  • ClickableCustomLayout
     does not share the listeners with parent class, but maintains the independent list. This causes problems as
    AbstractComponent#getListeners()
     does not work (and in general there is no way to retrieve listeners).
8

Apologies for my absence, Dmitry! My attention has been turned away from Vaadin recently. I’m super busy with other important projects, so I’m not sure if I can make the changes you’ve requested. At least not in the next few weeks.

I’ll set aside some time in the next couple of weeks to get the code hosted somewhere so you can check it out and commit changes. It’s a really simple project, so I’m sure you’ll be able to get your head around it =)

9

Just downloaded the ClickableCustomLayout, but am stopped in my tracks by a NO CLIENT IMPLEMENTATION FOUND. Do I need to rebuild your add on to work with Vaadin 6.7.5?

Let me know and best regards,

Steve Thompson

10

Is it possible to nest these? When I had one ClickableCustomLayout being used in a component that was added into another, the outer event listener got called for a click inside the layout of the inner component rather than the inner component’s listener. That’s not terribly useful for encapsulation.

11

hello,
please some body can help me for using this addone?
how to use the template xhtml in the code and how implements the listener?
thanks for you help