I like the Form design in zk sample 2 application. I just want to keep bookmark for that. Here is one of the screen used in the application.
Thanks to Stephan who helped me to complete this task.
Here is the code
1: <?xml version="1.0" encoding="UTF-8"?>
2: <zk xmlns="http://www.zkoss.org/2005/zul"
3: xmlns:h="http://www.w3.org/1999/xhtml"
4: xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5: xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
6: 7: <style src="css/zul/zksample2.css" />
8: 9: <window id="window_customerDialog" title="Customer" border="none"
10: closable="true" width="900px" mode="modal" height="600px"
11: sizable="true">
12: 13: 14: <div sclass="z-toolbar" style="padding:0">
15: <hbox pack="stretch" sclass="hboxRemoveWhiteStrips"
16: width="100%">
17: 18: <!-- COMMON BUTTONS -->
19: <toolbar align="start"
20: style="float:left; border-style: none;">
21: 22: <toolbarbutton id="btnHelp"
23: image="/images/icons/light_16x16.gif" />
24: 25: </toolbar>
26: 27: <!-- SEARCH AREA -->
28: <toolbar align="center"
29: style="float:left; border-style: none;">
30: <hbox align="center" style="padding: 2px"></hbox>
31: </toolbar>
32: 33: <!-- CRUD BUTTONS -->
34: <toolbar align="end"
35: style="float:right; border-style: none;">
36: <button id="btnNew" sclass="oT_ButtonWithIcon" />
37: <button id="btnEdit" sclass="oT_ButtonWithIcon" />
38: <button id="btnDelete" sclass="oT_ButtonWithIcon" />
39: <button id="btnSave" sclass="oT_ButtonWithIcon" />
40: <button id="btnCancel" sclass="oT_ButtonWithIcon" />
41: <button id="btnClose" sclass="oT_ButtonWithIcon" />
42: </toolbar>
43: </hbox>
44: </div>
45: 46: <borderlayout id="borderlayoutCustomer">
47: <north border="none" margins="0,0,0,0"></north>
48: 49: <center border="none">
50: <div id="divCenterCustomer">
51: 52: <tabbox id="tabBoxCustomer" width="100%">
53: <tabs>
54: <tab id="tabCustomerDialogAddress"
55: label="Address" />
56: <tab id="tabCustomerDialogChart"
57: label="Chart" />
58: <tab id="tabCustomerDialogOrders"
59: label="Orders" />
60: <tab id="tabCustomerDialogMemos"
61: label="Memos" />
62: </tabs>
63: <tabpanels>
64: 65: <!-- Tab Address -->
66: <tabpanel id="tabPanelCustomerAddress"
67: height="100%" style="border: 0px; padding: 0px">
68: 69: <hbox align="stretch" pack="stretch"
70: sclass="FDCenterNoBorder" width="100%">
71: 72: <!-- Left CONTENT AREA -->
73: <!-- simulates a columnLayout -->
74: <cell width="50%">
75: <vbox align="stretch"
76: pack="stretch" width="100%" style="padding: 13px;">
77: <div>
78: 79: <panel
80: id="panel_CustomerDialog_Address" border="none">
81: <panelchildren>
82: 83: <groupbox
84: id="gb_address" mold="3d" closable="false">
85: <caption
86: image="/images/icons/view.gif" label="Address" />
87: 88: <grid
89: sclass="GridPlain">
90: <columns>
91: <column
92: align="right" width="150px" />
93: <column
94: width="100%" />
95: </columns>
96: <rows>
97: <row>
98: <hbox>
99: <label
100: value="Customer No" />
101: <label
102: value="*" style="color:red;font-size:10px" />
103: </hbox>
104: 105: <textbox
106: id="kunNr" hflex="1" />
107: </row>
108: <row>
109: <separator
110: bar="true">
111: </separator>
112: <separator
113: bar="true">
114: </separator>
115: </row>
116: <row>
117: <hbox>
118: <label
119: value="Match Code" />
120: <label
121: value="*" style="color:red;font-size:10px" />
122: </hbox>
123: 124: <textbox
125: id="kunMatchcode" hflex="1" />
126: </row>
127: <row>
128: <separator
129: bar="true">
130: </separator>
131: <separator
132: bar="true">
133: </separator>
134: </row>
135: <row>
136: <hbox>
137: <label
138: value="Name1" />
139: <label
140: value="*" style="color:red;font-size:10px" />
141: </hbox>
142: 143: <textbox
144: id="kunName1" hflex="1" />
145: </row>
146: <row>
147: <label
148: id="label_CustomerDialog_kunName2" value="Name2" />
149: <textbox
150: id="kunName2" hflex="1" />
151: </row>
152: <row>
153: <hbox>
154: <label
155: value="City" />
156: <label
157: value="*" style="color:red;font-size:10px" />
158: </hbox>
159: 160: <textbox
161: id="kunOrt" hflex="1" />
162: </row>
163: 164: <row>
165: <hbox>
166: <label
167: value="Branch" />
168: <label
169: value="*" style="color:red;font-size:10px" />
170: </hbox>
171: 172: <grid
173: sclass="GridPlainOneTextboxAndButtonRow">
174: <columns>
175: <column
176: width="100%" />
177: <column
178: align="right" width="100px" />
179: </columns>
180: <rows>
181: 182: <row>
183: <textbox
184: id="kunBranche" hflex="1" />
185: 186: <hbox>
187: <space
188: width="5px" />
189: <button
190: id="btnSearchBranchSimple" disabled="true"
191: width="28px"
192: image="/images/icons/btn_search2_16x16.gif" />
193: <button
194: id="btnSearchBranchAdvanced" disabled="true"
195: width="28px"
196: image="/images/icons/btn_search2_16x16.gif" />
197: <button
198: id="btnSearchBranchExtended" disabled="true"
199: width="28px"
200: image="/images/icons/btn_search2_16x16.gif" />
201: 202: </hbox>
203: </row>
204: 205: </rows>
206: </grid>
207: 208: </row>
209: </rows>
210: </grid>
211: </groupbox>
212: </panelchildren>
213: </panel>
214: <separator spacing="20px" />
215: 216: <panel
217: id="panel_CustomerDialog_Addition" border="none">
218: <panelchildren>
219: 220: <groupbox
221: id="gb_Addition" mold="3d" closable="false">
222: <caption
223: image="/images/icons/table.gif" label="Additionaly 1" />
224: 225: <grid
226: sclass="GridPlain">
227: <columns>
228: <column
229: align="right" width="150px" />
230: <column
231: width="100%" />
232: </columns>
233: <rows>
234: <row>
235: <label
236: id="label_CustomerDialog_kunMahnsperre"
237: value="Lock Remainder" />
238: <checkbox
239: id="kunMahnsperre" />
240: </row>
241: </rows>
242: </grid>
243: </groupbox>
244: </panelchildren>
245: </panel>
246: <separator spacing="20px" />
247: <panel
248: id="panel_CustomerDialog_Phone" border="none">
249: <panelchildren>
250: 251: <groupbox
252: id="gb_Phone" mold="3d" closable="false">
253: <caption
254: image="/images/icons/telephone_16x16.png"
255: label="Phone/Fax" />
256: 257: <grid
258: sclass="GridPlain">
259: <columns>
260: <column
261: align="right" width="150px" />
262: <column
263: width="100%" />
264: </columns>
265: <rows>
266: <row>
267: <label
268: id="label_CustomerDialog_kunPhone1" value="Phone1" />
269: <textbox
270: value="not used in example" hflex="1" />
271: </row>
272: <row>
273: <label
274: id="label_CustomerDialog_kunPhone2" value="Phone2" />
275: <textbox
276: value="not used in example" hflex="1" />
277: </row>
278: <row>
279: <label
280: id="label_CustomerDialog_kunMobile" value="Mobile" />
281: <textbox
282: value="not used in example" hflex="1" />
283: </row>
284: <row>
285: <label
286: id="label_CustomerDialog_kunFax1" value="Fax1" />
287: <textbox
288: value="not used in example" hflex="1" />
289: </row>
290: <row>
291: <label
292: id="label_CustomerDialog_kunFax2" value="Fax2" />
293: <textbox
294: value="not used in example" hflex="1" />
295: </row>
296: </rows>
297: </grid>
298: </groupbox>
299: </panelchildren>
300: </panel>
301: 302: </div>
303: </vbox>
304: </cell>
305: <separator spacing="20px" />
306: <!-- Right AREA -->
307: <cell width="50%">
308: <vbox align="stretch"
309: pack="stretch" width="100%" style="padding: 13px;">
310: <div>
311: 312: <panel
313: id="panel_CustomerDialog_PayConditions" border="none"
314: visible="true">
315: <panelchildren>
316: 317: <groupbox
318: id="gb_PayConditions" mold="3d" closable="false">
319: <caption
320: image="/images/icons/money_16x16.png" label="Payment" />
321: 322: <grid
323: sclass="GridPlain">
324: <columns>
325: <column
326: align="right" width="150px" />
327: <column
328: width="100%" />
329: </columns>
330: <rows>
331: <row>
332: <label
333: id="label_CustomerDialog_kunPayCondition"
334: value="Payment Condition" />
335: <listbox
336: mold="select" rows="1" hflex="1" />
337: </row>
338: <row>
339: <label
340: id="label_CustomerDialog_kunBonitaet"
341: value="Credit Note" />
342: <intbox
343: id="intbox_CustomerDialog_kunBonitaet" width="50px" />
344: </row>
345: <row>
346: <label
347: id="label_CustomerDialog_AmountLastYear"
348: value="Amount Last Year" />
349: <textbox
350: value="not used at time" hflex="1" />
351: </row>
352: <row>
353: <label
354: id="label_CustomerDialog_AmountCurrentYear"
355: value="Amount Current Year" />
356: <textbox
357: value="not used at time" hflex="1" />
358: </row>
359: <row>
360: <label
361: id="label_CustomerDialog_AmountCurrentMonth"
362: value="Amount Current Month" />
363: <textbox
364: value="not used at time" hflex="1" />
365: </row>
366: <row>
367: <label
368: id="label_CustomerDialog_AmountLastInvoice"
369: value="Amount Last Invoice" />
370: <textbox
371: value="not used at time" hflex="1" />
372: </row>
373: </rows>
374: </grid>
375: </groupbox>
376: </panelchildren>
377: </panel>
378: <separator spacing="20px" />
379: <panel
380: id="panel_CustomerDialog_Addition2" border="none">
381: <panelchildren>
382: 383: <groupbox
384: id="gb_Addition2" mold="3d" closable="false">
385: <caption
386: image="/images/icons/text_signature_16x16.png"
387: label="Additionally 2" />
388: 389: <grid
390: sclass="GridPlain">
391: <columns>
392: <column
393: align="right" width="150px" />
394: <column
395: width="100%" />
396: </columns>
397: <rows>
398: <row>
399: <label
400: id="label_CustomerDialog_Addition1"
401: value="Addition1" />
402: <textbox
403: value="not used at time" hflex="1" />
404: </row>
405: <row>
406: <label
407: id="label_CustomerDialog_Addition2"
408: value="Addition2" />
409: <textbox
410: value="not used at time" hflex="1" />
411: </row>
412: <row>
413: <label
414: id="label_CustomerDialog_Addition3"
415: value="Addition3" />
416: <textbox
417: value="not used at time" hflex="1" />
418: </row>
419: <row>
420: <label
421: id="label_CustomerDialog_Addition4"
422: value="Addition4" />
423: <textbox
424: value="not used at time" hflex="1" />
425: </row>
426: <row>
427: <label
428: id="label_CustomerDialog_Addition5"
429: value="Addition5" />
430: <textbox
431: value="not used at time" hflex="1" />
432: </row>
433: </rows>
434: </grid>
435: </groupbox>
436: </panelchildren>
437: </panel>
438: 439: </div>
440: </vbox>
441: </cell>
442: </hbox>
443: 444: </tabpanel>
445: 446: <tabpanel id="tabPanelCustomerDialogChart"
447: height="100%" style="border: 0px; padding: 0px">
448: </tabpanel>
449: 450: <tabpanel id="tabPanelCustomerOrders"
451: height="100%" style="border: 0px; padding: 0px" />
452: 453: <tabpanel id="tabPanelCustomerMemos"
454: height="100%" style="border: 0px; padding: 0px">
455: not used yet456: </tabpanel>
457: </tabpanels>
458: </tabbox>
459: 460: </div>
461: </center>
462: 463: </borderlayout>
464: 465: 466: </window>
467: </zk>
468: 469: <!--
470: Panel style="margin-bottom:5px"
471: -->