0

array of checkbox to bind to the GenericForwardComposer

asked 2010-03-18 10:49:15 +0800

xnguyen gravatar image xnguyen
30 3

I'm trying to create an array of checkboxes and bind that to the GenericForwardComposer. Since the checkbox don't support arrays, I'm binding it to a grid grid from previous postings.

<grid model="@{controller.allClinicalSites}">
  <rows>
    <row self="@{each=clinicalSites}">
      <cell>
        <checkbox  label="@{clinicalSites.name}"/>
      </cell>
    </row>
  </rows>
</grid>

<button id="updateBtn" label="Update" />

In my GenericForwardComposer, how would I iterate over the checkboxes to find out which checkboxes has been checked?

public void onClick$updateBtn() {
//????
}

What's the best approach for handling an array of checkboxes?

delete flag offensive retag edit

14 Replies

Sort by ยป oldest newest

answered 2010-03-20 01:58:13 +0800

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

updated 2010-03-20 01:59:43 +0800

Hi, xnguyen
I create a sample

index.zul

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
        <window id="win" apply="ctrl.MyComposer">
                <grid model="@{win$composer.allClinicalSites}" width="300px">
                        <rows>
                                <row self="@{each=clinicalSites}">
                                        <checkbox label="@{clinicalSites.name}" forward="onCheck=onModifySelectedList"/>
                                </row>
                        </rows>
                </grid>
	<button id="updateBtn" label="Update" />
	<label id="msg"/>
        </window>
</zk>


MyComposer.java
package ctrl;

import java.util.*;

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

public class MyComposer extends GenericForwardComposer{	
	
	private List<Product> clinicalSites;
	private List<Checkbox> selectedCheckboxs;
	private Label msg;
	
	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		selectedCheckboxs = new ArrayList<Checkbox>();
		
		clinicalSites = new ArrayList<Product>();
		int num = 10;		
		for (int i = 0; i < num; i++) {
			clinicalSites.add(new Product("item" + i));			
		}		
	}
	public void onModifySelectedList(ForwardEvent event){
		Checkbox checkbox = (Checkbox) event.getOrigin().getTarget();		
		if (checkbox.isChecked()) 
			selectedCheckboxs.add(checkbox);
		else selectedCheckboxs.remove(checkbox);
	}
	public void onClick$updateBtn() {		
		StringBuilder sb = new StringBuilder();
		for (Checkbox checkbox : selectedCheckboxs) {
			sb.append(checkbox.getLabel());
			sb.append(", ");
		}
		if (selectedCheckboxs.size() > 0){
			int length = sb.length();
			sb.replace(length - 2, length, "");
		}
		msg.setValue(sb.toString());		
	}	
	
	public List<Product> getAllClinicalSites(){
		return clinicalSites;		
	}

	public class Product{
		private String _name;

		public Product(String name) {
			super();
			this._name = name;
		}

		public void setName(String name) {
			this._name = name;
		}	
		
		public String getName() {
			return _name;
		}		
	}

}

link publish delete flag offensive edit

answered 2011-08-04 18:05:58 +0800

bztom33 gravatar image bztom33
104 3

updated 2011-08-04 18:19:17 +0800

Based on above example, how can I implement a selectedAll checkbox?

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
        <window id="win" apply="ctrl.MyComposer">
                <grid model="@{win$composer.allClinicalSites}" width="300px">

                        <column  >
                        <checkbox id="selectedAllCheckBox" label="Select All"/>
                        </column>


                        <rows>
                                <row self="@{each=clinicalSites}">
                                        <checkbox label="@{clinicalSites.name}" forward="onCheck=onModifySelectedList"/>
                                </row>
                        </rows>
                </grid>
	<button id="updateBtn" label="Update" />
	<label id="msg"/>
        </window>
</zk> 

public void onCheck$selectedAllCheckBox() {
System.out.println("Attempting to select (checked) all records.");
???
}

link publish delete flag offensive edit

answered 2011-08-04 19:11:45 +0800

TonyQ gravatar image TonyQ
642
https://www.masterbranch....

Just iterate all the grid row and find all the checkbox to check it , it's very straight forward.

Reference to

ZKFiddle-Link

