Revision history [back]

click to hide/show revision 1
initial version

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

sjoshi gravatar image sjoshi flag of India

http://zkframeworkhint.bl...

How to Save Window Component State in DB.

Here is my Code

<window id="nodeTypeForm" apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('ir.amelsystem.o18t.presentation.hierarchy.HierarchyFormVM')"
    validationMessages="@id('vmsgs')" title="Hierarchy Type" mode="modal"
    closable="true" border="normal" width="720px"
    action="show: slideDown;hide: slideUp">
    <caption image="images/config-16x16.png" />
    <grid fixedLayout="true" width="700px"
        form="@id('fx') @load(vm.item) @save(vm.item, before='submit')">
        <columns>
            <column />
            <column />
            <column />
            <column />
        </columns>
        <rows>
            <row>
                <asteriskLabel value="Name" showStar="true" />
                <textbox value="@bind(fx.name)" mold="rounded"
                    placeholder="Text" constraint="${vm.nameConstraint}" width="150px"
                    maxlength="100" />
                <asteriskLabel value="Enabled" showStar="false" />
                <checkbox checked="@bind(fx.enabled)" />
            </row>
            <row>
                <asteriskLabel value="Hierarchy" showStar="true" />
                <combobox model="@load(vm.hierarchyTypeList)"
                    selectedItem="@bind(fx.hierarchyTypeId)" autocomplete="false"
                    readonly="true" width="150px" autodrop="true" mold="rounded"
                    buttonVisible="true" placeholder="Select One"
                    constraint="no empty">
                    <template name="model" var="model">
                        <comboitem value="@load(model.id)"
                            label="@load(model.name)" />
                    </template>
                </combobox>
                <asteriskLabel value="Node Type" showStar="true" />
                <combobox model="@load(vm.nodeTypeList)"
                    selectedItem="@bind(vm.item.nodeTypeId) @converter(vm.comboboxSelectedItemConverter)"
                    autocomplete="false" readonly="true" width="150px" autodrop="true"
                    mold="rounded" buttonVisible="true" placeholder="Select One"
                    constraint="no empty">
                    <template name="model" var="model">
                        <comboitem value="@load(model.id)"
                            label="@load(model.name)" />
                    </template>
                </combobox>
            </row>
            <row>
                <asteriskLabel value="Icon" showStar="true" />
                <!--<textbox mold="@load(vm.iconList)" value="@load(fx.iconId)"></textbox> -->

                <combobox model="@load(vm.iconList)"
                    autocomplete="false"
                    selectedItem="@bind(fx.iconId) @converter(vm.comboboxSelectedItemConverter)  "
                    readonly="true" width="150px" autodrop="true" buttonVisible="true"
                    placeholder="Select One" constraint="no empty"
                    id="icon_combobox">
                    <template name="model" var="model">
                        <comboitem value="@load(model.id)"
                            label="@load(model.name)"
                            imageContent="@load(model.content) @converter(vm.iconConvertCombobox)">
                        </comboitem>
                    </template>


                </combobox>

                <asteriskLabel value="Description" showStar="False" />
                <textbox value="@bind(fx.description)" multiline="true"
                    mold="rounded" placeholder="Text" width="150px" />
            </row>
            <row spans="4" align="right">
                <hbox style="padding-right:42px">
                    <button id="submitBtn"
                        onClick="@command('submit', target=self)" mold="trendy"
                        label="@bind(item.id eq null?'Create':'Save') "
                        autodisable="self,cancelBtn" />
                    <button label="Cancel" id="cancelBtn" mold="trendy"
                        onClick="nodeTypeForm.detach()" autodisable="self,submitBtn" />
                </hbox>
            </row>
        </rows>
    </grid>
</window>

Here when you drag and drop the component after that i want to save the State of Window is this possible ?

How to Save Window Component State in DB.

Here is my CodeCode <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)"/>

