Look and Feel –> Change the default ZK CSS
We have completed all our CRUD operation in the last post. Now we will see how to override the default ZK CSS and change the look and feel our application.
Changing the style of any ZK Component is pretty easy, all we need to override the css class and define our CSS Properties. There are different ways to you can change the CSS as described here. In this , we are going to define sclass styling.
First let us create the following two folders in webapp folder. Folders are “css” and “images” as shown.
Under the folder css, let us create css file named as “style.css” and copy the below code.
CSS Code
@CHARSET "ISO-8859-1";
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Modal Window CSS Customization
/* ----------------------------------------------------------------------------------------------------------------------- */
.mymodal .z-window-modal-header,.mymodal .z-window-modal-header-noborder
{
padding-top: 1px;
padding-right: -1px;
padding-bottom: 1px;
padding-left: 0;
margin-right: -4px;
color: white;
font-size: 12px;
font-weight: bolder;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Modal Window CSS Customization
/* ----------------------------------------------------------------------------------------------------------------------- */
.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
{
background-image: none;
background: transparent repeat-x 0 0;
background: #6F8992; /* Old browsers */
background-image: -ms-linear-gradient(top, #6F8992 0%, #6F8992 100%);
/* IE10+ */
background-image: -moz-linear-gradient(top, #6F8992 0%, #6F8992 100%);
/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #6F8992 0%, #6F8992 100%);
/* Opera 11.10+ */
background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #6F8992),
color-stop(100%,, #6F8992) ); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #6F8992 0%, #6F8992 100%);
/* Chrome10+,Safari5.1+ */
background-image: linear-gradient(to bottom, #6F8992 0%, #6F8992 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F8992',
endColorstr='#6F8992', GradientType=0 ); /* IE6-9 */
}
.mymodal .z-window-modal-icon {
width: 20px;
height: 16px;
border-width: 1px;
border-style: solid;
border-color: #6F8992 #6F8992 #6F8992 #6F8992;
box-shadow: inset 0 1px 0 #6F8992, inset -1px -1px 0 #6F8992, inset -1px
-2px 0 #6F8992;
}
.mymodal .z-window-modal-close {
background: url('../images/CloseBlue.gif') transparent no-repeat 0 0;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Listbox CSS Customization
/* ----------------------------------------------------------------------------------------------------------------------- */
.z-listcell.highlightcell .z-listcell-cnt,.z-label.highlightcell {
color: blue;
cursor: pointer;
text-decoration: underline;
}
.mylist .z-listbox {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CFCFCF;
overflow: hidden;
}
.mylist .z-listitem-seld {
background-image: none;
background-color: #DDF0FB;
}
.mylist .z-listitem.z-listbox-odd.z-listitem-seld {
background-image: none;
background-color: #E0F7BA;
}
.mylist .z-listitem.z-listitem-over {
background-image: none;
background-color: #E0F7BA;
}
.mylist .z-listitem-odd-seld {
background-image: none;
background-color: #DDF0FB;
}
.mylist .z-listbox-header tr.z-listhead,div.z-listbox-header
tr.z-auxhead {
background-color: #6F8992;
}
/* Header and Footer Font and Height */
.mylist
.z-listfooter-cnt,.mylist .z-listheader-cnt {
border: 0 none;
color: white;
font-size: 13px;
margin: 0;
height: 14px;
}
/* Cell Height and Font */
.mylist .z-listcell-cnt {
font-size: 13px;
height: 20px;
}
.mylist .z-listbox-body .z-listcell,.mylist.z-listbox-footer
.z-listfooter {
cursor: default;
}
.mylist .z-listheader-sort-img {
float: left;
font-size: 0;
left: 90%;
margin-left: auto;
margin-right: auto;
position: absolute;
}
.mylist .z-listbox-header tr.z-listhead,div.z-listbox-header
tr.z-auxhead {
background-image: none;
color: white;
}
.mylist .z-listbox-header th.z-listheader-sort-over {
background-image: none;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Label CSS Customization
/* ----------------------------------------------------------------------------------------------------------------------- */
.TitleWBold.z-label {
font-weight: bolder;
color: #FFFFFF;
}
.TitleBold.z-label {
font-weight: bolder;
}
.sectionTitleLabel.z-label {
font-size: 14px;
font-weight: bolder;
color: #0C6BA8;
}
.flabel.z-label {
font-size: 12px;
font-weight: normal;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Text Box
/* ----------------------------------------------------------------------------------------------------------------------- */
.ftextbox.z-textbox.z-textbox-focus {
border-style: solid;
border-width: 1px;
border-color: blue;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Vertical Grid
/* ----------------------------------------------------------------------------------------------------------------------- */
.vgrid tr.z-row
td.z-row-inner,tr.z-row,div.z-grid-body div.z-cell,div.z-grid {
border: none;
overflow: hidden;
zoom: 1;
background: white;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
}
.vgrid .z-grid-odd .vgrid .z-row-inner,.vgrid .z-grid-odd .z-cell {
background-color: transparent;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;
border-top: 1px solid transparent;
}
.vgrid .z-grid-odd .vgrid.z-row-inner,.vgrid.z-grid-odd .z-cell,.vgrid.z-grid-odd
{
background: none repeat scroll 0 0 transparent;
}
.vgrid tr.z-row td.z-row-inner,.vgrid tr.z-row .z-cell {
line-height: 12px;
}
.vgrid tr.z-grid-odd td.z-row-inner,.vgrid tr.z-grid-odd .z-cell,.vgrid tr.z-grid-odd
{
background: white
}
.vgrid tr.z-row td.z-row-inner,.vgrid tr.z-row .z-cell {
background: white;
border-top: none;
}
/* End: Form Grid
---------------------------------------------- */
/* Start: Action Images- Auditlog
---------------------------------------------- */
.fImageAudit {
width: 25px;
background-image: url('../images/AuditLog.jpg');
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
}
/* Start: Action Images- Edit
---------------------------------------------- */
.fimageedit {
width: 25px;
background-image: url('../images/EditRecord.png');
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
}
/* End: Action Images - Edit
---------------------------------------------- */
/* Start: Action Images- Delete
---------------------------------------------- */
.fimageDelete {
width: 25px;
background-image: url('../images/DeleteRecord.png');
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
}
.fimageView {
width: 25px;
background-image: url('../images/view.png');
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
}
/* End: Action Images - Delete
---------------------------------------------- */
/* Start: Action Images- Active
---------------------------------------------- */
.fimageActive {
width: 25px;
background-image: url('../images/ActiveRecord.png');
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
}
/* End: Action Images - Active
---------------------------------------------- */
/* Start: Action Images- Inactive
---------------------------------------------- */
.fimageInactive {
width: 25px;
background-image: url('../images/DeactivateRecord.png');
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
}
/* End: Action Images - InActive
---------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Label CSS Customization
/* ----------------------------------------------------------------------------------------------------------------------- */
.sectionTitleLabel.z-label {
color: #0C6BA8;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Div(s)
/* ----------------------------------------------------------------------------------------------------------------------- */
.sectionTitle {
float: left;
padding-left: 10px;
}
.sectionTitleBar {
background: none repeat scroll 0 0 #6F8992;
margin-left: 20px;
padding: 2px 5px;
}
.sectionSeperator {
margin-bottom: 18px;
padding-bottom: 0.25em;
margin-left: 10px;
border-bottom: 4px solid #DFDFDF
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------- */
/* Patient Cases
/* ----------------------------------------------------------------------------------------------------------------------- */
.patientcaseHeader {
background: none repeat scroll 0 0 #6F8992;
padding: 2px 10px;
}
/* ----------------------------------------------------------------------------------------------------------------------- */
/* End of Patient Cases
/* ----------------------------------------------------------------------------------------------------------------------- */
.mybutton.z-button .z-button-cm {
background-image: none;
color: white;
font-weight: bolder;
}
.mybutton.z-button .z-button-tm,.z-button .z-button-bm {
background-image: none;
}
.mybutton.z-button .z-button-cl,.z-button .z-button-cr {
background-image: none;
}
.mybutton.z-button .z-button-tl {
background-image: none;
}
.mybutton.z-button .z-button-bl {
background-image: none;
}
.mybutton.z-button .z-button-tr {
background-image: none;
}
.mybutton.z-button .z-button-br {
background-image: none;
}
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 1.5em .42em;
}
.small {
font-size: 11px;
padding: .2em 1em .275em;
}
/* color styles
---------------------------------------------- */
/* black */
.black {
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666),
to(#000) );
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666',
endColorstr='#000000' );
}
.black:hover {
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444),
to(#000) );
background: -moz-linear-gradient(top, #444, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',
endColorstr='#000000' );
}
.black:active {
color: #666;
background: -webkit-gradient(linear, left top, left bottom, from(#000),
to(#444) );
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',
endColorstr='#666666' );
}
/* gray */
.gray {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888),
to(#575757) );
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888',
endColorstr='#575757' );
}
.gray:hover {
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#757575),
to(#4b4b4b) );
background: -moz-linear-gradient(top, #757575, #4b4b4b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575',
endColorstr='#4b4b4b' );
}
.gray:active {
color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom, from(#575757),
to(#888) );
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757',
endColorstr='#888888' );
}
/* white */
.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),
to(#ededed) );
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed' );
}
.white:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),
to(#dcdcdc) );
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#dcdcdc' );
}
.white:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed),
to(#fff) );
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',
endColorstr='#ffffff' );
}
/* orange */
.orange {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a),
to(#f47a20) );
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',
endColorstr='#f47a20' );
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11),
to(#f06015) );
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',
endColorstr='#f06015' );
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20),
to(#faa51a) );
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',
endColorstr='#faa51a' );
}
/* red */
.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24),
to(#aa1317) );
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',
endColorstr='#aa1317' );
}
.red:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b),
to(#a11115) );
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',
endColorstr='#a11115' );
}
.red:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317),
to(#ed1c24) );
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',
endColorstr='#ed1c24' );
}
/* blue */
.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee),
to(#0078a5) );
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',
endColorstr='#0078a5' );
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc),
to(#00678e) );
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',
endColorstr='#00678e' );
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5),
to(#00adee) );
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',
endColorstr='#00adee' );
}
/* rosy */
.rosy {
color: #fae7e9;
border: solid 1px #b73948;
background: #da5867;
background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c),
to(#bf404f) );
background: -moz-linear-gradient(top, #f16c7c, #bf404f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',
endColorstr='#bf404f' );
}
.rosy:hover {
background: #ba4b58;
background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a),
to(#a53845) );
background: -moz-linear-gradient(top, #cf5d6a, #a53845);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a',
endColorstr='#a53845' );
}
.rosy:active {
color: #dca4ab;
background: -webkit-gradient(linear, left top, left bottom, from(#bf404f),
to(#f16c7c) );
background: -moz-linear-gradient(top, #bf404f, #f16c7c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f',
endColorstr='#f16c7c' );
}
/* green */
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f),
to(#4e7d0e) );
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',
endColorstr='#4e7d0e' );
}
.green:hover {
background: #538018;
background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28),
to(#436b0c) );
background: -moz-linear-gradient(top, #6b9d28, #436b0c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',
endColorstr='#436b0c' );
}
.green:active {
color: #a9c08c;
background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e),
to(#7db72f) );
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e',
endColorstr='#7db72f' );
}
/* pink */
.pink {
color: #feeef5;
border: solid 1px #d2729e;
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3),
to(#f171ab) );
background: -moz-linear-gradient(top, #feb1d3, #f171ab);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3',
endColorstr='#f171ab' );
}
.pink:hover {
background: #d57ea5;
background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb),
to(#e86ca4) );
background: -moz-linear-gradient(top, #f4aacb, #e86ca4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb',
endColorstr='#e86ca4' );
}
.pink:active {
color: #f3c3d9;
background: -webkit-gradient(linear, left top, left bottom, from(#f171ab),
to(#feb1d3) );
background: -moz-linear-gradient(top, #f171ab, #feb1d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab',
endColorstr='#feb1d3' );
}
Now let us refer the above CSS in our project. In order to do, please do the following steps.
1. Add ZKAddon.xml(it can be any name), under the webapp folder as shown
Copy the below code.
<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
<addon-name>myaddon</addon-name>
<language-name>xul/html</language-name>
<stylesheet href="/css/style.css" type="text/css" />
</language-addon>
2. Open the zk.xml and add the following line
<?xml version="1.0" encoding="UTF-8"?>
<zk>
<language-config>
<addon-uri>/ZKAddon.xml</addon-uri>
</language-config>
</zk>
Now , we will modify our two zul files to include the sclass attribute for each component
Here is the modified AddressList.zul
<?page title="Address List" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="addressList" border="none"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('zkoss.vm.AddressListVM')">
<separator />
<separator />
<div width="100%">
<div sclass="sectionTitle">
<separator />
<label value="Address Book" sclass="sectionTitleLabel" />
<separator />
</div>
<div style="float:right">
<button label="Add New" onClick="@command('onAddNew')"
mold="trendy" sclass="mybutton button blue small" />
</div>
<div style="clear: both;"></div>
<div sclass="sectionSeperator"></div>
</div>
<separator />
<listbox id="" mold="paging" pageSize="11" pagingPosition="top"
sclass="mylist" selectedItem="@bind(vm.selectedItem)"
model="@load(vm.dataSet)">
<listhead sizable="true">
<listheader label="Full Name" sortDirection="ascending"
sort="auto(fullName)" />
<listheader label="Email" sort="auto(email)" />
<listheader label="Mobile" sort="auto(mobile)" />
<listheader label="Action" />
</listhead>
<template name="model" var="p1">
<listitem>
<listcell label="@load(p1.fullName)" />
<listcell label="@load(p1.email)" />
<listcell label="@load(p1.mobile)" />
<listcell>
<hbox spacing="20px">
<image
onClick="@command('onEdit',addressRecord=p1)"
sclass="fimageedit">
</image>
<image
onClick="@command('openAsReadOnly',addressRecord=p1)"
sclass="fimageView">
</image>
<image
onClick="@command('onDelete',addressRecord=p1)"
sclass="fimageDelete">
</image>
</hbox>
</listcell>
</listitem>
</template>
</listbox>
</window>
</zk>
Here is the modified AddressCRUD.zul<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Address" id="addressCRUD" border="normal" width="30%"
mode="modal" maximizable="false" closable="true" sclass="mymodal"
position="center,parent" apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('zkoss.vm.AddressListCRUDVM')">
<panel width="100%">
<panelchildren>
<separator />
<grid sclass="vgrid">
<columns>
<column></column>
<column></column>
</columns>
<rows>
<row>
<cell colspan="2">
<vlayout>
<label value="Full Name" />
<textbox id="fullName" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.fullName) @save(vm.selectedRecord.fullName, before='saveThis')"
mold="rounded" />
</vlayout>
</cell>
</row>
<row>
<cell colspan="2">
<vlayout>
<label value="Address" />
<textbox id="address1" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.address1) @save(vm.selectedRecord.address2, before='saveThis')"
mold="rounded" />
</vlayout>
</cell>
</row>
<row>
<cell colspan="2">
<vlayout>
<textbox id="address2" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.address2) @save(vm.selectedRecord.address2, before='saveThis')"
mold="rounded" />
</vlayout>
</cell>
</row>
<row>
<vlayout>
<label value="City" />
<textbox id="City" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.city) @save(vm.selectedRecord.city, before='saveThis')"
mold="rounded" />
</vlayout>
<vlayout>
<grid sclass="vgrid">
<columns>
<column width="30%"></column>
<column></column>
</columns>
<rows>
<row>
<vlayout>
<label value="State" />
<textbox id="State"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.state) @save(vm.selectedRecord.state, before='saveThis')"
hflex="1" mold="rounded" />
</vlayout>
<vlayout>
<label value="ZipCode" />
<textbox id="zipcode"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.zipCode) @save(vm.selectedRecord.zipCode, before='saveThis')"
hflex="1" mold="rounded" />
</vlayout>
</row>
</rows>
</grid>
</vlayout>
</row>
<row>
<cell colspan="2">
<vlayout>
<label value="Email" />
<textbox id="email" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.email) @save(vm.selectedRecord.email, before='saveThis')"
mold="rounded" />
</vlayout>
</cell>
</row>
<row>
<vlayout>
<label value="Mobile" />
<textbox id="Mobile" hflex="1"
readonly="@load(vm.makeAsReadOnly)"
value="@load(vm.selectedRecord.mobile) @save(vm.selectedRecord.mobile, before='saveThis')"
mold="rounded" />
</vlayout>
</row>
</rows>
</grid>
</panelchildren>
</panel>
<separator />
<separator />
<separator />
<div align="center">
<button label="Save" visible="@load(not vm.makeAsReadOnly)"
onClick="@command('saveThis')" mold="trendy"
sclass="mybutton button blue small" />
<button label="@load(vm.makeAsReadOnly ?'Ok':'Cancel')"
onClick="@command('closeThis')" mold="trendy"
sclass="mybutton button blue small" />
</div>
<separator />
</window>
</zk>
Now run the application, you can see the output as follows.