TestComposer.java
package j1vilk89$v1;


import java.util.*;
import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;

public class TestComposer extends GenericForwardComposer{

private List<Product> clinicalSites;
private List<Checkbox> selectedCheckboxs;
private Label msg;

private Grid mgrid;

@Override
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
selectedCheckboxs = new ArrayList<Checkbox>();

clinicalSites = new ArrayList<Product>();
int num = 10;
for (int i = 0; i < num; i++) {
clinicalSites.add(new Product("item" + i));
}
}
public void onModifySelectedList(ForwardEvent event){
Checkbox checkbox = (Checkbox) event.getOrigin().getTarget();
if (checkbox.isChecked())
selectedCheckboxs.add(checkbox);
else selectedCheckboxs.remove(checkbox);
}
public void onClick$updateBtn() {
StringBuilder sb = new StringBuilder();
for (Checkbox checkbox : selectedCheckboxs) {
sb.append(checkbox.getLabel());
sb.append(", ");
}
if (selectedCheckboxs.size() > 0){
int length = sb.length();
sb.replace(length - 2, length, "");
}
msg.setValue(sb.toString());
}

public List<Product> getAllClinicalSites(){
return clinicalSites;
}

public class Product{
private String _name;

public Product(String name) {
super();
this._name = name;
}

public void setName(String name) {
this._name = name;
}

public String getName() {
return _name;
}
}

public void onCheck$selectedAllCheckBox(CheckEvent e){
List components = mgrid.getRows().getChildren();
for(Object obj:components){
Row comp = (Row) obj;
Checkbox ck = (Checkbox) comp.getChildren().get(0);
ck.setChecked(e.isChecked());
}
}

}


index.zul
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
<window id="win" apply="j1vilk89$v1.TestComposer">
<grid id="mgrid" model="@{win$composer.allClinicalSites}" width="300px">
<columns>
<column>
<checkbox id="selectedAllCheckBox" label="Select All"/>
</column>
</columns>


<rows>
<row self="@{each=clinicalSites}">
<checkbox label="@{clinicalSites.name}" forward="onCheck=onModifySelectedList"/>
</row>
</rows>
</grid>
<button id="updateBtn" label="Update" />
<label id="msg"/>
</window>
</zk>


Or another choice is to use checkmark feature of listbox , it's a built-in feature.

You could reference to
http://www.zkoss.org/zkdemo/listbox/multiple_selection

link publish delete flag offensive edit

answered 2011-08-05 13:08:19 +0800

bztom33 gravatar image bztom33
104 3

updated 2011-08-05 13:09:28 +0800

I received this error. Please see index.zul below with minor change.

Error

org.zkoss.zul.Cell cannot be cast to org.zkoss.zul.Checkbox
Message : org.zkoss.zul.Cell cannot be cast to org.zkoss.zul.Checkbox Exception : java.lang.ClassCastException Stack :


 public void onCheck$selectedAllCheckBox(CheckEvent e){
    List components = mgrid.getRows().getChildren();
    for(Object obj:components){
      Row comp = (Row) obj;
      Checkbox ck = (Checkbox) comp.getChildren().get(0);
      ck.setChecked(e.isChecked());
   }
  }

index.zul


<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
        <window id="win" apply="pkg$.TestComposer">
                <grid id="mgrid" model="@{win$composer.allClinicalSites}" width="300px">
			<columns>
                 	        <column>
                        		<checkbox id="selectedAllCheckBox" label="Select All"></checkbox>
        	                </column>
	                </columns>


                        <rows>
                                <row self="@{each=clinicalSites}">
                                      <cell>  <checkbox label="@{clinicalSites.name}" forward="onCheck=onModifySelectedList"></checkbox></cell>
                                      <cell> <label  value="@{clinicalSites.name}" /></cell>
                                </row>
                        </rows>
                </grid>
	<button id="updateBtn" label="Update" ></button>
	<label id="msg"></label>
        </window>
</zk> 

link publish delete flag offensive edit

answered 2011-08-05 17:36:13 +0800

TonyQ gravatar image TonyQ
642
https://www.masterbranch....

updated 2011-08-05 17:37:20 +0800

your first child component in row is cell , not checkbox ,

you could get the right one for it.

