Even beginner Zk

asked 2010-05-07 05:37:07 +0800

Hello

I'm looking to do an event on LISTBOX used to send the id of the selected line to another page that displays the result of his treatment received by the id and display that page below the listbox (basic principle of Ajax) but I can not with Zk is that someone can give me any advice or idea?.

Cordially

Elamarti

delete flag offensive retag edit

13 Replies

Sort by » oldest newest

12next page »

answered 2010-05-07 09:57:36 +0800

caclark
1753 ● 2 ● 5
http://clarktrips.intltwi...

Have you looked into the onSelect event? If you store the value in the listitem, you can retrieve it using the event.
Do you have code that's not working or are you just looking for initial ideas?

link publish delete flag offensive edit

answered 2010-05-07 10:26:40 +0800

elamarti
33

in fact I would use the div tag which is used to communicate with the javascript method (ajax) and display the requested page in the site chosen.Could you help me?

link publish delete flag offensive edit

answered 2010-05-07 17:51:58 +0800

robertpic71
1275 ● 1

I'm not sure about your question. Maybe ith helps if you post your background (Java JSP, Swing, VB, PHP....).

In ZK you don't have to handle the javascript/AJAX-part yourself.

Here is minimal example:

<window id="mywin" border="none">
        <intbox id="a" value="1"/>
        <intbox id="b" value="2"/>
        Sum:
        <intbox id="s" disabled="true" />
        <button id="btn" label="Calculate" onClick="s.value = a.value + b.value"/>
</window>

There are input fields (a+b), an outputfield (s) and a button (btn).
In a webapplication (jsp, php) calculate (button) would require a new page.

With ZK you have handle the event (onClick) and update the values/components. ZK updates the GUI without reloading the page by using Javascript/Ajax.

Check the demoside for this example. It's like your request: A Listbox and the selected line is showed below.

/Robert

link publish delete flag offensive edit

answered 2010-05-08 08:22:08 +0800

elamarti
33

I have already managed to achieve the exemple of the demo but what I want to make is that the text areas are located in another page that is not displayed before selecting a line in the listbox.

voici le code que j'avais déja fait :

<?page id="testZul" title=" BillPayment" cacheable="false" 
	language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
 
 
 
<zk xmlns="http://www.zkoss.org/2005/zul"
	xmlns:h="http://www.w3.org/1999/xhtml" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
 

<window title="BillPayment" border="normal" style="f">
<zk>	
<tablelayout columns="1">
	<tablechildren rowspan="2">
		
	</tablechildren>
	<tablechildren>
		<panel height="247px" title="Comptes" border="normal">
		 	<panelchildren>
		 		<separator bar="true"/>
	
	<separator></separator>
