0

Dynamic tree in ZK

asked 2009-10-01 12:04:27 +0800

cros gravatar image cros
153

I am working on a application in ZK

1) I have a tree on left left .
2) Corresponding details of particular node on right side (with a 'Textbox' & 'save' button)

I want to add a node dynamically on clicking 'Save' button with the updated value of textbox.
Ex: if textbox value is "abcd" then a node of name "abcd" should be created.

How can i do this?

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2009-10-01 13:20:32 +0800

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

Hi, cros
Could you post your zul file

//jimmy

link publish delete flag offensive edit

answered 2009-10-02 04:08:48 +0800

cros gravatar image cros
153

THIS IS MY Client.zul

<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">

<include src="/topmenu.zul"/>
<window width="99%" height="93%" border="normal" apply="PatientCrudComposer">

<borderlayout>
<north border="none">
<label id="statusBar"/>
</north>
<west size="20%"> <!-- splittable="true" flex="true" -->
<vbox spacing="0" width="100%" >
<menubar id="submenubarlist" orient="horizontal" >
<menuitem id="menuNew" label="New" />
</menubar>

<tree id="treeClient" >
<treechildren>
<treeitem open="false">
<treerow draggable="true" onDrop="move(event.dragged)">
<treecell label="Hospital" />
</treerow>
<treechildren>
<treeitem>
<treerow draggable="true" >
<treecell label="Hospital1" />
</treerow>
</treeitem>
<treeitem>
<treerow draggable="true">
<treecell label="Hospital2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>

<treeitem open="false">
<treerow draggable="true" onDrop="move(event.dragged)">
<treecell label="Clinic" />
</treerow>
<treechildren>
<treeitem>
<treerow draggable="true">
<treecell label="Clinic1" />
</treerow>
</treeitem>
<treeitem>
<treerow draggable="true">
<treecell label="Clinic2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>

<treeitem open="false">
<treerow droppable="true"
onDrop="move(event.dragged)">
<treecell label="Lab" />
</treerow>
<treechildren>
<treeitem>
<treerow draggable="true">
<treecell label="Lab1" />
</treerow>
</treeitem>
<treeitem>
<treerow draggable="true">
<treecell label="Lab2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem open="false">
<treerow droppable="true"
onDrop="move(event.dragged)">
<treecell label="Facility" />
</treerow>
<treechildren>
<treeitem>
<treerow draggable="true">
<treecell label="Facility1" />
</treerow>
</treeitem>
<treeitem>
<treerow draggable="true">
<treecell label="Facility2" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
</vbox>
</west>


<center>
<vbox spacing="0">
<menubar id="submenubaredit" orient="horizontal">
<menuitem id="menuSave" label="Save" />
</menubar>
<tabbox>
<tabs>
<tab id="tabMain" label="Main"/>

</tabs>

<tabpanels>


<tabpanel>
<vbox spacing="0" width="100%">
<label value="Hospitals" id="nameHospital"/>
<hbox spacing="0" id="boxHospital">

<vbox spacing="0">
<menubar id="subsubmenubarHospitalEdit" orient="horizontal">
<menuitem id="menuSaveHospital" label="Save" />
</menubar>
<listbox id="gridCtlHospitalItem">
<listhead sizable="true">
<listheader label="Name"/>
<listheader label="Value"/>
</listhead>
<listitem><listcell>Type:</listcell> <listcell><combobox id="HospitalType" autodrop="true"/></listcell></listitem>
<listitem><listcell>Name:</listcell> <listcell><textbox id="HospitalName" /></listcell></listitem>
<listitem><listcell>Parent:</listcell> <listcell><textbox id="HospitalParent" /></listcell></listitem>
<listitem><listcell>Billable:</listcell> <listcell><checkbox id="HospitalBillable"/></listcell></listitem>
</listbox>
</vbox>
</hbox>
<label value="Clinics" id="nameClinic"/>
<hbox spacing="0" id="boxClinic">

<vbox spacing="0">
<menubar id="subsubmenubarClinicEdit" orient="horizontal">
<menuitem id="menuSaveClinic" label="Save" />
</menubar>
<listbox id="gridCtlClinicItem">
<listhead sizable="true">
<listheader label="Name"/>
<listheader label="Value"/>
</listhead>
<listitem><listcell>Type:</listcell> <listcell><combobox id="ClinicType" autodrop="true"/></listcell></listitem>
<listitem><listcell>Name:</listcell> <listcell><textbox id="ClinicName" /></listcell></listitem>
<listitem><listcell>Parent:</listcell> <listcell><textbox id="ClinicParent" /></listcell></listitem>
<listitem><listcell>Billable:</listcell> <listcell><checkbox id="ClinicBillable"/></listcell></listitem>
</listbox>
</vbox>
</hbox>

<label value="Labs" id="nameLabs"/>
<hbox spacing="0" id="boxLab">

