Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Here is my Code
<zk xmlns:x="xhtml" xmlns:zk="zk">
<window width="100%" height="100%"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('test.DragDropViewModel')">
<borderlayout width="100%" height="100%">
<north border="none">
<menubar sclass="vista" height="20px">
<menuitem label="Save"
onClick="@command('doSearlize')" />
<menuitem label="ReloadPage"
onClick="@command('reloadPage')"/>
<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>
Here when you drag and drop the component after that i want to save the State of Window is this possible ?
Edit: My Java Code is
package test;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.ObjectInputStream;
import java.io.ObjectOutputStream;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Components;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zkex.util.Base64Coder;
import org.zkoss.zul.Window;
public class DragDropViewModel implements Serializable {
Window oldWin =null;
Window newWin = null;
@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
if (oldWin == null) {
oldWin = (Window) view;
}
}
@Command
public void reloadPage(@ContextParam(ContextType.VIEW) Component view) {
view.getChildren().clear();
List oldBoxes = new ArrayList();
oldBoxes.addAll(oldWin.getChildren());
oldWin.getChildren().clear();
view.getChildren().addAll(oldBoxes);
}
@Command
public void doSearlize(@ContextParam(ContextType.VIEW) Component view) throws ClassNotFoundException, IOException {
String string = toString(view);
newWin = (Window) fromString(string);
}
/** Write the object to a Base64 string. */
private static String toString(Serializable o) throws IOException {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ObjectOutputStream oos = new ObjectOutputStream(baos);
oos.writeObject(o);
oos.close();
return new String(Base64Coder.encode(baos.toByteArray()));
}
/** Read the object from Base64 string. */
private static Object fromString(String s) throws IOException, ClassNotFoundException {
byte[] data = Base64Coder.decode(s);
ObjectInputStream ois = new ObjectInputStream(new ByteArrayInputStream(data));
Object o = ois.readObject();
ois.close();
return o;
}
}
This should be doable, ZK Components are JAVA Objects and support serializable, and a JAVA Object that support serializable can be serialized to String (and vice versa), for more information please refer to How to serialize an object into a string at stackoverflow
What does "Window Component State" mean? If it means something from (or related to) the data, e.g., the order of the items in the grid, then you need to design a data structure and table schema accordingly so you can store data in java bean or database as needed and load them into VM for render.
If it really means the whole state, e.g., something that will be modified (or even created) by user and cannot pre-define the data structure then you can use the method I've mentioned above, please refer to the sample below:
test.zul
<zk>
<vlayout>
items to be added, type zul in the textbox below then press Add button
<textbox id="tb" rows="5" />
<button label="Add">
<attribute name="onClick"><![CDATA[
Component[] comp = Executions.getCurrent().createComponentsDirectly(tb.getValue(), "zul", new HashMap());
for (Component c : comp) {
c.setParent(win);
}
]]></attribute>
</button>
</vlayout>
Dragged box will be inserted after dropped box, the status of window will be stored after dragged a box onto another
<window id="win" apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('test.TestVM')">
<div height="100px" width="100px"
style="border: 1px solid blue;"
draggable="box" droppable="box"
onDrop="@command('switchAndRememberBoxes')"/>
<div height="100px" width="100px"
style="border: 1px solid green;"
draggable="box" droppable="box"
onDrop="@command('switchAndRememberBoxes')"/>
<div height="100px" width="100px"
style="border: 1px solid yellow;"
draggable="box" droppable="box"
onDrop="@command('switchAndRememberBoxes')"/>
<timer delay="1000" running="true"
repeats="false" onTimer="@command('restoreBoxesIfAny')" />
</window>
</zk>
TestVM.java
package test;
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import java.io.ObjectInputStream;
import java.io.ObjectOutputStream;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.DropEvent;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zul.Window;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
public class TestVM implements Serializable {
@Command
public void restoreBoxesIfAny
(@ContextParam(ContextType.TRIGGER_EVENT) Event event) throws IOException, ClassNotFoundException {
loadWindow((Window)event.getTarget().getParent());
}
@Command
public void switchAndRememberBoxes
(@ContextParam(ContextType.TRIGGER_EVENT) DropEvent event) throws IOException {
Component dragged = event.getDragged();
Component dropped = event.getTarget();
Window win = (Window)dragged.getParent();
System.out.println(dragged);
System.out.println(dropped);
win.insertBefore(dropped, dragged);
storeWindow(win);
}
private void storeWindow (Window win) throws IOException {
String serializedObject;
ByteArrayOutputStream bo = new ByteArrayOutputStream();
ObjectOutputStream so = new ObjectOutputStream(bo);
BASE64Encoder encoder = new BASE64Encoder();
// write window to ObjectOutputStream
so.writeObject(win);
so.flush();
// get bytes from inner ByteArrayOutputStream
// and encode it to Base64 String
serializedObject = encoder.encode(bo.toByteArray());
System.out.println("### " + serializedObject + " ###");
// store string to file
BufferedWriter writer = new BufferedWriter(new FileWriter(new File("serializedWindow.txt")));
writer.write(serializedObject);
writer.close();
}
private void loadWindow (Window win) throws IOException, ClassNotFoundException {
File f = new File("serializedWindow.txt");
if (f.exists()) {
// reader to read file
BufferedReader reader = new BufferedReader(new FileReader(new File("serializedWindow.txt")));
BASE64Decoder decoder = new BASE64Decoder();
String line = null;
StringBuilder sb = new StringBuilder("");
// read string from file
while ((line = reader.readLine()) != null) {
sb.append(line);
}
System.out.println("### " + sb.toString() + " ###");
// decode string to byte array
byte b[] = decoder.decodeBuffer(sb.toString());
// restore window from byte array
ByteArrayInputStream bi = new ByteArrayInputStream(b);
ObjectInputStream si = new ObjectInputStream(bi);
Window oldWin = (Window) si.readObject();
// restore children from old window
win.getChildren().clear();
List oldBoxes = new ArrayList();
oldBoxes.addAll(oldWin.getChildren());
oldWin.getChildren().clear();
win.getChildren().addAll(oldBoxes);
}
}
}
You can also merge these two parts if needed.
Your code trowing exception I added my ViewModel class in he code see when i click on the reloadPage i have to show the oldWindow where component are in not deag and dopped ...here what i did...Page loaded i drag and drop the compoentns here and there but in after compose i saved WIndow State in var
sjoshi ( 2014-01-21 06:22:49 +0800 )editI have done this thing now which load old state of Window
package test;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.ObjectInputStream;
import java.io.ObjectOutputStream;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Components;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zkex.util.Base64Coder;
import org.zkoss.zul.Window;
public class DragDropViewModel implements Serializable {
Window oldWin = null;
Window newWin = null;
@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
if (oldWin == null) {
oldWin = (Window) view.clone();
}
}
@Command
public void reloadPage(@ContextParam(ContextType.VIEW) Component view) {
view.getChildren().clear();
List oldBoxes = new ArrayList();
oldBoxes.addAll(oldWin.getChildren());
oldWin.getChildren().clear();
view.getChildren().addAll(oldBoxes);
}
@Command
public void doSearlize(@ContextParam(ContextType.VIEW) Component view) throws ClassNotFoundException, IOException {
Window window = new Window();
window = (Window) view.clone();
String string = toString(window);
newWin = (Window) fromString(string);
}
/** Write the object to a Base64 string. */
private static String toString(Serializable o) throws IOException {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ObjectOutputStream oos = new ObjectOutputStream(baos);
oos.writeObject(o);
oos.close();
return new String(Base64Coder.encode(baos.toByteArray()));
}
/** Read the object from Base64 string. */
private static Object fromString(String s) throws IOException, ClassNotFoundException {
byte[] data = Base64Coder.decode(s);
ObjectInputStream ois = new ObjectInputStream(new ByteArrayInputStream(data));
Object o = ois.readObject();
ois.close();
return o;
}
}
Ye i am able to reload the Window in old state but another issue when going to save into DB http://stackoverflow.com/questions/21257489/save-data-in-blob-from-java-code
sjoshi ( 2014-01-22 04:41:05 +0800 )editAsked: 2014-01-16 08:09:57 +0800
Seen: 43 times
Last updated: Jan 21 '14