<zscript>
  import java.util.List;
  import java.util.Vector;
  import beans.Comptes;
  import dao.DaoComptes;

  //fetch all events from database
  
  
  Vector allComptes = new DaoComptes().Afficher();

  //fetch all events from database
  DaoComptes de= new DaoComptes();
  void update() {
      Comptes editCompte =(Comptes)box.selectedItem.value;
      String str = id.value;
      short v=Short.parseShort(str);
      String str2 = solde.value;
      short v2=Short.parseShort(str2);
      editCompte.setId(v);
      editCompte.setNom(nom.value);
      editCompte.setPrenom(prenom.value);
      editCompte.setAdresse(adresse.value);
      editCompte.setCategorie(categorie.value);
      editCompte.setComment(comment.value);
      editCompte.setFax(fax.value);
      editCompte.setMail(mail.value);
      editCompte.setId_fact(id_fact.value);
      editCompte.setTel(tel.value);
      editCompte.setType(type.value);
      editCompte.setNip(nip.value);
      editCompte.setSolde(v2);
      de.Modification(editCompte);

      

   //update listbox
      List children = box.selectedItem.children;
      ((Listcell)children.get(0)).label = id.value;
      ((Listcell)children.get(1)).label = nom.value;
      ((Listcell)children.get(2)).label = prenom.value;
      ((Listcell)children.get(3)).label = nip.value;
      ((Listcell)children.get(4)).label = categorie.value;
      ((Listcell)children.get(5)).label = adresse.value;
      ((Listcell)children.get(6)).label = tel.value;
      ((Listcell)children.get(7)).label = fax.value;
      ((Listcell)children.get(8)).label = mail.value;
      ((Listcell)children.get(9)).label = solde.value;
      ((Listcell)children.get(10)).label = type.value;
      ((Listcell)children.get(11)).label = comment.value;
      ((Listcell)children.get(12)).label = id_fact.value;
      
}
void cancel(){
//reinitialiser la formulaire
choice();
}
void choice(){
  Comptes cpt =(Comptes)box.getSelectedItem().getValue();
      short s= cpt.getId();
      String str=Short.toString(s);
      short ss= cpt.getSolde();
      String sstr=Short.toString(ss);
      id.value=str;
      nom.value=cpt.getNom();
      prenom.value=cpt.getPrenom();
      nip.value=cpt.getNip();
      categorie.value=cpt.getCategorie();
      adresse.value=cpt.getAdresse();
      tel.value=cpt.getTel();
      fax.value=cpt.getFax();
      mail.value=cpt.getMail();
      solde.value=sstr;
      type.value=cpt.getType();
      comment.value=cpt.getComment();
      id_fact.value=cpt.getId_fact();
      
}  
 </zscript>
	
<listbox id="box" mold="paging" fixedLayout="false" multiple="true" checkmark="false" pageSize="5" selectedItem="@{selected}" onSelect="choice()">		
<listhead sizable="true" >
			
			<listheader label="Code Compte" width="90px" sort="auto"/>
			<listheader label="First Name" width="90px" sort="auto"/>
			<listheader label="Last Name" width="90px" sort="auto"/>
			<listheader label="Nip" width="90px" sort="auto"/>
			<listheader label="Category" width="90px" sort="auto"/>
			<listheader label="Adress" width="90px" sort="auto"/>
			<listheader label="Tel" width="90px" sort="auto"/>
			<listheader label="Fax" width="90px" sort="auto"/>
			<listheader label="Mail" width="90px" sort="auto"/>
			<listheader label="Solde Compte" width="90px" sort="auto"/>
			<listheader label="Type" width="90px" sort="auto"/>
			<listheader label="Coment" width="90px" sort="auto"/>
			<listheader label="Id Fonctionel" width="90px" sort="auto"/>
			
		</listhead>
		
		
		<listitem height="28px"  forEach="${allComptes}" value="${each}">
			
			<listcell label="${each.id}" />
			<listcell label="${each.nom}"  />
			<listcell label="${each.prenom}" />
			<listcell label="${each.nip}" />
			<listcell label="${each.categorie}" />
			<listcell label="${each.adresse}"/>
			<listcell label="${each.tel}" />
			<listcell label="${each.fax}" />
			<listcell label="${each.mail}" />
			<listcell label="${each.solde}" />
			<listcell label="${each.type}" />
			<listcell label="${each.comment}" />
			<listcell label="${each.id_fact}" />
		</listitem>
		
	</listbox>
		 	</panelchildren>
		 </panel>
	</tablechildren>
	<tablechildren>
		<panel height="600px" title="Modification" border="normal">
		 	<panelchildren>
	<grid>
		<rows>
			<row>
			<label>Code Compte : </label>
			<textbox id="id" readonly="true"/>
			</row>
				<row>
			<label>First Name : </label>
				<textbox id="nom"  readonly="false"/>
				</row>
				<row>
			<label>Last Name :</label>
				<textbox id="prenom" readonly="false"/>
				</row>
				<row>
			<label>Nip : </label>
				<textbox id="nip"  readonly="false"/>
				</row>
				<row>
			<label>Category : </label>
				<textbox id="categorie" readonly="false"/>
				</row>
				<row>
			<label>Adress : </label>
				<textbox id="adresse"  readonly="false"/>
				</row>
				<row>
			<label>Tel : </label>
				<textbox id="tel"  readonly="false"/>
				</row>
				<row>
			<label>Fax : </label>
				<textbox id="fax" readonly="false"/>
				</row>
				<row>
			<label>Mail : </label>
				<textbox id="mail" readonly="false"/>
				</row>
				<row>
			<label>Solde Compte : </label>
				<textbox id="solde"  readonly="false"/>
				</row>
				<row>
			<label>Type : </label>
				<textbox id="type"  readonly="false"/>
				</row>
				<row>
			<label>Coment : </label>
				<textbox id="comment" readonly="false"/>
				</row>
				<row>
			<label>Id Facture : </label>
				<textbox id="id_fact"  readonly="false"/>
				</row>
				<row>
				<button label="Valider" width="125px" onClick="update()"/>
				<button label="Annuler" width="125px" onClick="cancel()"/>
				</row>
			
		     </rows>
	        </grid>
		 	</panelchildren>
		 </panel>
	</tablechildren>