<vbox spacing="0">
<menubar id="subsubmenubarLabEdit" orient="horizontal">
<menuitem id="menuSaveLab" label="Save" />
</menubar>
<listbox id="gridCtlLabItem" >
<listhead sizable="true">
<listheader label="Name"/>
<listheader label="Value"/>
</listhead>
<listitem><listcell>Type:</listcell> <listcell><combobox id="LabType" autodrop="true"/></listcell></listitem>
<listitem><listcell>Name:</listcell> <listcell><textbox id="LabName" /></listcell></listitem>
<listitem><listcell>Parent:</listcell> <listcell><textbox id="LabParent" /></listcell></listitem>
</listbox>
</vbox>
</hbox>

</vbox>
</tabpanel>


</tabpanels>
</tabbox>
</vbox>
</center>
</borderlayout>

<zscript><![CDATA[

void move(Component dragged) {
self.parent.insertBefore(dragged, self.getNextSibling());
self.appendChild(dragged);
}

treeClient.onSelect = { ev ->
Treeitem itemSelected = treeClient.getSelectedItem()
def id = itemSelected.label
nameHospital.value=id
enableEditControls(false)
}

menuNew.onClick = { ev ->
//gridCtlAddress.setSelectedIndex(-1)
enableEditControls(false)
nameHospital.setVisible(false)
clearEditValues()
}


clearEditValues = {
HospitalType.value = null
HospitalName.value = null
HospitalParent.value = null
HospitalBillable.checked = false

}

menuSave.onClick = { ev ->

}

// Main Client Edit Area
enableEditControls = { e ->
nameClinic.setVisible(e)
nameLabs.setVisible(e)
boxClinic.setVisible(e)
boxLab.setVisible(e)
nameHospital.setVisible(true)
}
// Main init routine
init = {
HospitalType.setModel(new SimpleListModel(Client.constraints.type.inList))
enableEditControls(false)
nameHospital.setVisible(false)
statusBar.value = "Ready"
}
init()
]]></zscript>
</window>
</zk>

link publish delete flag offensive edit

answered 2009-10-06 02:16:15 +0800

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

Hi,cros
I write a sample

zul file

	<window apply="ctrl.Composer">
		<tree id="treeClient">
			<treechildren>
				<treeitem open="false">
					<treerow draggable="true" onDrop="move(event.dragged)">
						<treecell label="Hospital" />
					</treerow>
					<treechildren>
						<treeitem>
							<treerow draggable="true">
								<treecell label="Hospital1" />
							</treerow>
						</treeitem>
						<treeitem>
							<treerow draggable="true">
								<treecell label="Hospital2" />
							</treerow>
						</treeitem>
					</treechildren>
				</treeitem>

				<treeitem open="false">
					<treerow draggable="true"
						onDrop="move(event.dragged)">
						<treecell label="Clinic" />
					</treerow>
					<treechildren>
						<treeitem>
							<treerow draggable="true">
								<treecell label="Clinic1" />
							</treerow>
						</treeitem>
						<treeitem>
							<treerow draggable="true">
								<treecell label="Clinic2" />
							</treerow>
						</treeitem>
					</treechildren>
				</treeitem>

				<treeitem open="false">
					<treerow droppable="true"
						onDrop="move(event.dragged)">
						<treecell label="Lab" />
					</treerow>
					<treechildren>
						<treeitem>
							<treerow draggable="true">
								<treecell label="Lab1" />
							</treerow>
						</treeitem>
						<treeitem>
							<treerow draggable="true">
								<treecell label="Lab2" />
							</treerow>
						</treeitem>
					</treechildren>
				</treeitem>
				<treeitem open="false">
					<treerow droppable="true"
						onDrop="move(event.dragged)">
						<treecell label="Facility" />
					</treerow>
					<treechildren>
						<treeitem>
							<treerow draggable="true">
								<treecell label="Facility1" />
							</treerow>
						</treeitem>
						<treeitem>
							<treerow draggable="true">
								<treecell label="Facility2" />
							</treerow>
						</treeitem>
					</treechildren>
				</treeitem>
			</treechildren>
		</tree>

		<hbox>
			<hbox spacing="0" id="boxHospital">
				<vbox spacing="0">
					<label value="Hospitals" id="nameHospital" />
					<menubar id="subsubmenubarHospitalEdit"
						orient="horizontal">
						<menuitem id="menuSaveHospital" label="Save" />
					</menubar>
					<listbox id="gridCtlHospitalItem">
						<listhead sizable="true">
							<listheader label="Name" />
							<listheader label="Value" />
						</listhead>
						<listitem>
							<listcell>Type:</listcell>
							<listcell>
								<combobox id="HospitalType"
									autodrop="true" />
							</listcell>
						</listitem>
						<listitem>
							<listcell>Name:</listcell>
							<listcell>
								<textbox id="HospitalName" />
							</listcell>
						</listitem>
						<listitem>
							<listcell>Parent:</listcell>
							<listcell>
								<textbox id="HospitalParent" />
							</listcell>
						</listitem>
						<listitem>
							<listcell>Billable:</listcell>
							<listcell>
								<checkbox id="HospitalBillable" />
							</listcell>
						</listitem>
					</listbox>
				</vbox>
			</hbox>


			<hbox spacing="0" id="boxClinic">

				<vbox spacing="0">
					<label value="Clinics" id="nameClinic" />
					<menubar id="subsubmenubarClinicEdit"
						orient="horizontal">
						<menuitem id="menuSaveClinic" label="Save" />
					</menubar>
					<listbox id="gridCtlClinicItem">
						<listhead sizable="true">
							<listheader label="Name" />
							<listheader label="Value" />
						</listhead>
						<listitem>
							<listcell>Type:</listcell>
							<listcell>
								<combobox id="ClinicType"
									autodrop="true" />
							</listcell>
						</listitem>
						<listitem>
							<listcell>Name:</listcell>
							<listcell>
								<textbox id="ClinicName" />
							</listcell>
						</listitem>
						<listitem>
							<listcell>Parent:</listcell>
							<listcell>
								<textbox id="ClinicParent" />
							</listcell>
						</listitem>
						<listitem>
							<listcell>Billable:</listcell>
							<listcell>
								<checkbox id="ClinicBillable" />
							</listcell>
						</listitem>
					</listbox>
				</vbox>
			</hbox>


			<hbox spacing="0" id="boxLab">
				<vbox spacing="0">
					<label value="Labs" id="nameLabs" />
					<menubar id="subsubmenubarLabEdit"
						orient="horizontal">
						<menuitem id="menuSaveLab" label="Save" />
					</menubar>
					<listbox id="gridCtlLabItem">
						<listhead sizable="true">
							<listheader label="Name" />
							<listheader label="Value" />
						</listhead>
						<listitem>
							<listcell>Type:</listcell>
							<listcell>
								<combobox id="LabType" autodrop="true" />
							</listcell>
						</listitem>
						<listitem>
							<listcell>Name:</listcell>
							<listcell>
								<textbox id="LabName" />
							</listcell>
						</listitem>
						<listitem>
							<listcell>Parent:</listcell>
							<listcell>
								<textbox id="LabParent" />
							</listcell>
						</listitem>
					</listbox>
				</vbox>
			</hbox>
		</hbox>
	</window>

