Tuesday, 30 October 2012

Form Fields Layout

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.

image

 

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 yet
 456:                             </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: -->

No comments:

Post a Comment