</tablelayout>	
</zk>	
</window>
			

</zk>

link publish delete flag offensive edit

answered 2010-05-09 07:22:18 +0800

elamarti
33

one more question is it possible to do that with jquery?

link publish delete flag offensive edit

answered 2010-05-10 21:18:41 +0800

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

Hi, elamarti
I create a sample

index.zul

<?page id="testZul" title=" BillPayment" cacheable="false" 
	language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<zk>
	<window title="BillPayment" border="normal" style="f"
		apply="ctrl.Composer">
		<div id="div"/>
	</window>
</zk>

Composer.java

package ctrl;

import java.util.*;

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

public class Composer extends GenericForwardComposer {

	private Div div;
	private ListModel model;
	private Comptes editCompte;

	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		initData();
		Map data = new HashMap();
		data.put("allComptes", model);
		Executions.createComponents("/Forum/2010/May/page1.zul", div, data);
	}

	private void initData() {
		List<Comptes> allComptes = new ArrayList<Comptes>();
		allComptes.add(new Comptes(0, "Jimmy", "Shiau"));
		allComptes.add(new Comptes(1, "Katrina", "Lin"));
		model = new ListModelList(allComptes);
	}

	public void onShowResult() {
		Listbox box = (Listbox) div.getFellow("box");
		editCompte = (Comptes) box.getSelectedItem().getValue();
		Map data = new HashMap();
		data.put("editCompte", editCompte);
		div.getChildren().clear();
		Executions.createComponents("/Forum/2010/May/page2.zul", div, data);
	}

	public void onUpdate() {
		Textbox id = (Textbox) div.getFellow("id");
		Textbox nom = (Textbox) div.getFellow("nom");
		Textbox prenom = (Textbox) div.getFellow("prenom");

		String str = id.getValue();
		short v = Short.parseShort(str);
		editCompte.setId(v);
		editCompte.setNom(nom.getValue());
		editCompte.setPrenom(prenom.getValue());
		
		onCancel();
	}

	public void onCancel() {
		Map data = new HashMap();
		data.put("allComptes", model);
		div.getChildren().clear();
		Executions.createComponents("/Forum/2010/May/page1.zul", div, data);
	}

	public class Comptes {
		private int id;
		private String nom, prenom;

		public Comptes(int id, String nom, String prenom) {
			super();
			this.id = id;
			this.nom = nom;
			this.prenom = prenom;
		}

		public int getId() {
			return id;
		}

		public void setId(int id) {
			this.id = id;
		}

		public String getNom() {
			return nom;
		}

		public void setNom(String nom) {
			this.nom = nom;
		}

		public String getPrenom() {
			return prenom;
		}

		public void setPrenom(String prenom) {
			this.prenom = prenom;
		}

	}
}

