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: -->

1 comment:

  1. We are a third party technical support service. Avast Customer Support is here to help you out with the whole procedure to Download Avast Antivirus online, We not only fix your Avast Support related issues but will guide with how to get started with your new Avast product once it gets installed successfully. Call on our Toll Free no. 1 855 966 3855
    Gmail Customer service is a third party technical support service for Gmail users when they face any technical issue or error in their Gmail account. Our Gmail Customer Support team solves issues like forgot Gmail account password, Gmail configuration or Sync issues, recover deleted emails and many more. Toll Free number (800) 986-9271
    How you install or reinstall Office 365 or Office 2016 depends on whether your Office product is part of an Office for home or Office for business plan. If you're not sure what you have, see what office com setup products are included in each plan and then follow the steps for your product. The steps below also apply if you're installing a single, stand-alone Office application such as Access 2016 or Visio 2016. Need Help with office setup Enter Product Key? Call 1-800-000-0000 Toll Free
    Norton Tech Support is a third party service provider and not in any way associated with Norton or any of its partner companies. We offer support for Norton products and sell subscription based additional warranty on computer and other peripheral devices. Call our Toll Free number 1 855 966 3855
    Other Services
    Norton Toll Free , Office-Setup , office.com/setup.

    ReplyDelete

Passing Parameter between two files using MVVM

This examples shows how to pass parameter between two zul screens. In this example, we are passing some parameters from the parent vm to...