Composer.java

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

public class Composer extends GenericForwardComposer {

	private Textbox HospitalName,HospitalParent;
	private Tree treeClient;

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

	public void onClick$menuSaveHospital() {
		String parentName = HospitalParent.getValue();
		Treeitem parent = null;
		
		for(Object treeItem:treeClient.getItems()){
			Treerow treeRow = ((Treeitem)treeItem).getTreerow();
			Treecell treeCell = (Treecell)treeRow.getFirstChild();
			if(treeCell.getLabel().equals(parentName)){
				parent = (Treeitem)treeItem;
				break;
			}
		}
		
		if(parent == null)return;
		
		Treechildren treeChildren = parent.getTreechildren();
		
		if(treeChildren == null){
			treeChildren = new Treechildren();	
			parent.appendChild(treeChildren);
		}
		
		
		Treeitem ti =new Treeitem();
		Treerow tr = new Treerow();
		
		tr.appendChild(new Treecell(HospitalName.getValue()));
		tr.setParent(ti);
		
		treeChildren.appendChild(ti);		
	}
}

//jimmy

link publish delete flag offensive edit

answered 2009-10-06 05:06:19 +0800

cros gravatar image cros
153

Hi jimmy,

THANKS a LOT !!!

//abhishek

link publish delete flag offensive edit

answered 2010-12-21 04:44:00 +0800

puneetgarg11 gravatar image puneetgarg11
63

Hi jimmy,

can u help me to solve the problem in tree.


using property multiple="true" checkmark="true" check boxes are created in tree.

now problem is that

-- A
--a
--b
--c
-- B
--p
--q
--r


A is the parent of a,b,c
B is the parent of p,q,r

-- means check box.

when i click on A check box then its child a,b,c check box need be selected.
when i click on B check box then its child a,b,c check box need be selected.

if we r click on A or B Check Box are not select and its child a,c and p,q check boxes are selected.

then v need to store check box value in database is select then 1 otherwise 0.

now how v get the check box value in the code so that v find whether check box is selected or not.
and how v got check box component.

because check boxes are created using property multiple="true" checkmark="true".

pls find the sloution and tell me.


Regard's
Pardeep Garg

link publish delete flag offensive edit

answered 2010-12-21 10:28:49 +0800

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

please don't crosspost .

link publish delete flag offensive edit

answered 2010-12-21 19:10:28 +0800

PeterKuo gravatar image PeterKuo
481 2

@puneetgarg11
Please don't cross post.
Your problem is answered at
http://www.zkoss.org/forum/listComment/14797
Please focus on that thread.

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: 2009-10-01 12:04:27 +0800

Seen: 847 times

Last updated: Dec 21 '10

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