Componen, Fungsi & Event Framework zkoss - I [ Windows ]

 

Berikut adalah contoh membuat windows pada zkoss 

1. Windows

<zk>

<window id="win" border="normal" width="350px"  minheight="350">

<caption image="/img/FirstWindow-24x24.png" label="Complex Window"/>

</window>

</zk>



2. Modal Dialog

<zk>

<window title="Modal Dialog" border="normal">

<button label="Hello.doModal" autodisable="self">

<attribute name="onClick">{

final Window win = (Window) Executions.createComponents(

"/layout/hello-template.zul", null, null);

win.setMaximizable(true);

win.doModal();

}</attribute>

</button>

</window>

</zk>



3. Posisi Window

<zk>

    <style>

        .sysWin .z-window-embedded-cnt ,

        .sysWin .z-window-overlapped-cnt,

        .sysWin .z-window-popup-cnt {padding: 0px;}

    </style>

    <div height="380px">

        <window id="win" border="normal" width="350px" minheight="350" sclass="sysWin">

            <caption label="Complex Window" image="/img/FirstWindow-24x24.png" />

        </window>

</zk>


4. MessageBox

<zk>

<window title="Messagebox" border="normal">
<button label="Warning" width="100px">
<attribute name="onClick">{
Messagebox.show("Warning is pressed", "Warning", Messagebox.OK, Messagebox.EXCLAMATION);
}</attribute>
</button>
<button label="Question" width="100px">
<attribute name="onClick">{
Messagebox.show("Question is pressed. Are you sure?", "Question", Messagebox.OK | Messagebox.CANCEL, Messagebox.QUESTION);
}</attribute>
</button>
<button label="Information" width="100px">
<attribute name="onClick">{
Messagebox.show("Information is pressed", "Information", Messagebox.OK, Messagebox.INFORMATION);
}</attribute>
</button>
<button label="Error" width="100px">
<attribute name="onClick">{
Messagebox.show("Error is pressed", "Error", Messagebox.OK, Messagebox.ERROR);
}</attribute>
</button>
</window>

</zk>


5. Panel 

<zk>

<panel id="panel" framable="true" width="500px" height="400px"

title="Panel" maximizable="true" minimizable="true" border="normal"

collapsible="true" closable="true">

</panel>

<panel>

<panelchildren>

</panelchildren>

</panel>

</zk>


Reference : https://www.zkoss.org/zksandbox/#g2