Thursday, 1 November 2012

ZK Form Design–CRUD Screen Example

image

Zul File

   1: <zk>
   2:     <style src="/practice.css" />
   3:     <window id="PracticeCRUD" title=" " width="520px"
   4:         height="auto" border="normal" minimizable="false" mode="modal" sclass="mymodal"
   5:         maximizable="false" closable="true"
   6:         apply="org.zkoss.bind.BindComposer">
   7:         <separator />
   8:         <label value="Practice information" sclass="flbltitle" />
   9:         <separator />
  10:         <panel width="100%">
  11:             <panelchildren>
  12:                 <separator />
  13:                 <grid width="99.5%" sclass="fgrid">
  14:                     <columns>
  15:                         <column label="" width="150px" />
  16:                         <column label="" />
  17:                     </columns>
  18:                     <rows>
  19:                         <row>
  20:                             <hbox>
  21:                                 <label value="Practice Code" sclass="flabel" />
  22:                                 <label value="*"  sclass="flblreq" />
  23:                             </hbox>
  24:                             <textbox id="txtLoginURL" name="txtLoginURL"
  25:                                 cols="50" maxlength="25" />
  26:                         </row>
  27:                         <row>
  28:                             <hbox>
  29:                                 <label value="Practice Name" sclass="flabel" />
  30:                                 <label value="*" sclass="flblreq" />
  31:                             </hbox>
  32:                             <textbox id="txtPracticeName"
  33:                                 name="txtPracticeName" cols="50" maxlength="50" />
  34:                         </row>
  35:                         <row>
  36:                             <hbox>
  37:                                 <label value="Street Address" sclass="flabel" />
  38:                                 <label value="*" sclass="flblreq" />
  39:                             </hbox>
  40:                             <textbox id="txtAddress1" name="txtAddress1"
  41:                                 cols="50" maxlength="30" />
  42:                         </row>
  43:                         <row>
  44:                             <label value="" />
  45:                             <textbox id="txtAddress2" name="txtAddress2"
  46:                                 cols="50" maxlength="30" />
  47:                         </row>
  48:                         <row>
  49:                             <hbox>
  50:                                 <label value="City" sclass="flabel" />
  51:                                 <label value="*" sclass="flblreq" />
  52:                             </hbox>
  53:                             <textbox id="txtCity" name="txtCity"
  54:                                 cols="50" maxlength="20" />
  55:                         </row>
  56:                         <row>
  57:                             <hbox>
  58:                                 <label value="State" sclass="flabel" />
  59:                                 <label value="*" sclass="flblreq" />
  60:                             </hbox>
  61:                             <combobox id="cmbstate" width="150px"> </combobox>
  62:                         </row>
  63:                         <row>
  64:                             <hbox>
  65:                                 <label value="Zip" sclass="flabel" />
  66:                                 <label value="*" sclass="flblreq" />
  67:                             </hbox>
  68:                             <textbox id="txtZipCode" name="txtZipCode"
  69:                                 cols="30" />
  70:                         </row>
  71:  
  72:                         <row>
  73:                             <hbox>
  74:                                 <label value="NPI" sclass="flabel" />
  75:                             </hbox>
  76:                             <textbox id="txtNPI" name="txtNPI"
  77:                                 maxlength="10" />
  78:                         </row>
  79:                         <row>
  80:                             <hbox>
  81:                                 <label value="EIN" sclass="flabel" />
  82:                             </hbox>
  83:                             <textbox id="txtEIN" name="txtEIN" />
  84:                         </row>
  85:                         <row>
  86:                             <hbox>
  87:                                 <label value="Email" sclass="flabel" />
  88:                             </hbox>
  89:                             <textbox id="txtEmail" name="txtEmail"
  90:                                 cols="50" maxlength="50" />
  91:                         </row>
  92:                         <row>
  93:                             <hbox>
  94:                                 <label value="Phone" sclass="flabel" />
  95:                                 <label value="*" sclass="flblreq" />
  96:                             </hbox>
  97:                             <hbox>
  98:                                 <textbox id="phone1" name="phone1"
  99:                                     width='150px' />
 100:                                 <label value="Ext" sclass="flabel" />
 101:                                 <textbox id="txtPhoneExt"
 102:                                     name="txtPhoneExt" />
 103:                             </hbox>
 104:                         </row>
 105:                         <row>
 106:                             <hbox>
 107:                                 <label value="Fax" sclass="flabel" />
 108:                             </hbox>
 109:                             <textbox id="txtFax" name="txtFax" />
 110:                         </row>
 111:                     </rows>
 112:                 </grid>
 113:             </panelchildren>
 114:         </panel>
 115:         <separator />
 116:         <div align="center">
 117:             <button id="submit" label="Submit" sclass="mybutton blue small bigrounded" mold="trendy" />
 118:             <button id="cancel" label="Cancel" sclass="mybutton blue small bigrounded" mold="trendy" />
 119:         </div>
 120:         <separator />
 121:     </window>
 122: </zk>

