0

passing a parameter in listbox

asked 2010-01-20 07:57:07 +0800

AllenFox gravatar image AllenFox
159 4

Hi,
I'm using a listbox to display a collection of items. How can I pass an item property value to someFunction?

<z:page>
<z:script>
    someFunction(itemId) {
        // ... 
    }
</z:script>
<z:listbox model="@{someModel}" id="itemsList">
                        <z:listitem self="@{each=item}" value="@{each}">
                            <z:listcell>
                                <z:toolbarbutton onClick="someFunction(item.id)" label="@{item.name}"/>
                            </z:listcell>
                        </z:listitem>
                    </z:listbox>
</z:page>

Thanks.

delete flag offensive retag edit

5 Replies

Sort by ยป oldest newest

answered 2010-01-20 08:13:44 +0800

madruga0315 gravatar image madruga0315 flag of Brazil
937 2 12

annotate data bind does not support this.

I see two alternative:

1. switch to ListitemRenderer instead of data binding
2. stick with data binding, then implement a TypeConverter interface for the toolbarbutton, then in the coerceToUi you create the onClick that you want

link publish delete flag offensive edit

answered 2010-01-20 14:59:30 +0800

robertpic71 gravatar image robertpic71
1275 1

updated 2010-01-20 15:01:47 +0800

You have do handle the event. The event contains the targetComponent.

Here is example (working insde the ZK Demo page) with custom-attribute (custom-attribute working since 5.0 with databinding):
Note: I store the value inside the customattribute. This could be a value of the object (here: person.firstName) or the object itself -->
value=@{value} if you want the whole object.

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./mywin"?>
<window id="mywin" border="none">
ZK name check list :
	<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 someFunction(Event event) {
            option.value = event.getTarget().getAttribute("value");
        }
        </zscript>
	Option:<label id="option"/>
	<listbox model="@{persons}" selectedItem="@{selected}" rows="5">
		<listhead >
				<listheader label="Name"/>		
		</listhead>
		<listitem self="@{each=person}">
                    <listcell>
                         <toolbarbutton onClick="someFunction(event)" label="@{person.fullName}">
                            <custom-attributes value="@{person.firstName}"/>
                          </toolbarbutton>
                    </listcell> 
                </listitem>
	</listbox>
</window>

However, you get the component form the event. You could also retrieve the "mother" toolbarbutton - getParent() --> listcell - getParent() --> listitem.

Check this thread for another example.

/Robert

link publish delete flag offensive edit

answered 2010-01-21 07:26:40 +0800

AllenFox gravatar image AllenFox
159 4

updated 2010-01-21 09:44:41 +0800

Thanks for your replies, guys. It's a pity but I cannot use zk 5.0 since we have the code in zk3.6.3 that does not work with zk5.0. Nevertheless, utilizing custom attributes seems to be very easy and intuitive.
I'm going to try solving my problem with ListitemRenderer and hope to come up with some solution.

link publish delete flag offensive edit

answered 2010-01-21 19:34:58 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

I make a sample

zul

<zk>
	<window apply="ctrl.MyComposer">
		<listbox id="lb">
			<listhead>
				<listheader label="Name" />
			</listhead>
		</listbox>
	</window>
</zk>

MyComposer.java

package ctrl;

import java.util.*;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.*;

public class MyComposer extends GenericForwardComposer {

	private Listbox lb;

	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);

		List<Person> persons = new ArrayList<Person>();
		persons.add(new Person("Balu", "Haben"));
		persons.add(new Person("Sadira", "Jobs"));
		persons.add(new Person("Dacey", "Obert"));
		persons.add(new Person("Gabby", "Taffy"));

		lb.setModel(new ListModelList(persons));

		lb.setItemRenderer(new ListitemRenderer() {
			@Override
			public void render(Listitem item, Object data) throws Exception {
				if (data == null)
					return;
				Person person = (Person) data;
				item.setId(person.getId());
				Listcell lc = new Listcell();
				Toolbarbutton tb = new Toolbarbutton(person.getName());
				tb.addEventListener("onClick", new EventListener() {
					@Override
					public void onEvent(Event evt) throws Exception {
						alert(evt.getTarget().getParent().getParent().getId());
					}
				});
				tb.setParent(lc);
				lc.setParent(item);
			}
		});
	}

	private class Person {
		private String id, name;

		public Person(String id, String name) {
			this.id = id;
			this.name = name;
		}

		public String getId() {
			return id;
		}

		public String getName() {
			return name;
		}
	}

}

link publish delete flag offensive edit

answered 2010-01-22 03:16:46 +0800

AllenFox gravatar image AllenFox
159 4

updated 2010-01-22 03:31:09 +0800

Thanks, as1225.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-01-20 07:57:07 +0800

Seen: 1,201 times

Last updated: Jan 22 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More