MVVM–List Item–Hibernate–MySQL–Part 3

Note: This is continuation of my previous article Part 2.  Please click here to go to Part 2

In this Part 3, we will enhance our Listing and model window as follows

1. We will include one more column as last named as Actions. This action will contain image such as edit, activate and delete.
2. We will also give hyperlink for the first column. If the user clicks the first column, then we will show the information in the read-only and if the user clicks the edit image in the action column, then we will show the information in the read only and will allow the user to edit and save.

Project Structure

Demo.zul

<?page title="Listitem MVVM Demo with Hibernate" contentType="text/html;charset=UTF-8"?>
<zk>
    <style>
        .z-listcell.red .z-listcell-cnt, .z-label.red{ color:red; }

        /* Start: Action Images- Edit
        ---------------------------------------------- */

        .fimageedit { width: 25px; background-image:
        url('./images/icon-edit.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/icon-trash-red.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/icon-enable.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/icon-disable.png'); background-repeat: no-repeat;
        border: 0 none; cursor: pointer; }

        /* End: Action Images - InActive
        ---------------------------------------------- */

        .z-listcell.highlightcell .z-listcell-cnt,
        .z-label.highlightcell { color:blue; cursor: pointer; }


    </style>
    <window title="Listitem MVVM Demo with Hibernate" border="normal"
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('myvm') @init('domainVMS.PersonVM')">
        <div>
            <button label="Add Person"
                onClick="@command('addNewPerson')" />
        </div>
        <separator />

        <listbox id="test" model="@load(myvm.allPersons)"
            selectedItem="@bind(myvm.curSelectedPerson)">
            <listhead sizable="true">
                <listheader label="First Name" width="400px"
                    sort="auto(firstName)" />
                <listheader label="Last Name" width="285px"
                    sort="auto(lastName)" />
                <listheader label="email" width="285px"
                    sort="auto(email)" />
                <listheader label="Action" />
            </listhead>
            <template name="model" var="p1">
                <listitem>
                    <listcell label="@load(p1.firstName)"
                        onClick="@command('openAsReadOnly')" sclass="highlightcell" />
                    <listcell label="@load(p1.lastName)"
                        sclass="@load(empty p1.email ?'red':'')" />
                    <listcell label="@load(p1.email)" />
                    <listcell>
                        <hbox spacing="20px">
                            <image sclass="fimageActive" />
                            <image sclass="fimageDelete" />
                            <image sclass="fimageedit"
                                onClick="@command('editThisPerson')" />
                        </hbox>
                    </listcell>
                </listitem>
            </template>
        </listbox>
    </window>
</zk>

PersonVM.java

package domainVMS;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import mydomain.Person;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zul.Messagebox;
import domainDAO.PersonDAO;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.NotifyChange;

public class PersonVM {

    private List<Person> persons = new ArrayList<Person>();
    private Person curSelectedPerson;

    public Person getCurSelectedPerson() {
        return curSelectedPerson;
    }

    public void setCurSelectedPerson(Person curSelectedPerson) {
        this.curSelectedPerson = curSelectedPerson;
    }

    public List<Person> getallPersons() {
        return persons;
    }

    @Init
    public void initSetup() {
        persons = new PersonDAO().getAllPersons();

    }

    @Command
    public void editThisPerson () {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("selectedPerson", curSelectedPerson);
        map.put("recordMode", "EDIT");
        Executions.createComponents("AddPerson.zul", null, map);
    }

    @Command
    public void openAsReadOnly()
    {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("recordMode", "READ");
        map.put("selectedPerson", curSelectedPerson);
        Executions.createComponents("AddPerson.zul", null, map);
    
    }

    @Command
    public void addNewPerson() {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("selectedPerson", null);
        map.put("recordMode", "NEW");
        Executions.createComponents("AddPerson.zul", null, map);
    }
    

    //note this will be executed after when we new person from the model window
    @GlobalCommand
    @NotifyChange("allPersons")
    public void refreshList(@BindingParam("newadded") Person p1) 
    {  
        persons.add(p1);
    }

}

PersonCRUDVM.java

package domainVMS;

import java.util.HashMap;
import org.zkoss.zul.Button;
import java.util.List;
import java.util.Map;
import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.Messagebox;
import org.zkoss.zk.ui.Component;
import domainDAO.PersonDAO;
import mydomain.Person;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import org.zkoss.zul.impl.InputElement;

public class PersonCRUDVM {

    @Wire("#win")
    private Window win;
    @Wire
    private Button submit;
    @Wire
    private Button cancel;
    @Wire("textbox")
    List<InputElement> inputs;

    private Person selectedPerson;

    public Person getSelectedPerson() {
        return selectedPerson;
    }

    public void setSelectedPerson(Person selectedPerson) {
        this.selectedPerson = selectedPerson;
    }

    @Init
    public void initSetup(@ContextParam(ContextType.VIEW) Component view,
            @ExecutionArgParam("selectedPerson") Person selectedPerson,
            @ExecutionArgParam("recordMode") String recordMode) {
        Selectors.wireComponents(view, this, false);
        if (selectedPerson == null)
            this.selectedPerson = new Person();
        else
            this.selectedPerson = selectedPerson;

        if (recordMode == "READ") {
            submit.setVisible(false);
            cancel.setLabel("Ok");
            for (InputElement i : inputs)
                i.setReadonly(true);
            win.setTitle(win.getTitle() + " (Readonly)");
        }

    }

    @Command
    public void save() {
        new PersonDAO().saveOrUpdate(this.selectedPerson);
        Map args = new HashMap();
        args.put("newadded", this.selectedPerson);
        BindUtils.postGlobalCommand(null, null, "refreshList", args);
        win.detach();
    }

    @Command
    public void closeThis() {
        win.detach();
    }
}

AddPerson.zul

<zk>
    <window id="win" title="Person" width="520px" height="220px"
        border="normal" minimizable="false" mode="modal" maximizable="false"
        closable="true" action="show: slideDown;hide: slideUp"
        apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('domainVMS.PersonCRUDVM')"  >
        <separator />
        <label value="Person information" />
        <separator />
        <panel width="100%">
            <panelchildren>
                <separator />
                <grid width="99.5%">
                    <columns>
                        <column label="" width="150px" />
                        <column label="" />
                    </columns>
                    <rows>
                        <row>
                            <hbox>
                                <label value="First Name" />
                                <label value="*" />
                            </hbox>
                            <textbox name="firstName"
                                value="@bind(vm.selectedPerson.firstName)" cols="50" />
                        </row>
                        <row>
                            <hbox>
                                <label value="Last Name" />
                                <label value="*" />
                            </hbox>
                            <textbox name="firstName"
                                value="@bind(vm.selectedPerson.lastName)" cols="50" />
                        </row>
                        <row>
                            <hbox>
                                <label value="email" />
                                <label value="*" />
                            </hbox>
                            <textbox name="email"
                                value="@bind(vm.selectedPerson.email)" cols="50" />
                        </row>
                    </rows>
                </grid>
            </panelchildren>
        </panel>
        <separator />
        <div align="center">
            <button id="submit" label="Submit" onClick="@command('save')" />
            <button id="cancel" label="Cancel"  onClick="@command('closeThis')" />
        </div>
    </window>
</zk>

Download the source as war file

Download as individual files as follows

hibernate.cfg.xml
Person.java
HibernateUtil.java
PersonVM.java
PersonCRUDVM.java
PersonDAO.java
icon-trash-red.png
icon-edit.png
icon-enable.png
Demo.zul
AddPerson.zul