ZK - Open Source Ajax Java Framework

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4854791

By: themarchoffolly

I am developing a simple custom button-like component that is clickable and displays a centered (horizontally and vertically)Label within the component area.

It first seemed a Label centered within a Div would work nicely. However, while a Div component supports onClick events and setAlign, it does not support setValign (aka setPack)...so without further wrapping the Label within a Box I can see no way to center the text. And wrapping the Label within a Box within a Div increases the size of the resulting markup, an inefficiency I would like to avoid.

Looking at Box I see its implementation supports setAlign and setPack but suppresses onClick events.

So I've gone ahead and sub-classed Box creating a new class ClickableBox. The only real modification was to override the getOuterAttrs() method so as to enable the ON_CLICK event.

That modification is working fine:

ClickableBox cb = new ClickableBox();
cb.addEventListener("onClick", new CBListener());

Question 1:

What do I need to do in order to be able to use ClickableBox declaratively in my zul pages just as <box/> is used today:

<clickablebox width="100px" height="40px"/>

Question 2:

Is there a more simple approach to enabling onClick events on Box that would allow me to use the default Box component, <box/>.

Thanks for any help you can provide.

David

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4855839

By: jumperchen

Hi David,

Here is a simple code, hope this can help you.

<hbox id="box" spacing="0" width="100%" action="onclick:zkau.send({uuid:#{box}.id,
cmd:'onClick', data:[]}, 10);" onClick='alert("Have Fun");'>
<label value="Left" />
<label value="Right"/>
</hbox>

/Jumper

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4866402

By: themarchoffolly

Pretty simple stuff when you know how. Thanks Jumper.

Since your post I've been looking into the mechanics behind zkau.send(). The Behind the Scenes: Integrating Google Maps Small Talk proves to be a useful example for understanding that.