ZK - Open Source Ajax Java Framework

@Composite(name="testcomposite")
public class TestComposite extends Textbox implements IdSpace {
	private String someProp;
	
	public TestComposite() {
		
	}

	public String getSomeProp() {
		return this.getValue(someProp);
	}
	public void setSomeProp(String someProp) {
		this.setValue(someProp)
	}
}

<testcomposite someProp="@bind(vm.selected.website)" />

<div id="EmailDiv">	
		<emailDualListbox id="dualLBox" candidateList="@bind(vm.candidateEmailDualBox)" chosenList="@bind(vm.chosenEmailDualBox)" >
			<attribute name="onAfterEdit"><![CDATA[
				alert("new title is: "+event.candidateList);
				alert("new title is: "+event.chosenList);
			]]></attribute>
		</emailDualListbox>
</div>

	public static final String ON_AFTER_EDIT = "onAfterEdit";

	public class AfterEditEvent extends Event{

		private static final long serialVersionUID = 7283694297879164498L;

		public AfterEditEvent() {
			super(ON_AFTER_EDIT, EmailDualListbox.this);
		}
		
		public List<CodeExtraInfoVo> getCandidateList(){
			return new ArrayList<CodeExtraInfoVo>(candidateModel);
		}

		public List<CodeExtraInfoVo> getChosenList() {
			System.out.println("dddddddd");
			return new ArrayList<CodeExtraInfoVo>(chosenModel);
		}

<emailDualListbox id="dualLBox" candidateList="@bind(vm.candidateEmailDualBox)" chosenList="@bind(vm.chosenEmailDualBox)" >
<button label="Store" onClick="@command('StoreDB')"/>

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

<zk>

<window border="none" width="100%" height="100%" xmlns:w="client" >
	<include id="includeStyle" src="/style/default.zul" ></include>
	<borderlayout width="100%" height="100%" vflex="true">




		<center border="normal" flex="true"  class="center" style="overflow:auto; background: white" autoscroll="true"
		apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('es.migou.myamp.fe.myamp.CreateAmpVm')" 
		form="@id('fx') @save(vm.codeVo , before='save' )">

			<vlayout spacing="2%" style="overflow:auto; background: white">

				<div id="msgAreaRememberWindow" visible="@load(vm.isVisibleMessageArea)" >
					<label value="@load(vm.messageArea)" style="color : #FF0000; font-style:italic;font-size:15px;"></label>
				</div>

				<div align="left">
					<label value="${labels.newAmp.main.infoTxt}" style="font-size: 15px;"></label>				
				</div>




				<groupbox id="EmailGroup" mold="3d" closable="true" width="50%" open="false"> 
					<caption image="/images/icon_email.png" label="Email" ></caption>
						<div id="EmailDiv">	
							<emailDualListbox id="dualLBox" candidateList="@bind(vm.candidateEmailDualBox)" chosenList="@bind(vm.chosenEmailDualBox)" >
								<attribute name="onChoose"><![CDATA[
										alert("new title is: "+event.candidateList);
										alert("new title is: "+event.chosenList);
									]]></attribute>
							</emailDualListbox>
						</div>
				</groupbox>





				<vlayout>
					<button label="Guardar" onClick="@command('save')"></button>
					<button label="Atrás" onClick="@command('goToWelcome')" ></button>				
				</vlayout>

			</vlayout>



		</center>

		<east width="5%" border="normal" flex="true" vflex="min" >


		</east>

		<south border="normal" class="footer" size="45px">
			<include src="/footer/footer.zul"></include>
		</south>

	</borderlayout>


</window>


</zk>

package es.migou.myamp.fe.myamp;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;

import org.apache.log4j.Logger;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.util.resource.Labels;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.util.Clients;

import es.migou.myamp.be.myamp.MyAmpLocator;
import es.migou.myamp.be.myamp.service.code.CodeServiceRemote;
import es.migou.myamp.be.myamp.vo.code.CodeExtraInfoVo;
import es.migou.myamp.be.myamp.vo.code.CodeVo;
import es.migou.myamp.be.myamp.vo.enumerates.CodeTypeEnum;
import es.migou.myamp.fe.vo.ComboVo;


public class CreateAmpVm
{
	private static final Logger log = Logger.getLogger(CreateAmpVm.class);
	private MyAmpLocator locator;
	
	
	private CodeVo codeVo;
	private String messageArea;
	private Boolean isVisibleMessageArea;
	
	private List<ComboVo> codeTypeList;
	private ComboVo selectedCodeType;

	
	private List<CodeExtraInfoVo> candidateEmailDualBox;
	private List<CodeExtraInfoVo> chosenEmailDualBox;
	
	
	 @Init(superclass=true)
	 public void init()
	 {
		locator=MyAmpLocator.getInstance();
		codeVo=new CodeVo();
		messageArea="";
		isVisibleMessageArea=false;
		this.loadCodeTypeList();
		selectedCodeType=new ComboVo();
		this.loadEmailDualList();
		
	 }
	
	@Command("goToHome")
    public void goToWelcome(){
		log.debug("[CreateAmpVm - goToHome] - redirect:/welcome.zul");
		Executions.sendRedirect("/welcome.zul");
        
    }
	
	@NotifyChange({"selectedCodeType"})
	@Command("onSelectCodeType")
    public void onSelectCodeType()
	{
		log.debug("[CreateAmpVm - onSelectCodeType] - init");
		log.debug("[CreateAmpVm - onSelectCodeType] - selectedCodeType:"+selectedCodeType.getCode());
		
		if (CodeTypeEnum.ADDRESS_BOOK.toString().equals(selectedCodeType.getCode())){
			Clients.evalJavaScript("jq('$personalInfoDiv').hide().slideDown(1000);");
			Clients.evalJavaScript("jq('$professionalInfoDiv').show().slideUp(1000);");
			this.loadCodeTypeList();
				
		}else if(CodeTypeEnum.VCARD_COMPANY.toString().equals(selectedCodeType.getCode())){
			Clients.evalJavaScript("jq('$personalInfoDiv').show().slideUp(1000);");
			Clients.evalJavaScript("jq('$professionalInfoDiv').hide().slideDown(1000);");
		
		}else if(CodeTypeEnum.VCARD_PROFESIONAL.toString().equals(selectedCodeType.getCode())){
			Clients.evalJavaScript("jq('$personalInfoDiv').hide().slideDown(1000);");
			Clients.evalJavaScript("jq('$professionalInfoDiv').hide().slideDown(1000);");
		}
		
        
    }
	
	
	
 
	@NotifyChange({"isVisibleMessageArea", "messageArea"})
	@Command("save")
    public void save()
	{
		long T1=System.currentTimeMillis();
		log.debug("[CreateAmpVm - save] -INIT ");
		isVisibleMessageArea=true;
		
		try{
			log.debug("[CreateAmpVm - save] - codeVo: "+codeVo);
			log.debug("[CreateAmpVm - save] - Creating codeVo...");
			
			log.debug("[CreateAmpVm - save] - candidateEmailDualBox:"+candidateEmailDualBox);
			log.debug("[CreateAmpVm - save] - chosenEmailDualBox:"+chosenEmailDualBox);
			
//			CodeServiceRemote codeService = locator.getCodeService();
//			codeService.createCode(codeVo);
			messageArea=Labels.getLabel("newAccount.suscess.000");
			
		}catch (Exception ex){
			log.error("[CreateAmpVm - save] - Error:",ex);
			messageArea=Labels.getLabel("general.error.001");
	
		}finally{
			log.debug("[CreateAmpVm - save] - isVisibleMessageArea:"+isVisibleMessageArea);
			log.debug("[CreateAmpVm - save] - messageArea:"+messageArea);
			log.debug("[CreateAmpVm - save] - Finish Timing:"+(System.currentTimeMillis()-T1));	
		}
    }

	
	
	public CodeVo getCodeVo() {
		return codeVo;
	}

	public void setCodeVo(CodeVo codeVo) {
		this.codeVo = codeVo;
	}

	public String getMessageArea() {
		return messageArea;
	}

	public void setMessageArea(String messageArea) {
		this.messageArea = messageArea;
	}

	public Boolean getIsVisibleMessageArea() {
		return isVisibleMessageArea;
	}

	public void setIsVisibleMessageArea(Boolean isVisibleMessageArea) {
		this.isVisibleMessageArea = isVisibleMessageArea;
	}

	
	public void loadEmailDualList()
	{
		candidateEmailDualBox=new ArrayList<CodeExtraInfoVo>();
		chosenEmailDualBox=new ArrayList<CodeExtraInfoVo>();
		
		long uuid=0;
		CodeExtraInfoVo codeExtraInfoVo = null;

		codeExtraInfoVo = new CodeExtraInfoVo();
		codeExtraInfoVo.setIdCode(uuid++);
		codeExtraInfoVo.setSubcategory("Email");
		codeExtraInfoVo.setValue(uuid+"ss@hotmail.com");
		candidateEmailDualBox.add(codeExtraInfoVo);

		codeExtraInfoVo = new CodeExtraInfoVo();
		codeExtraInfoVo.setIdCode(uuid++);
		codeExtraInfoVo.setSubcategory("Email");
		codeExtraInfoVo.setValue(uuid+"sxxxxxxxdsds@hotmail.com");
		candidateEmailDualBox.add(codeExtraInfoVo);
		System.out.println("loadEmailDualList - FINISH");
	}
	
	
	
	public void loadCodeTypeList()
	{
		System.out.println("loadCodeTypeList");
		List<ComboVo> codeTypeListAux=new ArrayList<ComboVo>();
		Collection<String> codeTypeEnumList=CodeTypeEnum.literals();
		Iterator<String> ite=codeTypeEnumList.iterator();
		while(ite.hasNext())
		{
			String code=ite.next();
			ComboVo comboVo=new ComboVo(code , Labels.getLabel("CodeTypeEnum."+code));
			codeTypeListAux.add(comboVo);
		}
		this.codeTypeList =codeTypeListAux;
		
	}


	
	public List<ComboVo> getCodeTypeList() {
		return codeTypeList;
	}

	public void setCodeTypeList(List<ComboVo> codeTypeList) {
		this.codeTypeList = codeTypeList;
	}

	public ComboVo getSelectedCodeType() {
		return selectedCodeType;
	}

	public void setSelectedCodeType(ComboVo selectedCodeType) {
		this.selectedCodeType = selectedCodeType;
	}

	public List<CodeExtraInfoVo> getCandidateEmailDualBox() {
		return candidateEmailDualBox;
	}

	public void setCandidateEmailDualBox(List<CodeExtraInfoVo> candidateEmailDualBox) {
		this.candidateEmailDualBox = candidateEmailDualBox;
	}

	public List<CodeExtraInfoVo> getChosenEmailDualBox() {
		return chosenEmailDualBox;
	}

	public void setChosenEmailDualBox(List<CodeExtraInfoVo> chosenEmailDualBox) {
		this.chosenEmailDualBox = chosenEmailDualBox;
	}


	
	 
	
}

<!-- View of customized component DualListbox -->

<vlayout vflex="true" hflex="true">
	<zscript><![CDATA[
		String imgPath = "/images/composite/emailDualList";
	]]></zscript>
	
	<space spacing="2%"></space>
	<hlayout>
		<vlayout hflex="1"></vlayout>
	
		<label  value="Email"></label>
		<textbox hflex="1" id="codeInpt" value="" ></textbox>
		<textbox hflex="1" id="cods" value="" ></textbox>
		<button id="add" label="Add" image="${imgPath}/icon_add_email.png"
        	hoverImage="${imgPath}/icon_add_email_hover.png" style="cursor:pointer" ></button>
        <vlayout hflex="1"></vlayout>
	</hlayout>


	<hlayout vflex="true" hflex="true"  spacing="2%">
		<listbox id="candidateLb" vflex="true" hflex="true" multiple="true" emptyMessage="No items match your search">
			<listhead>
				<listheader hflex="min"></listheader>
				<listheader hflex="min" label="Tipo"></listheader>
				<listheader hflex="min" label="Email"></listheader>
			</listhead>
			<template name="model">
				<listitem>
					<listcell image="${imgPath}/icon_email.png"></listcell>
					<listcell label="${each.subcategory}"></listcell>
					<listcell label="${each.value }"></listcell>
				</listitem>
			</template>
		</listbox>
		<vbox  vflex="true" spacing="10px" align="center" pack="center">
			<image style="cursor:pointer" id="chooseAllBtn" src="${imgPath}/rightrightarrow_g.png" ></image>
			<image style="cursor:pointer" id="chooseBtn" src="${imgPath}/rightarrow_g.png" ></image>
			<image style="cursor:pointer" id="removeBtn" src="${imgPath}/leftarrow_g.png" ></image>
			<image style="cursor:pointer" id="removeAllBtn" src="${imgPath}/leftleftarrow_g.png" ></image>
		</vbox>
		<listbox id="chosenLb" vflex="true" hflex="true" width="380px" multiple="true" emptyMessage="Dont select Any items">
			<listhead>
				<listheader hflex="1"></listheader>
				<listheader hflex="1" label="Tipo"></listheader>
				<listheader hflex="3" label="Email"></listheader>
			</listhead>
			<template name="model">
				<listitem>
					<listcell image="${imgPath}/icon_email.png"></listcell>
					<listcell label="${each.subcategory}"></listcell>
					<listcell label="${each.value }"></listcell>
				</listitem>
			</template>
		</listbox>
	
		<vbox spacing="10px">
			<image style="cursor:pointer" id="topBtn" src="${imgPath}/upuparrow_g.png" ></image>
			<image style="cursor:pointer" id="upBtn" src="${imgPath}/uparrow_g.png" ></image>
			<image style="cursor:pointer" id="downBtn" src="${imgPath}/downarrow_g.png" ></image>
			<image style="cursor:pointer" id="bottomBtn" src="${imgPath}/downdownarrow_g.png" ></image>
		</vbox>
	</hlayout>

</vlayout>

package es.migou.myamp.fe.composite;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.LinkedHashSet;
import java.util.List;
import java.util.Set;

import org.zkoss.composite.Composite;
import org.zkoss.composite.Composites;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.IdSpace;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Div;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Listbox;

import es.migou.myamp.be.myamp.vo.code.CodeExtraInfoVo;



@Composite(name="emailDualListbox")
public class EmailDualListbox extends Div implements IdSpace {
	/**
	 * 
	 */
	private static final long serialVersionUID = 5183321186606483396L;
	
	@Wire
	private Listbox candidateLb;
	@Wire
	private Listbox chosenLb;

	private ListModelList<CodeExtraInfoVo> candidateModel;
	private ListModelList<CodeExtraInfoVo> chosenModel;
	
	public EmailDualListbox() {
		
		Composites.doCompose(this, null);
	}
	
	
	@Listen("onClick = #chooseBtn")
	public void chooseItem() {
		Events.postEvent(new ChooseEvent(this, chooseOne()));
	}

	@Listen("onClick = #removeBtn")
	public void unchooseItem() {
		Events.postEvent(new ChooseEvent(this, unchooseOne()));
	}

	@Listen("onClick = #chooseAllBtn")
	public void chooseAllItem() {
		for (int i = 0, j = candidateModel.getSize(); i < j; i++) {
			chosenModel.add(candidateModel.getElementAt(i));
		}
		candidateModel.clear();
	}

	@Listen("onClick = #removeAllBtn")
	public void unchooseAll() {
		for (int i = 0, j = chosenModel.getSize(); i < j; i++) {
			candidateModel.add(chosenModel.getElementAt(i));
		}
		chosenModel.clear();
	}

	@Listen("onClick = #topBtn")
	public void top() {
		int i = 0;
		Iterator<CodeExtraInfoVo> iterator = new LinkedHashSet<CodeExtraInfoVo>(chosenModel.getSelection()).iterator();
		while (iterator.hasNext()) {
			CodeExtraInfoVo selectedItem = iterator.next();
			chosenModel.remove(selectedItem);
			chosenModel.add(i++, selectedItem);
			chosenModel.addToSelection(selectedItem);
		}
	}

	@Listen("onClick = #upBtn")
	public void up() {
		Set<CodeExtraInfoVo> selected = chosenModel.getSelection();
		if (selected.isEmpty())
			return;
		int index = chosenModel.indexOf(selected.iterator().next());
		if (index == 0 || index < 0)
			return;
		CodeExtraInfoVo selectedItem = chosenModel.get(index);
		chosenModel.remove(selectedItem);
		chosenModel.add(--index, selectedItem);
		chosenModel.addToSelection(selectedItem);

	}

	@Listen("onClick = #downBtn")
	public void down() {
		Set<CodeExtraInfoVo> selected = chosenModel.getSelection();
		if (selected.isEmpty())
			return;
		int index = chosenModel.indexOf(selected.iterator().next());
		if (index == chosenModel.size() - 1 || index < 0)
			return;
		CodeExtraInfoVo selectedItem = chosenModel.get(index);
		chosenModel.remove(selectedItem);
		chosenModel.add(++index, selectedItem);
		chosenModel.addToSelection(selectedItem);
	}

	@Listen("onClick = #bottomBtn")
	public void bottom() {
		Iterator<CodeExtraInfoVo> iterator = new LinkedHashSet<CodeExtraInfoVo>(chosenModel.getSelection()).iterator();
		while (iterator.hasNext()) {
			CodeExtraInfoVo selectedItem = iterator.next();
			chosenModel.remove(selectedItem);
			chosenModel.add(selectedItem);
			chosenModel.addToSelection(selectedItem);
		}
	}

	/**
	 * Set new candidate ListModelList.
	 * 
	 * @param candidate is the  of candidate list model
	 */
	public void setCandidateList(List<CodeExtraInfoVo> candidate) {
		System.out.println("setCandidateList candidate:"+candidate);
		candidateLb.setModel(this.candidateModel = new ListModelList<CodeExtraInfoVo>(candidate));
		chosenLb.setModel(chosenModel = new ListModelList<CodeExtraInfoVo>());
	}
	
	public List<CodeExtraInfoVo> getCandidateList() 
	{
		System.out.println("getCandidateList");
		return new ArrayList<CodeExtraInfoVo>(candidateModel);
	}
	

	/**
	 * @return current chosen  list
	 */
	public List<CodeExtraInfoVo> getChosenList() {
		System.out.println("getChosenList");
		return new ArrayList<CodeExtraInfoVo>(chosenModel);
	}

	public void setChosenList(List<CodeExtraInfoVo> chosen) {
		chosenLb.setModel(this.chosenModel = new ListModelList<CodeExtraInfoVo>(chosen));
		
	}
	
	private Set<CodeExtraInfoVo> chooseOne() {
		Set<CodeExtraInfoVo> set = candidateModel.getSelection();
		for (CodeExtraInfoVo selectedItem : set) {
			chosenModel.add(selectedItem);
			candidateModel.remove(selectedItem);
		}
		return set;
	}

	private Set<CodeExtraInfoVo> unchooseOne() {
		Set<CodeExtraInfoVo> set = chosenModel.getSelection();
		for (CodeExtraInfoVo selectedItem : set) {
			candidateModel.add(selectedItem);
			chosenModel.remove(selectedItem);
		}
		return set;
	}

	



	// Customized Event
	public class ChooseEvent extends Event {

		private static final long serialVersionUID = -7334906383953342976L;

		public ChooseEvent(Component target, Set<CodeExtraInfoVo> data) {
			super("onChoose", target, data);
		}
		
		public List<CodeExtraInfoVo> getCandidateList(){
			System.out.println("ChooseEvent - getCandidateList");
			return new ArrayList<CodeExtraInfoVo>(candidateModel);
		}

		public List<CodeExtraInfoVo> getChosenList() {
			System.out.println("ChooseEvent - getChosenList");
			return new ArrayList<CodeExtraInfoVo>(chosenModel);
		}
	}
	
	
	
}

@Composite(name="emailDualListbox")
@ComponentAnnotation({"candidateList:@ZKBIND(ACCESS=both,SAVE_EVENT=onChoose)","chosenList:@ZKBIND(ACCESS=both,SAVE_EVENT=onChoose)"})
public class EmailDualListbox extends Div implements IdSpace {
..
}