<window id="nodeTypeForm" apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('ir.amelsystem.o18t.presentation.hierarchy.HierarchyFormVM')"
    validationMessages="@id('vmsgs')" title="Hierarchy Type" mode="modal"
    closable="true" border="normal" width="720px"
    action="show: slideDown;hide: slideUp">
                <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 image="images/config-16x16.png" label="Grid Demo"
                        sclass="group-header" />
    <grid fixedLayout="true" width="700px"
        form="@id('fx') @load(vm.item) @save(vm.item, before='submit')">
        <columns>
            <column                 <grid>
                        <rows>
                            <row>
                                <label value="Mike" draggable="row"
                                    droppable="row" onDrop="move(event.dragged)" />
            <column                     <label value="29" draggable="row"
                                    droppable="row" onDrop="move(event.dragged)" />
            <column                     <label value="C" draggable="row"
                                    droppable="row" onDrop="move(event.dragged)" />
            <column                 </row>
                            <row>
                                <label value="Todd" draggable="row"
                                    droppable="row" onDrop="move(event.dragged)" />
        </columns>
        <rows>
                        <label value="21" draggable="row"
                                    droppable="row" onDrop="move(event.dragged)" />
                                <label value="B" draggable="row"
                                    droppable="row" onDrop="move(event.dragged)" />
                            </row>
                            <row>
                <asteriskLabel value="Name" showStar="true"                 <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 value="@bind(fx.name)" mold="rounded"
                    placeholder="Text" constraint="${vm.nameConstraint}" width="150px"
                    maxlength="100" rows="2" draggable="false"
                                style="resize:none" value="" readonly="true"
                                sclass="field-data" width="692px" />
                <asteriskLabel value="Enabled" showStar="false"         </hbox>
                    </hlayout>

                </groupbox>
                <separator />
                <checkbox checked="@bind(fx.enabled)" <groupbox mold="3d" width="770px" draggable="grpbox"
                    droppable="grpbox" onDrop="move(event.dragged)">
                    <caption
                        label="Tracking Dates and Reference Information"
                        sclass="group-header" />
            </row>
            <row>
                <asteriskLabel value="Hierarchy" showStar="true"         <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" />
                <combobox model="@load(vm.hierarchyTypeList)"
                    selectedItem="@bind(fx.hierarchyTypeId)" autocomplete="false"
                    readonly="true" width="150px" autodrop="true" mold="rounded"
                    buttonVisible="true" placeholder="Select One"
                    constraint="no empty">
                    <template name="model" var="model">
                        <comboitem value="@load(model.id)"
                            label="@load(model.name)"             </x:td>
                            <x:td width="150px">
                                <label value="2013-11-07"
                                    sclass="field-data" />
                    </template>
                </combobox>
                <asteriskLabel value="Node Type" showStar="true"         </x:td>
                            <x:td align="right">
                                <label value="Issue/Approve"
                                    sclass="field-label" />
                <combobox model="@load(vm.nodeTypeList)"
                    selectedItem="@bind(vm.item.nodeTypeId) @converter(vm.comboboxSelectedItemConverter)"
                    autocomplete="false" readonly="true" width="150px" autodrop="true"
                    mold="rounded" buttonVisible="true" placeholder="Select One"
                    constraint="no empty">
                    <template name="model" var="model">
                        <comboitem value="@load(model.id)"
                            label="@load(model.name)"             </x:td>
                            <x:td width="150px">
                                <label id="issueDate" value=""
                                    sclass="field-data" />
                    </template>
                </combobox>
            </row>
            <row>
                <asteriskLabel value="Icon" showStar="true"         </x:td>
                            <x:td align="right">
                                <label value="Expires"
                                    sclass="field-label" />
                <!--<textbox mold="@load(vm.iconList)" value="@load(fx.iconId)"></textbox> -->
            </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 />
     <combobox model="@load(vm.iconList)"
                    autocomplete="false"
                    selectedItem="@bind(fx.iconId) @converter(vm.comboboxSelectedItemConverter)  "
                    readonly="true" width="150px" autodrop="true" buttonVisible="true"
                    placeholder="Select One" constraint="no empty"
                    id="icon_combobox">
                    <template name="model" var="model">
                        <comboitem value="@load(model.id)"
                            label="@load(model.name)"
                            imageContent="@load(model.content) @converter(vm.iconConvertCombobox)">
                        </comboitem>
                    </template>
</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);
    //}
}
</combobox> <asteriskLabel value="Description" showStar="False" /> <textbox value="@bind(fx.description)" multiline="true" mold="rounded" placeholder="Text" width="150px" /> </row> <row spans="4" align="right"> <hbox style="padding-right:42px"> <button id="submitBtn" onClick="@command('submit', target=self)" mold="trendy" label="@bind(item.id eq null?'Create':'Save') " autodisable="self,cancelBtn" /> <button label="Cancel" id="cancelBtn" mold="trendy" onClick="nodeTypeForm.detach()" autodisable="self,submitBtn" /> </hbox> </row> </rows> </grid>

]]></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;
    }
}

How to Save Window Component State in DB.

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

]]></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;
    }
}
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More