How to get selected listitem when user clicks a button in a listitem?

asked 2010-09-07 02:35:11 +0800

140 ● 4

I have a listbox showing listitems where each listitem has a "Show" Button:

<listbox apply="...">
    ...
    <listitem self="@{each=result}" value="@{result}">
        <listcell>
            <button id="showButton" label="Show" />
        </listcell>
        <listcell label="@{result.msg}" />
    </listitem>
</listbox>

I can listen on the onClick event of the showButton in the Composer class with:
public void onClick$showButton()

but that does not tell me which button is actually clicked. Is there a simple way to detect which button from my list is clicked?

Any help is greatly appreciated.
Thank you
Dieter

delete flag offensive retag edit

5 Replies

Sort by » oldest newest

answered 2010-09-07 04:13:58 +0800

vergereau
105 ● 1 ● 2

Hello Dis,

When you catch the event in your method onClick$showButton(Event evt) you can retrieve in evt the source of the event (--> your button) and so you can use get parent to have the lisitem and to get your value.
But beaware of unique ID (showbutton), in your case you could have an error.

Another possibility :
I think you should forward the event of button, add an attribute on button in order to have the id of result and then

 <button  label="Show" onClick="mycontroller.Show(self)"><attribute name="ID" value="@result.id"/> </button>
or 
<button  label="Show" forward="..."><attribute name="ID" value="@result.id"/> </button>

Regards, V

link publish delete flag offensive edit

answered 2010-09-07 07:09:42 +0800

robertpic71
1275 ● 1

Here is a working example:

With an generic composer you have to remove to onClick code (interpreted by bash-java!).
and add inside your composer:

public void onClick$show(ForwardEvent event) {
     Person person = (Person) event.getTarget().getAttribute("value");
     option.value = person.getFullName();
}

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./mywin"?>
<window id="mywin" border="none">
Show: 
	<zscript>
	//init example data beans
	import org.zkoss.zkdemo.userguide.Person;
	List persons = new ArrayList();
	persons.add(new Person("Balu", "Haben"));
	persons.add(new Person("Sadira", "Jobs"));
	persons.add(new Person("Dacey", "Obert"));
	persons.add(new Person("Gabby", "Taffy"));
	Person selected = persons.get(0);		
        void onClick(Event event) {
              Person person = (Person) event.getTarget().getAttribute("value");
              option.value = person.getFullName();
        }
        </zscript>
	Option:<label id="option"/>
	<listbox model="@{persons}" selectedItem="@{selected}" rows="5">
		<listhead >
				<listheader label="Firstname"/>
                                <listheader label="Lastname"/>	
                                <listheader />	 
		</listhead>
		<listitem self="@{each=person}">
                    <listcell label="@{person.firstName}"/>
                    <listcell label="@{person.lastName}"/>
                     <listcell>
                         <button id="show" label="show" onClick="onClick(event)" value="@{person}"/>
                    </listcell> 
                </listitem>
	</listbox>
</window>

/Robert

link publish delete flag offensive edit

answered 2010-09-07 07:42:14 +0800

dis

140 ● 4

Thank you very much for your help. It works now. I wrote the folllowing onClick handler which accesses the value object of the listitem:

    public void onClick$showButton(Event evt) {
        if(evt instanceof ForwardEvent){
            Event origEvent = ((ForwardEvent) evt).getOrigin();
            Component button = origEvent.getTarget();
            Listitem li = (Listitem) button.getParent().getParent();
            Object value = li.getValue();

            // continue with business logic
        }
    }

By the way, I dont have any troubles with the uniqueness of the IDs.

- Dieter

link publish delete flag offensive edit

answered 2010-09-07 09:15:48 +0800

robertpic71
1275 ● 1

>> By the way, I dont have any troubles with the uniqueness of the IDs.
Yes, the databinder handle this issue. The databinder creates a template and creates/copies unqiue items for you - with the correct event-listeners.

Quite nice :-) No need for anonym listener classes, final variables ...

/Robert