Tuesday, 5 June 2012

ZK MVVM CRUD - Part 1

Step 1 :

Set up the ZK + Hibernate setup as explained in this post.

Step 2 :

Initial Project structure
image

Step 3:

Create Mysql Table as follows
CREATE TABLE `practice` (
  `Practice_ID` BIGINT(20) NOT NULL AUTO_INCREMENT,
  `PRACTICE_NAME` VARCHAR(255) DEFAULT NULL,
  `NPI_NUMBER` VARCHAR(255) DEFAULT NULL,
  `EMAIL` VARCHAR(255) DEFAULT NULL,
  `ADDRESS1` VARCHAR(255) DEFAULT NULL,
  `ADDRESS2` VARCHAR(255) DEFAULT NULL,
  `CITY` VARCHAR(255) DEFAULT NULL,
  `COUNTRY_GEO` VARCHAR(255) DEFAULT NULL,
  `POSTAL_CODE` VARCHAR(255) DEFAULT NULL,
  `POSTAL_CODE_EXT` VARCHAR(255) DEFAULT NULL,
  `STATE_PROVINCE_GEO` VARCHAR(255) DEFAULT NULL,
  `FAX_NUMBER` VARCHAR(255) DEFAULT NULL,
  `OFFICE_EXT` VARCHAR(255) DEFAULT NULL,
  `OFFICE_PHONE` VARCHAR(255) DEFAULT NULL,
  `PracticeLoginURL` VARCHAR(25) NOT NULL,
  `IS_ACTIVE` BIT(1) DEFAULT NULL,
  `CREATED_BY` BIGINT(20) DEFAULT NULL,
  `CREATE_TX_TIMESTAMP` DATETIME NOT NULL,
  `UPDATE_BY` BIGINT(20) DEFAULT NULL,
  `UPDATED_TX_TIMESTAMP` DATETIME DEFAULT NULL,
  PRIMARY KEY  (`Practice_ID`),
  UNIQUE KEY `UniqueLoginURL` (`PracticeLoginURL`)
) ENGINE=INNODB DEFAULT CHARSET=utf8


Insert some records as follows

INSERT INTO practice(practice_name,city,POSTAL_CODE,STATE_PROVINCE_GEO)
VALUES('eCosmos','City1','1111','St1')

INSERT INTO practice(practice_name,city,POSTAL_CODE,STATE_PROVINCE_GEO,PracticeLoginURL)
VALUES('bPractice2','City2','2222','St2','url1')

INSERT INTO practice(practice_name,city,POSTAL_CODE,STATE_PROVINCE_GEO,PracticeLoginURL)
VALUES('cPractice2','City2','2222','St2','url2')

INSERT INTO practice(practice_name,city,POSTAL_CODE,STATE_PROVINCE_GEO,PracticeLoginURL)
VALUES('dPractice2','City2','2222','St2','url3')



Step 4:



Prepare the View Part in MVVM . i.e create the ZUL File as follows

image

Here is the source code for practiceList.zul file

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

    <window title="Practice List" border="normal">

        <div>
            <button label="Add Practice" />
        </div>
        <separator />
        <groupbox height="40px">
            <label value="Practice Name" />
            <space />
            <space />
            <textbox id="practicefilter" cols="50" />
            <button id="gobutton" label="Go" />
            <space spacing="20px" />
            <checkbox id="activechk" label="Show only active"
                checked="true" />
            <space spacing="20px" />
        </groupbox>
        <separator />
        <listbox id="PracticeList">
            <listhead sizable="true">
                <listheader label="Practice Name" sort="auto" />
                <listheader label="City" sort="auto" />
                <listheader label="State" sort="auto" />
                <listheader label="Zip Code" sort="auto" />
            </listhead>
        </listbox>
    </window>
</zk>


Remember, we did not put any binding concept at this point , we will do it later stage. Now just run this zul file and check whether you get the following output

image

Step 5:


Now let us create Java Bean Pojo for Practice as shown

image

Here is the Code


package domain;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "practice")
public class Practice {

    private Integer practiceID;
    private String practiceName;
    private String city;
    private String ZipCode;
    private String state;
    private Integer isActive; 

    @Id
    @GeneratedValue
    @Column(name = "PRACTICE_ID")
    public Integer getPracticeID() {
        return practiceID;
    }

    public void setPracticeID(Integer practiceID) {
        this.practiceID = practiceID;
    }

    @Column(name = "PRACTICE_NAME")
    public String getPracticeName() {
        return practiceName;
    }