Checkbox ck = (Checkbox) ((Component)comp.getChildren().get(0)).getChildren().get(0);

link publish delete flag offensive edit

answered 2011-08-08 11:55:16 +0800

bztom33 gravatar image bztom33
104 3

thanks for your help. The code works

  Checkbox ck = (Checkbox) ((Component)comp.getChildren().get(0)).getChildren().get(0); 

But it also throws an exception.

SEVERE: java.lang.IndexOutOfBoundsException: Index: 0
	at java.util.AbstractSequentialList.get(AbstractSequentialList.java:73)
	at deltaleveesspecialprojects.mainNavigation.WAListComposer.onCheck$selectedAllCheckBox(WAListComposer.java:249)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
	at java.lang.reflect.Method.invoke(Method.java:597)
	at org.zkoss.zk.ui.event.GenericEventListener.onEvent(GenericEventListener.java:92)
	at org.zkoss.zk.ui.impl.EventProcessor.process0(EventProcessor.java:192)
	at org.zkoss.zk.ui.impl.EventProcessor.process(EventProcessor.java:138)
	at org.zkoss.zk.ui.impl.EventProcessingThreadImpl.process0(EventProcessingThreadImpl.java:517)
	at org.zkoss.zk.ui.impl.EventProcessingThreadImpl.sendEvent(EventProcessingThreadImpl.java:121)
	at org.zkoss.zk.ui.event.Events.sendEvent(Events.java:318)
	at org.zkoss.zk.ui.event.Events.sendEvent(Events.java:328)
	at org.zkoss.zk.ui.AbstractComponent$ForwardListener.onEvent(AbstractComponent.java:3022)
	at org.zkoss.zk.ui.impl.EventProcessor.process0(EventProcessor.java:192)
	at org.zkoss.zk.ui.impl.EventProcessor.process(EventProcessor.java:138)
	at org.zkoss.zk.ui.impl.EventProcessingThreadImpl.process0(EventProcessingThreadImpl.java:517)
	at org.zkoss.zk.ui.impl.EventProcessingThreadImpl.run(EventProcessingThreadImpl.java:444)

link publish delete flag offensive edit

answered 2011-08-08 15:48:59 +0800

TonyQ gravatar image TonyQ
642
https://www.masterbranch....

Could you provide your example code ?

link publish delete flag offensive edit

answered 2011-08-23 11:41:43 +0800

bztom33 gravatar image bztom33
104 3

Here's the code that throws exception.

		 public void onCheck$selectedAllCheckBox(CheckEvent e){
			 try {
				    List components = leveesGrid.getRows().getChildren();
			
			    for(Object obj:components){
			      Row comp = (Row) obj;
			     // System.out.println("Checking : " + comp.getChildren().get(0).toString());
			      //Checkbox ck = (Checkbox) comp.getChildren().get(0);
			      Checkbox ck = (Checkbox) ((Component)comp.getChildren().get(0)).getChildren().get(0);
  	    	       ck.setChecked(e.isChecked());
  	    	       if (ck.isChecked()) {
	    	    	  isSelectedAllReports = true;
	    	    	  System.out.println("Selected everyting: set to " + isSelectedAllReports);
	    	    	  
	    	      }else {
	    	    	isSelectedAllReports = false; 
	    	    	System.out.println("UnSelected everyting: set to " + isSelectedAllReports);
	    	      }
			     }
		 
	    	    

			  }catch (Exception ex1) {
				  ex1.printStackTrace();
			  }
		 }

link publish delete flag offensive edit

answered 2011-08-23 12:53:45 +0800

bztom33 gravatar image bztom33
104 3

Also, when I checked the selectAllBox, Only the first page get selected on a grid with paging enable. Is there a way to automatically SELECT everything?

link publish delete flag offensive edit

answered 2011-08-23 13:38:29 +0800

TonyQ gravatar image TonyQ
642
https://www.masterbranch....

Using listbox to handle it for such a complicated case. :P


There's a listbox#selectAll() method you could use.

http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/Listbox.html
http://www.zkoss.org/zkdemo/listbox/multiple_selection

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-03-18 10:49:15 +0800

Seen: 2,346 times

Last updated: Aug 14 '13

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