ZK MVVM CRUD Without DB Connection - Part 2

In Part 1, we have seen how we can list the records in the ZK List using MVVM. In this post, we will just change the look and Feel.

Create a folder called CSS and add the following file content.

/* Start: Action Images- Edit
---------------------------------------------- */
.fimageedit {
    width: 25px;
    background-image: url('../images/icon-edit.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
}

/* Start: Action Images- Delete
---------------------------------------------- */
.fimageDelete {
    width: 25px;
    background-image: url('../images/icon-trash-red.png');
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
}

/* Start: List Item Listing Records
---------------------------------------------- */


* Start: List Item Listing Records
---------------------------------------------- */
.z-listcell.systemrec .z-listcell-cnt,.z-label.systemrec {
    color: red;
}

.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;
}

/* Selected rows with the mouse hovering over them */
.mylist .overseld, .mylist.overseld, .mylist .z-listitem-over,.mylist .z-listitem-over-seld {
    background-image: none;
    background-color: transparent;
}

/* Odd rows in a listbox */
.mylist .odd
    .mylist .gc,.mylist .odd,.mylist .z-listbox-odd,.mylist .z-grid-odd
    .mylist .z-row-inner,.mylist .z-grid-odd {
    background: #F4FAFD none repeat scroll 0 0;
}


/* Header and Footer Font and Height  */
.mylist .z-listfooter-cnt, .mylist .z-listheader-cnt {
    border: 0 none;
    color: black;
    font-family: "Tahoma", verdana, arial, sans-serif;
    font-size: 11px;
    margin: 0;
    height: 13px;
}

/* Cell Height and Font */
.mylist .z-listfooter-cnt, .mylist .z-listcell-cnt,.mylist .z-listheader-cnt {
    font-size: 11px;
    font-family: "Tahoma", verdana, arial, sans-serif;
    height: 13px;
}

.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;
    background-color: #E0F7BA;
    color: white;
}

 
.mylist .z-listbox-header th.z-listheader-sort-over {
    background-image: none;
}


/* End: Form List Item Listing Records 
---------------------------------------------- */

/* button 
---------------------------------------------- */
.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;
}

.smallrounded {
    -webkit-border-radius: 9em;
    -moz-border-radius: 9em;
    border-radius: 9em;
}

.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;
}

.roundsearch {
    background-image: url('../images/green_search_button.png');
    background-position: center;
    height: 22px;
    width: 22px;
}

.roundsearch:hover {
    background-image: url('../images/green_search_button-hover.png');
    background-position: center;
    height: 22px;
    width: 22px;
}

/* 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' );
    padding: 3px 5px 3px 5px;
}

.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' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

/* 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' );
    padding: 3px 5px 3px 5px;
}

.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' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

/* 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' );
    padding: 3px 5px 3px 5px;
}

.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' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

/* orange */
.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffac53),
        to(#fe7d1e) );
    background: -moz-linear-gradient(top, #ffac53, #fe7d1e);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffac53',
        endColorstr='#fe7d1e' );
    padding: 3px 5px 3px 5px;
}

.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#fe7d1e),
        to(#ffac53) );
    background: -moz-linear-gradient(top, #fe7d1e, #ffac53);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7d1e',
        endColorstr='#ffac53' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

/* 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' );
    padding: 3px 5px 3px 5px;
}

.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' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

/* blue */
.blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#77bcfc),
        to(#286a99) );
    background: -moz-linear-gradient(top, #77bcfc, #286a99);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77bcfc',
        endColorstr='#286a99' );
    padding: 3px 5px 3px 5px;
}

.blue:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#286a99),
        to(#77bcfc) );
    background: -moz-linear-gradient(top, #286a99, #77bcfc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#286a99',
        endColorstr='#77bcfc' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

/* 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' );
    padding: 3px 5px 3px 5px;
}

.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' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

/* green */
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#93dd31),
        to(#4f8801) );
    background: -moz-linear-gradient(top, #93dd31, #4f8801);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93dd31',
        endColorstr='#4f8801' );
    padding: 3px 5px 3px 5px;
}

.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#4f8801),
        to(#93dd31) );
    background: -moz-linear-gradient(top, #4f8801, #93dd31);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f8801',
        endColorstr='#93dd31' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

/* 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' );
    padding: 3px 5px 3px 5px;
}

.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' );
    padding: 4px 5px 2px 5px;
}

.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' );
    padding: 3px 5px 3px 5px;
}

Change the Content of customerList.zul as follows

<?page title="CustomerList" contentType="text/html;charset=UTF-8"?>
<zk>

    <style src="css/style.css" />

    <window title="Customer List" border="normal"
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('myvm') @init('appVM.CustomerListVM')">

        <div>
            <button label="Add New Customer" sclass="mybutton orange small bigrounded" mold="trendy"
                onClick="@command('addNewCustomer')" />
        </div>
        <separator />

        <listbox sclass="mylist" id="test" model="@load(myvm.allCustomers)"
            selectedItem="@bind(myvm.curSelectedCustomer)">
            <listhead sizable="true">
                <listheader label="Last Name" width="400px"
                    sort="auto(lastName)" />
                <listheader label="First Name" width="400px"
                    sort="auto(firstName)" />
                <listheader label="Email" width="400px"
                    sort="auto(email)" />
                <listheader label="Action" />
            </listhead>
            <template name="model" var="p1">
                <listitem>
                    <listcell label="@load(p1.lastName)" />
                    <listcell label="@load(p1.firstName)" />
                    <listcell label="@load(p1.email)" />
                    <listcell>
                        <hbox spacing="20px">
                            <image sclass="fimageDelete"
                                onClick="@command('deleteThisCustomer')" />
                            <image sclass="fimageedit"
                                onClick="@command('editThisCustomer')" />
                        </hbox>
                    </listcell>
                </listitem>
            </template>
        </listbox>
    </window>
</zk>

Now again run customerList.zul  and we can see the output as follows