CSS File


   1: .fgrid tr.z-row
   2:         td.z-row-inner,tr.z-row,div.z-grid-body div.z-cell,div.z-grid {
   3:     border: none;
   4:     overflow: hidden;
   5:     zoom: 1;
   6:     background: white;
   7:     border-top: none;
   8:     border-left: none;
   9:     border-right: none;
  10:     border-bottom: none;
  11: }
  12:  
  13: .fgrid .z-grid-odd .fgrid .z-row-inner, .fgrid .z-grid-odd .z-cell {
  14:     background-color: #F7F7F7;
  15:     border-bottom: 1px solid transparent;
  16:     border-left: 1px solid transparent;
  17:     border-top: 1px solid transparent;
  18: }
  19:  
  20:  
  21: .fgrid .z-grid-odd .fgrid.z-row-inner, .fgrid.z-grid-odd .z-cell, .fgrid.z-grid-odd {
  22:     background: none repeat scroll 0 0 transparent;
  23:  
  24: }
  25:  
  26: .mymodal .z-window-modal-hm,.mymodal .z-window-modal-br,.mymodal .z-window-modal-cr,.mymodal .z-window-modal-cl,.mymodal .z-window-modal-hr,.mymodal .z-window-modal-tr,.mymodal .z-window-modal-hl
  27:     {
  28:     background-image: none;
  29:     background-color: #0C6BA8;
  30: }
  31:  
  32:  
  33: .mymodal.z-window-modal-shadow, .z-window-highlighted-shadow {
  34:     box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
  35: }
  36:  
  37: .mymodal .z-window-modal-icon {
  38:     width: 20px;
  39:     height: 16px;
  40:     border-width: 1px;
  41:     border-style: solid;
  42:     border-color: #0C6BA8 #0C6BA8 #0C6BA8 #0C6BA8;
  43:     box-shadow: inset 0 1px 0 #0C6BA8, inset -1px -1px 0 #0C6BA8, inset -1px
  44:         -2px 0 #0C6BA8;
  45: }
  46:  
  47: .mymodal .z-window-modal-close {
  48:     background: url('images/close.jpg') transparent no-repeat 0 0;
  49: }
  50:  
  51: .mymodal .z-window-modal-header,.mymodal .z-window-modal-header-noborder
  52:     {
  53:     padding-top: 1px;
  54:     padding-right: -1px;
  55:     padding-bottom: 1px;
  56:     padding-left: 0;
  57:     margin-right: -4px;
  58:     color: white;
  59:     font-family: "Tahoma", verdana, arial, sans-serif;
  60:     font-size: 12px;
  61:     font-weight: bolder;
  62: }
  63:  
  64: /* Start: Input Form Title 
  65: ---------------------------------------------- */
  66: .flbltitle.z-label {
  67:     font-size: 14px;
  68:     font-weight: bolder;
  69:     color: #0C6BA8;
  70: }
  71:  
  72: /* End: Input Form Title 
  73: ---------------------------------------------- */
  74:  
  75: /* Start: Input Form Label
  76: ---------------------------------------------- */
  77: .flabel.z-label {
  78:     font-size: 12px;
  79:     font-family: verdana, arial, sans-serif
  80: }
  81:  
  82: /* End: Input Form Label 
  83: ---------------------------------------------- */
  84:  
  85: /* Start: Required Field asterix 
  86: ---------------------------------------------- */
  87: .flblreq.z-label {
  88:     font-size: 16px;
  89:     font-weight: bolder;
  90:     color: red;
  91: }
  92:  
  93: /* End: Required Field asterix 
  94: ---------------------------------------------- */
  95:  
  96: /* button 
  97: ---------------------------------------------- */
  98: .mybutton.z-button .z-button-cm {
  99:     background-image: none;
 100:     color: white;
 101:     font-weight: bolder;
 102: }
 103:  
 104: .mybutton.z-button .z-button-tm,.z-button .z-button-bm {
 105:     background-image: none;
 106: }
 107:  
 108: .mybutton.z-button .z-button-cl,.z-button .z-button-cr {
 109:     background-image: none;
 110: }
 111:  
 112: .mybutton.z-button .z-button-tl {
 113:     background-image: none;
 114: }
 115:  
 116: .mybutton.z-button .z-button-bl {
 117:     background-image: none;
 118: }
 119:  
 120: .mybutton.z-button .z-button-tr {
 121:     background-image: none;
 122: }
 123:  
 124: .mybutton.z-button .z-button-br {
 125:     background-image: none;
 126: }
 127:  
 128: .button {
 129:     display: inline-block;
 130:     zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
 131:     *display: inline;
 132:     vertical-align: baseline;
 133:     margin: 0 2px;
 134:     outline: none;
 135:     cursor: pointer;
 136:     text-align: center;
 137:     text-decoration: none;
 138:     font: 14px/100% Arial, Helvetica, sans-serif;
 139:     padding: .5em 2em .55em;
 140:     text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
 141:     -webkit-border-radius: .5em;
 142:     -moz-border-radius: .5em;
 143:     border-radius: .5em;
 144:     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
 145:     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
 146:     box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
 147: }
 148:  
 149: .button:hover {
 150:     text-decoration: none;
 151: }
 152:  
 153: .button:active {
 154:     position: relative;
 155:     top: 1px;
 156: }
 157:  
 158: .smallrounded {
 159:     -webkit-border-radius: 9em;
 160:     -moz-border-radius: 9em;
 161:     border-radius: 9em;
 162: }
 163:  
 164: .bigrounded {
 165:     -webkit-border-radius: 2em;
 166:     -moz-border-radius: 2em;
 167:     border-radius: 2em;
 168: }
 169:  
 170: .medium {
 171:     font-size: 12px;
 172:     padding: .4em 1.5em .42em;
 173: }
 174:  
 175: .small {
 176:     font-size: 11px;
 177:     padding: .2em 1em .275em;
 178: }
 179:  
 180: .roundsearch {
 181:     background-image: url('../images/green_search_button.png');
 182:     background-position: center;
 183:     height: 22px;
 184:     width: 22px;
 185: }
 186:  
 187: .roundsearch:hover {
 188:     background-image: url('../images/green_search_button-hover.png');
 189:     background-position: center;
 190:     height: 22px;
 191:     width: 22px;
 192: }
 193:  
 194: /* color styles 
 195: ---------------------------------------------- */
 196:  
 197: /* black */
 198: .black {
 199:     color: #d7d7d7;
 200:     border: solid 1px #333;
 201:     background: #333;
 202:     background: -webkit-gradient(linear, left top, left bottom, from(#666),
 203:         to(#000) );
 204:     background: -moz-linear-gradient(top, #666, #000);
 205:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',
 206:         endColorstr='#000000' );
 207:     padding: 3px 5px 3px 5px;
 208: }
 209:  
 210: .black:hover {
 211:     background: #000;
 212:     background: -webkit-gradient(linear, left top, left bottom, from(#444),
 213:         to(#000) );
 214:     background: -moz-linear-gradient(top, #444, #000);
 215:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',
 216:         endColorstr='#000000' );
 217:     padding: 4px 5px 2px 5px;
 218: }
 219:  
 220: .black:active {
 221:     color: #666;
 222:     background: -webkit-gradient(linear, left top, left bottom, from(#000),
 223:         to(#444) );
 224:     background: -moz-linear-gradient(top, #000, #444);
 225:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
 226:         endColorstr='#666666' );
 227:     padding: 3px 5px 3px 5px;
 228: }
 229:  
 230: /* gray */
 231: .gray {
 232:     color: #e9e9e9;
 233:     border: solid 1px #555;
 234:     background: #6e6e6e;
 235:     background: -webkit-gradient(linear, left top, left bottom, from(#888),
 236:         to(#575757) );
 237:     background: -moz-linear-gradient(top, #888, #575757);
 238:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',
 239:         endColorstr='#575757' );
 240:     padding: 3px 5px 3px 5px;
 241: }
 242:  
 243: .gray:hover {
 244:     background: #616161;
 245:     background: -webkit-gradient(linear, left top, left bottom, from(#757575),
 246:         to(#4b4b4b) );
 247:     background: -moz-linear-gradient(top, #757575, #4b4b4b);
 248:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',
 249:         endColorstr='#4b4b4b' );
 250:     padding: 4px 5px 2px 5px;
 251: }
 252:  
 253: .gray:active {
 254:     color: #afafaf;
 255:     background: -webkit-gradient(linear, left top, left bottom, from(#575757),
 256:         to(#888) );
 257:     background: -moz-linear-gradient(top, #575757, #888);
 258:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
 259:         endColorstr='#888888' );
 260:     padding: 3px 5px 3px 5px;
 261: }
 262:  
 263: /* white */
 264: .white {
 265:     color: #606060;
 266:     border: solid 1px #b7b7b7;
 267:     background: #fff;
 268:     background: -webkit-gradient(linear, left top, left bottom, from(#fff),
 269:         to(#ededed) );
 270:     background: -moz-linear-gradient(top, #fff, #ededed);
 271:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
 272:         endColorstr='#ededed' );
 273:     padding: 3px 5px 3px 5px;
 274: }
 275:  
 276: .white:hover {
 277:     background: #ededed;
 278:     background: -webkit-gradient(linear, left top, left bottom, from(#fff),
 279:         to(#dcdcdc) );
 280:     background: -moz-linear-gradient(top, #fff, #dcdcdc);
 281:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
 282:         endColorstr='#dcdcdc' );
 283:     padding: 4px 5px 2px 5px;
 284: }
 285:  
 286: .white:active {
 287:     color: #999;
 288:     background: -webkit-gradient(linear, left top, left bottom, from(#ededed),
 289:         to(#fff) );
 290:     background: -moz-linear-gradient(top, #ededed, #fff);
 291:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',
 292:         endColorstr='#ffffff' );
 293:     padding: 3px 5px 3px 5px;
 294: }
 295:  
 296: /* orange */
 297: .orange {
 298:     color: #fef4e9;
 299:     border: solid 1px #da7c0c;
 300:     background: #f78d1d;
 301:     background: -webkit-gradient(linear, left top, left bottom, from(#ffac53),
 302:         to(#fe7d1e) );
 303:     background: -moz-linear-gradient(top, #ffac53, #fe7d1e);
 304:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffac53',
 305:         endColorstr='#fe7d1e' );
 306:     padding: 3px 5px 3px 5px;
 307: }
 308:  
 309: .orange:hover {
 310:     background: #f47c20;
 311:     background: -webkit-gradient(linear, left top, left bottom, from(#fe7d1e),
 312:         to(#ffac53) );
 313:     background: -moz-linear-gradient(top, #fe7d1e, #ffac53);
 314:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7d1e',
 315:         endColorstr='#ffac53' );
 316:     padding: 4px 5px 2px 5px;
 317: }
 318:  
 319: .orange:active {
 320:     color: #fcd3a5;
 321:     background: -webkit-gradient(linear, left top, left bottom, from(#f47a20),
 322:         to(#faa51a) );
 323:     background: -moz-linear-gradient(top, #f47a20, #faa51a);
 324:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',
 325:         endColorstr='#faa51a' );
 326:     padding: 3px 5px 3px 5px;
 327: }
 328:  
 329: /* red */
 330: .red {
 331:     color: #faddde;
 332:     border: solid 1px #980c10;
 333:     background: #d81b21;
 334:     background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24),
 335:         to(#aa1317) );
 336:     background: -moz-linear-gradient(top, #ed1c24, #aa1317);
 337:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',
 338:         endColorstr='#aa1317' );
 339:     padding: 3px 5px 3px 5px;
 340: }
 341:  
 342: .red:hover {
 343:     background: #b61318;
 344:     background: -webkit-gradient(linear, left top, left bottom, from(#c9151b),
 345:         to(#a11115) );
 346:     background: -moz-linear-gradient(top, #c9151b, #a11115);
 347:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',
 348:         endColorstr='#a11115' );
 349:     padding: 4px 5px 2px 5px;
 350: }
 351:  
 352: .red:active {
 353:     color: #de898c;
 354:     background: -webkit-gradient(linear, left top, left bottom, from(#aa1317),
 355:         to(#ed1c24) );
 356:     background: -moz-linear-gradient(top, #aa1317, #ed1c24);
 357:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',
 358:         endColorstr='#ed1c24' );
 359:     padding: 3px 5px 3px 5px;
 360: }
 361:  
 362: /* blue */
 363: .blue {
 364:     color: #d9eef7;
 365:     border: solid 1px #0076a3;
 366:     background: #0095cd;
 367:     background: -webkit-gradient(linear, left top, left bottom, from(#77bcfc),
 368:         to(#286a99) );
 369:     background: -moz-linear-gradient(top, #77bcfc, #286a99);
 370:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77bcfc',
 371:         endColorstr='#286a99' );
 372:     padding: 3px 5px 3px 5px;
 373: }
 374:  
 375: .blue:hover {
 376:     background: #007ead;
 377:     background: -webkit-gradient(linear, left top, left bottom, from(#286a99),
 378:         to(#77bcfc) );
 379:     background: -moz-linear-gradient(top, #286a99, #77bcfc);
 380:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#286a99',
 381:         endColorstr='#77bcfc' );
 382:     padding: 4px 5px 2px 5px;
 383: }
 384:  
 385: .blue:active {
 386:     color: #80bed6;
 387:     background: -webkit-gradient(linear, left top, left bottom, from(#0078a5),
 388:         to(#00adee) );
 389:     background: -moz-linear-gradient(top, #0078a5, #00adee);
 390:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',
 391:         endColorstr='#00adee' );
 392:     padding: 3px 5px 3px 5px;
 393: }
 394:  
 395: /* rosy */
 396: .rosy {
 397:     color: #fae7e9;
 398:     border: solid 1px #b73948;
 399:     background: #da5867;
 400:     background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c),
 401:         to(#bf404f) );
 402:     background: -moz-linear-gradient(top, #f16c7c, #bf404f);
 403:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',
 404:         endColorstr='#bf404f' );
 405:     padding: 3px 5px 3px 5px;
 406: }
 407:  
 408: .rosy:hover {
 409:     background: #ba4b58;
 410:     background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a),
 411:         to(#a53845) );
 412:     background: -moz-linear-gradient(top, #cf5d6a, #a53845);
 413:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',
 414:         endColorstr='#a53845' );
 415:     padding: 4px 5px 2px 5px;
 416: }
 417:  
 418: .rosy:active {
 419:     color: #dca4ab;
 420:     background: -webkit-gradient(linear, left top, left bottom, from(#bf404f),
 421:         to(#f16c7c) );
 422:     background: -moz-linear-gradient(top, #bf404f, #f16c7c);
 423:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',
 424:         endColorstr='#f16c7c' );
 425:     padding: 3px 5px 3px 5px;
 426: }
 427:  
 428: /* green */
 429: .green {
 430:     color: #e8f0de;
 431:     border: solid 1px #538312;
 432:     background: #64991e;
 433:     background: -webkit-gradient(linear, left top, left bottom, from(#93dd31),
 434:         to(#4f8801) );
 435:     background: -moz-linear-gradient(top, #93dd31, #4f8801);
 436:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93dd31',
 437:         endColorstr='#4f8801' );
 438:     padding: 3px 5px 3px 5px;
 439: }
 440:  
 441: .green:hover {
 442:     background: #538018;
 443:     background: -webkit-gradient(linear, left top, left bottom, from(#4f8801),
 444:         to(#93dd31) );
 445:     background: -moz-linear-gradient(top, #4f8801, #93dd31);
 446:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f8801',
 447:         endColorstr='#93dd31' );
 448:     padding: 4px 5px 2px 5px;
 449: }
 450:  
 451: .green:active {
 452:     color: #a9c08c;
 453:     background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e),
 454:         to(#7db72f) );
 455:     background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
 456:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',
 457:         endColorstr='#7db72f' );
 458:     padding: 3px 5px 3px 5px;
 459: }
 460:  
 461: /* pink */
 462: .pink {
 463:     color: #feeef5;
 464:     border: solid 1px #d2729e;
 465:     background: #f895c2;
 466:     background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3),
 467:         to(#f171ab) );
 468:     background: -moz-linear-gradient(top, #feb1d3, #f171ab);
 469:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',
 470:         endColorstr='#f171ab' );
 471:     padding: 3px 5px 3px 5px;
 472: }
 473:  
 474: .pink:hover {
 475:     background: #d57ea5;
 476:     background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb),
 477:         to(#e86ca4) );
 478:     background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
 479:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',
 480:         endColorstr='#e86ca4' );
 481:     padding: 4px 5px 2px 5px;
 482: }
 483:  
 484: .pink:active {
 485:     color: #f3c3d9;
 486:     background: -webkit-gradient(linear, left top, left bottom, from(#f171ab),
 487:         to(#feb1d3) );
 488:     background: -moz-linear-gradient(top, #f171ab, #feb1d3);
 489:     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',
 490:         endColorstr='#feb1d3' );
 491:     padding: 3px 5px 3px 5px;
 492: }
 493:  
 494:  

No comments:

Post a Comment