Reputation: 365
Let us suppose I have a zul page in which I have different component like textbox,intbox,buttons etc ... now i drag and drop component here and there now i want to save the state of Window and when again i will come to same page same position of all component will show..How to do it in ZK Framework.Here is demo code
<zk xmlns:x="xhtml" xmlns:zk="zk">
<window width="100%" height="100%">
<borderlayout width="100%" height="100%">
<north border="none">
<menubar sclass="vista" height="20px">
<menuitem label="ADD" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="Delete" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="Refresh" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="Add t0 links" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menu label="View">
<menupopup>
<menuitem label="View details"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label="Edit View"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label=" Summery View"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
</menupopup>
</menu>
<menuitem label="Edit" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
</menubar>
</north>
<center border="none" sclass="sub-tab-panel">
<groupbox vflex="1" hflex="1"
contentStyle="overflow:auto" width="880px">
<separator width="25px" />
<groupbox mold="3d" width="770px" draggable="grpbox"
droppable="grpbox" onDrop="move(event.dragged)">
<caption label="Grid Demo"
sclass="group-header" />
<grid>
<rows>
<row>
<label value="Mike" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
<label value="29" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
<label value="C" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
</row>
<row>
<label value="Todd" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
<label value="21" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
<label value="B" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
</row>
<row>
<label value="Tony" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
<label value="31" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
<label value="A" draggable="row"
droppable="row" onDrop="move(event.dragged)" />
</row>
</rows>
</grid>
</groupbox>
<separator />
<groupbox mold="3d" width="770px" draggable="grpbox"
droppable="grpbox" onDrop="move(event.dragged)">
<caption
label="13 000001 000 00 BP Building Permit"
sclass="group-header" />
<vlayout width="100%">
<hlayout width="100%">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Type"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label
value="BP Building Permit" maxlength="30"
sclass="field-data" />
</hbox>
</hbox>
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Status"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="Application"
maxlength="30" sclass="field-data" />
</hbox>
</hbox>
</hlayout>
<hlayout width="100%">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Sub Type"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="Residential"
maxlength="30" sclass="field-data" />
</hbox>
</hbox>
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Parent ID"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="1212"
sclass="field-data" />
</hbox>
</hbox>
</hlayout>
<hlayout width="100%">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Work"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="Demo"
sclass="field-data" maxlength="30" />
</hbox>
</hbox>
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Row ID"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="12"
sclass="field-data" />
</hbox>
</hbox>
</hlayout>
<hlayout width="100%">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Group"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="Permit"
sclass="field-data" maxlength="30" />
</hbox>
</hbox>
</hlayout>
</vlayout>
</groupbox>
<separator />
<groupbox mold="3d" width="770px" draggable="grpbox"
droppable="grpbox" onDrop="move(event.dragged)">
<caption label="DEMO" sclass="group-header" />
<vlayout width="100%">
<hlayout width="100%">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Type"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label
value="BP Building Permit" maxlength="30"
sclass="field-data" />
</hbox>
</hbox>
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Status"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="Application"
maxlength="30" sclass="field-data" />
</hbox>
</hbox>
</hlayout>
<hlayout width="100%">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Sub Type"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="Residential"
maxlength="30" sclass="field-data" />
</hbox>
</hbox>
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Parent ID"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="1212"
sclass="field-data" />
</hbox>
</hbox>
</hlayout>
<hlayout width="100%">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Work"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="Demo"
sclass="field-data" maxlength="30" />
</hbox>
</hbox>
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Row ID"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="12"
sclass="field-data" />
</hbox>
</hbox>
</hlayout>
<hlayout width="100%">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Group"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label value="Permit"
sclass="field-data" maxlength="30" />
</hbox>
</hbox>
</hlayout>
</vlayout>
</groupbox>
<separator />
<groupbox mold="3d" width="770px" draggable="grpbox"
droppable="grpbox" onDrop="move(event.dragged)">
<caption label="Primary Property"
sclass="group-header" />
<hlayout width="100%" draggable="h_td1"
droppable="h_td1" onDrop="move(event.dragged)">
<hbox draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)">
<hbox width="92px" pack="end">
<label value="Address"
sclass="field-label" />
</hbox>
<hbox align="left" width="292px">
<label
value="23 NW #1 SAMMIE'S LAND OF DREA..." maxlength="30"
sclass="field-data" />
</hbox>
</hbox>
</hlayout>
<hlayout draggable="h_td" droppable="h_td"
onDrop="move(event.dragged)" width="792px">
<hbox width="92px" pack="end">
<label value="Address"
sclass="field-label" />
</hbox>
<hbox align="left" width="692px">
<textbox rows="2" draggable="false"
style="resize:none" value="" readonly="true"
sclass="field-data" width="692px" />
</hbox>
</hlayout>
</groupbox>
<separator />
<groupbox mold="3d" width="770px" draggable="grpbox"
droppable="grpbox" onDrop="move(event.dragged)">
<caption
label="Tracking Dates and Reference Information"
sclass="group-header" />
<x:table width="100%" border="0"
cellspacing="2px" cellpadding="2px">
<x:tr height="20px">
<x:td width="77px" align="right">
<label value="In Date"
sclass="field-label" />
</x:td>
<x:td width="150px">
<label value="2013-11-07"
sclass="field-data" />
</x:td>
<x:td align="right">
<label value="Issue/Approve"
sclass="field-label" />
</x:td>
<x:td width="150px">
<label id="issueDate" value=""
sclass="field-data" />
</x:td>
<x:td align="right">
<label value="Expires"
sclass="field-label" />
</x:td>
<x:td width="150px">
<label value="" sclass="field-data" />
</x:td>
</x:tr>
<x:tr height="20px">
<x:td align="right">
<label value="Ref. No."
sclass="field-label" />
</x:td>
<x:td>
<label value="" sclass="field-data"
maxlength="20" />
</x:td>
<x:td align="right">
<label value="Issued By"
sclass="field-label" />
</x:td>
<x:td>
<label value="" sclass="field-data"
maxlength="15" />
</x:td>
<x:td align="right">
<label value="Final Date"
sclass="field-label" />
</x:td>
<x:td>
<label value="" sclass="field-data" />
</x:td>
</x:tr>
<x:tr height="20px">
<x:td align="right">
<label value="Name"
sclass="field-label" />
</x:td>
<x:td colspan="3">
<label value="" maxlength="50"
sclass="field-data" />
</x:td>
<x:td align="right">
<label value="Priority"
sclass="field-label" />
</x:td>
<x:td>
<label value="" sclass="field-data" />
</x:td>
</x:tr>
</x:table>
</groupbox>
<separator />
<groupbox mold="3d" width="770px"
style="resize:none" draggable="grpbox" droppable="grpbox"
onDrop="move(event.dragged)">
<caption label="Description"
sclass="group-header">
</caption>
<hlayout>
<textbox rows="3" hflex="1" readonly="true"
style="resize:none"
value="Update through Jooq Test Case on: Thu Nov 14 17:13:51 IST 2013"
sclass="field-data" />
</hlayout>
</groupbox>
<separator />
<groupbox mold="3d" width="770px" draggable="grpbox"
droppable="grpbox" onDrop="move(event.dragged)">
<caption label="Conditions"
sclass="group-header" />
<hlayout>
<textbox rows="3" hflex="1" readonly="true"
style="resize:none" value="" sclass="field-data" />
</hlayout>
</groupbox>
<separator />
</groupbox>
</center>
<south border="0">
<menubar id="buttonBar" width="100%" height="20px">
<menuitem label="Audit" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menu label="Copy">
<menupopup>
<menuitem label="Single Copy"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label="Multiple Properties"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
</menupopup>
</menu>
<menuitem label="Create Child" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="Create Violation"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label="Revise" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem id="issueMenu" label="Issue/Approve"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menu label="Print">
<menupopup>
<menuitem label="Print" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="Inspection Card"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label="Label" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="Inspection Report"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuseparator></menuseparator>
<menuitem label="Custom Report 1"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label="Custom Report 2"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label="Custom Report 3"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
</menupopup>
</menu>
<menu label="Email">
<menupopup>
<menuitem label="Print Output"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label="File" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="Document on this Folder"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
<menuitem label="Attachment on this Folder"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
</menupopup>
</menu>
<menuitem label="Re-Default" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="GIS" draggable="topmenu"
droppable="topmenu" onDrop="move(event.dragged)" />
<menuitem label="Process Activity"
draggable="topmenu" droppable="topmenu"
onDrop="move(event.dragged)" />
</menubar>
</south>
</borderlayout>
<zscript><![CDATA[
void move(Component dragged) {
self.parent.insertBefore(dragged, self);
//if (self instanceof Hlayout) {
//self.parent.insertBefore(dragged, self);
//} else {
// self.appendChild(dragged);
//}
}
]]></zscript>
</window>
</zk>
Now How to save news state of window?
Upvotes: 0
Views: 433
Reputation: 21
All components are serializable (java.io.Serializable
). Like cloning, all children and descendants are serialized. If you serialize a component and then de-serialize it back, the result will be the same as invoking Component.clone()
save the component when ever you want to redraw the same state of component call isInvalidated()
of the component.
isInvalidated
boolean isInvalidated()
Returns if this component needs to be redrawn at the client.
Application developers rarely need to call this method.
Note:
It always returns true if it doesn't belong to any page (since redraw is required if it is attached to a page later).
It always returns true if the current execution is not an asynchronous update (so redrawn is always required).
If its parent is invalidated, this component will be redrawn too, but this method returns false if invalidate()
was not called against this component.
Upvotes: 2