page1.zul

<panel height="247px" title="Comptes" border="normal">
	<panelchildren>
		<separator bar="true" />
		<separator />
		<listbox id="box" mold="paging" fixedLayout="false"
			multiple="true" checkmark="false" pageSize="5"
			forward="onSelect=onShowResult">
			<listhead sizable="true">
				<listheader label="Code Compte" width="90px"
					sort="auto" />
				<listheader label="First Name" width="90px" sort="auto" />
				<listheader label="Last Name" width="90px" sort="auto" />
			</listhead>
			<listitem height="28px" forEach="${arg.allComptes}"
				value="${each}">
				<listcell label="${each.id}" />
				<listcell label="${each.nom}" />
				<listcell label="${each.prenom}" />
			</listitem>
		</listbox>
	</panelchildren>
</panel>

page2.zul

<panel height="600px" title="Modification" border="normal">
	<panelchildren>
		<grid>
			<rows>
				<row>
					<label>Code Compte :</label>
					<textbox id="id" readonly="true"
						value="${arg.editCompte.id}" />
				</row>
				<row>
					<label>First Name :</label>
					<textbox id="nom" readonly="false"
						value="${arg.editCompte.nom}" />
				</row>
				<row>
					<label>Last Name :</label>
					<textbox id="prenom" readonly="false"
						value="${arg.editCompte.prenom}" />
				</row>
				<row>
					<button label="Valider" width="125px" forward="onClick=onUpdate"/>
					<button label="Annuler" width="125px" forward="onClick=onCancel"/>
				</row>
			</rows>
		</grid>
	</panelchildren>
</panel>

link publish delete flag offensive edit

answered 2010-05-11 05:00:27 +0800

elamarti
33

Hi as1225,

Thank you very much for the effort you have done for me is very very kind of you :)

Elamarti

link publish delete flag offensive edit

answered 2010-08-09 14:28:20 +0800

eptx
130 ● 3

Very helpful as1225, thank you!

link publish delete flag offensive edit

answered 2010-08-09 15:07:01 +0800

eptx
130 ● 3

How would this approach change if using data binding? How do you connect the dynamically created components (page1.zul) to your model, etc.?

link publish delete flag offensive edit

answered 2010-08-09 20:05:34 +0800

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

updated 2010-08-09 20:13:25 +0800

data binding

page2

<panel height="600px" title="Modification" border="normal">
	<panelchildren>
		<grid>
			<rows>
				<row>
					<label>Code Compte :</label>
					<textbox id="id" readonly="true"
						value="@{editCompte.id}" />
				</row>
				<row>
					<label>First Name :</label>
					<textbox id="nom" readonly="false"
						value="@{editCompte.nom}" />
				</row>
				<row>
					<label>Last Name :</label>
					<textbox id="prenom" readonly="false"
						value="@{editCompte.prenom}" />
				</row>
				<row>
					<button label="Valider" width="125px" forward="onClick=onUpdate"/>
					<button label="Annuler" width="125px" forward="onClick=onCancel"/>
				</row>
			</rows>
		</grid>
	</panelchildren>
</panel>

Composer.java

	private AnnotateDataBinder binder;
	public void onShowResult() {
		Listbox box = (Listbox) div.getFellow("box");
		editCompte = (Comptes) box.getSelectedItem().getValue();
		div.getChildren().clear();
		Component comp = Executions.createComponents("/Forum/2010/May/page2.zul", div, null);
		
		binder = new AnnotateDataBinder(comp);
		binder.bindBean("editCompte", editCompte);
		binder.loadAll();
	}

	public void onUpdate() {
		onCancel();
	}

as my sample
use getFellow to connect the component

link publish delete flag offensive edit

12next page »

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

Even beginner Zk

13 Replies

Question tools

Stats

Related questions