1

How to Save Window Component State in DB.

asked 2014-01-16 08:09:57 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

updated 2014-01-21 06:20:40 +0800

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;
    }
}
delete flag offensive retag edit

3 Answers

Sort by » oldest newest most voted
0

answered 2014-01-18 04:45:54 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

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

link publish delete flag offensive edit

Comments

So do You mean by Is this possible? By Serialize and de-serialize properties of Java but in my case every component in ZUl file and not a MVC framework where component Wired from ViewModel

sjoshi ( 2014-01-18 06:13:07 +0800 )edit

That is ok, you can either handle onDrop event in your VM or use custom component to handle drop event in service method.

benbai ( 2014-01-18 20:59:28 +0800 )edit

Drag and Drop is Working fine in above example only issue i have to save whole Window in DB so when sometime back i will load again this page the position of component will be load whch saved in db

sjoshi ( 2014-01-19 04:43:07 +0800 )edit

Yes, what I mean is you can serialize window component to string via either command in VM or service method in custom component.

benbai ( 2014-01-19 11:56:44 +0800 )edit

You can also design your own "window's status" data structure and update it with drop event and store that data class into DB.

benbai ( 2014-01-19 11:58:36 +0800 )edit
0

answered 2014-01-21 09:15:10 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

I 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;
    }
}
link publish delete flag offensive edit

Comments

so this issue is solved now?

benbai ( 2014-01-21 22:21:15 +0800 )edit

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 )edit
0

answered 2014-01-21 02:29:17 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

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.

link publish delete flag offensive edit

Comments

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 )edit

oldWin and now i did drag and drop of components so state of Window changed to i want previous state of Wndow i mean oldWin object so i want to restore it by oldWin but i am not able to do this

sjoshi ( 2014-01-21 06:24:04 +0800 )edit
Your answer
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
1 follower

RSS

Stats

Asked: 2014-01-16 08:09:57 +0800

Seen: 43 times

Last updated: Jan 21 '14

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