    public void setPracticeName(String practiceName) {
        this.practiceName = practiceName;
    }

    @Column(name = "CITY")
    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    @Column(name = "POSTAL_CODE")
    public String getZipCode() {
        return ZipCode;
    }

    public void setZipCode(String zipCode) {
        ZipCode = zipCode;
    }

    @Column(name = "STATE_PROVINCE_GEO")
    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    @Column(name = "IS_ACTIVE")
    public Integer getIsActive() 
    {
        if (isActive== null)
            return 1;
        else
            return isActive;
    }

    public void setIsActive(Integer isActive) {
        this.isActive = isActive;
    }

}



Since we are done with Mapping class, we need tell this to hibernate. Let us do this in the hibernate.cfg.xml

Now go back to hibernate.cfg.xml, add the following line for the mapping class section


<!-- Mapping Classes -->
    <mapping class="domain.Practice" />


Step 6:


Now let us create our DAO Class. Please remember still we didn't touch the MVVM + Data binding. Just we are going reverse and keep every thing is ready before we connect our VIEW with MVVM Data binding

Let us create our practiceDAO Class as shown

image

package DomainDAO;

import java.util.List;
import org.hibernate.Query;
import org.hibernate.Session;
import domain.Practice;

import HibernateUtilities.HibernateUtil;

public class practiceDAO {

    public List<Practice> getListingItems() {

        List<Practice> practiceListing = null;

        try {
            Session session = HibernateUtil.beginTransaction();
            Query q1 = session.createQuery("from Practice ");
            practiceListing = q1.list();
            HibernateUtil.CommitTransaction();
        } catch (RuntimeException e) {
            if (HibernateUtil.getSession().getTransaction() != null) {
                HibernateUtil.rollbackTransaction();
            }
            e.printStackTrace();
        }
        return practiceListing;
    }
}


Step 7:


Now let us move to MVVM. Now we will create ViewModel as shown here.

image

Here is the code PracticeListVM


package UIVMs;

import domain.Practice;
import java.util.List;
import DomainDAO.practiceDAO;
public class PracticeListVM {

    private List<Practice> AllPracticeInDB = null;
    public List<Practice> getprlist() {
        AllPracticeInDB= new practiceDAO().getListingItems();
        return AllPracticeInDB;
    }
}
    
    



Step 8:


Now let us modify our view practiceList.zul to take care of MVVM + New data binding

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

    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('UIVMs.PracticeListVM')">
        <div>
            <button label="Add Practice" />
        </div>
        <separator />
        <groupbox height="40px">
            <label value="Practice Name" />
            <space />
            <space />
            <textbox id="practicefilter" cols="50" />
            <button id="gobutton" label="Go" />
            <space spacing="20px" />
            <checkbox id="activechk" label="Show only active"
                checked="true" />
            <space spacing="20px" />
        </groupbox>
        <separator />
        <listbox id="PracticeList"   model="@load(vm.prlist)">
            <listhead sizable="true">
                <listheader label="Practice Name" sort="auto" />
                <listheader label="City" sort="auto" />
                <listheader label="State" sort="auto" />
                <listheader label="Zip Code" sort="auto" />
            </listhead>
            <template name="model" var="p1">
                <listitem>
                    <listcell label="@load(p1.practiceName)" />
                    <listcell label="@load(p1.city)" />
                    <listcell label="@load(p1.state)" />
                    <listcell label="@load(p1.zipCode)" />
                </listitem>
            </template>
            
        </listbox>
    </window>
</zk>


Step 9:


Now run our practiceList.zul file , you should get the following output

image

Next Part 2


7 comments:

  1. Dear Senthil,
    could you explain to me in zul file,
    in listbox id="PracticeList" model="load(vm.prlist)". in which line prlist mention at PracticeListVM. because I don't see it anywhere except in practiceList.zul

    ReplyDelete
  2. Look the VM i,e PracticeListVM. You can see get(prlist)

    ReplyDelete
  3. Thanks for your reply
    so you mean that if in VM, I put getData() then in zul file I load by @load=vm.data
    am I correct? sorry for this newbie question

    ReplyDelete
  4. When zk found this line during execution model="@load(vm.prlist)", then it will go and look the VM and ZK will look for any get property for prlist. As as per this example, we have getprList.

    ReplyDelete
  5. If you understand better on template , look at the following

    http://www.zkoss.org/forum/listComment/19729-Please-help-me-on-MVVM-Listbox

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete