ZK MVVM Form Binding CRUD with Spring and Hibernate

In this series of articles, we will see examples for various concept of ZK Framework.

About the application
This is a small application to store the users information such as first name, last name, email, login id , password, etc. We will have the listing screen which will display all the users in the database. And from this listing screen, we will be able to add new users and edit the existing users in the database.

MySQL table structure.

CREATE TABLE `userprofile` (
  `id` bigint(20) NOT NULL auto_increment,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(50) NOT NULL,
  `middlename` varchar(2) default NULL,
  `userAccountNumber` varchar(50) NOT NULL,
  `DOB` date default NULL,
  `SSN` varchar(50) default NULL,
  `address1` varchar(200) NOT NULL,
  `address2` varchar(200) default NULL,
  `city` varchar(100) NOT NULL,
  `state` varchar(2) NOT NULL,
  `zipcode` varchar(12) NOT NULL,
  `email` varchar(100) NOT NULL,
  `userloginid` varchar(20) NOT NULL,
  `password` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Insert some records in the database for the above table

Technologies Used
    1. ZK 6.5.2 CE Version
    3. Hibernate Core Version 4.1.10 Final
    4. Spring ORM Version 3.2.0
    5. MySQL version 5
    6. Maven 3

First let us setup the development environment. Download this document and follow the step by step instruction to install the necessary software’s.

Part 1: This post explain how to create ZK Maven project in eclipse IDE as step by step.
Part 2: This post talks about creating Domain, DAO and Service Layer.
Part 3: Spring Integration with Hibernate
Part 4: Presentation Layer
Part 5: Change the look and feel.
Part 6: Spring security 3 integration with hibernate 4
Part 7: More features such as Data filter, etc..
Part 8: ZK Theme customization for each user
Part 9: Bug Fixing Cycle :)
Part 10: jQuery integration with ZK Framework
Part 11: Store image in the database.
Part 12 : Validation using Hibernate Validator
Part 13 : More Validation using Hibernate Validator


You can download the source here

For online demo, click here.

Use the following user id and password to check out different theme for each user
a) For blue theme, user id : lee and password : lee.
b) For brown theme, user id : wing and password : wing
c) for Green theme, user id : dennis and password : dennis
d) For purple theme, user id : senthil and password : senthil
e) For red theme, user id : zkoss and password : zkoss

Screen shots

Read More

ZK MVVM CRUD with Spring 3. and Hibernate 4

In this post, we will see step by step tutorial on simple CRUD operation.

Technologies Used

    1. ZK 6.5.1 CE Version
    3. Hibernate Core Version 4.1.10 Final
    4. Spring ORM Version 3.2.0
    5. MySQL version 5
    6. Maven 3

Part 1, This article will focus on the How to setup the development environment, maven POM File for dependency, Hibernate and spring configuration in web.xml. After that we will create listing page which will list all the records from the DB.

Part 2, This article will focus on the How to ADD new record in the database using CRUD Modal window and after close, refresh the listing screen again.

Part 3, This article will focus on the How to EDIT existing record in the database using the same CRUD Modal window and after close, refresh the listing screen again.

Part 4, This article will focus on the How to VIEW existing record in the database using the same CRUD Modal window

Part 5, This article will focus on the How to  DELETE existing record in the database using the same CRUD Modal window and after close, refresh the listing screen again.

Screen shot

Project Structure

Read More

ZK MVVM CRUD With Spring 3 + JPA + Hibernate 4 Entity Manager

A simple CRUD Application based on JPA.

Overview
This article will explain you step by step how to create simple CRUD application using ZK as Presentation layer with Spring 3 and JPA (Hibernate vendor).

What is JPA and why JPA
The Java Persistence API, referred as JPA is a object-relational mapping solution to enterprise Java applications.
JPA is a spec and not an implementation, so if you choose JPA, you still have to pick an implementation. You can pick Hibernate, Top link, and any other ORM that implements JPA.

Using JPA does not tie you to any particular ORM Like hibernate, toplink, etc. EntityManager provides vendor independent access to persistence. Portability across application servers and persistence products (avoids vendor lock-in).

Developers can choose the best ORM implementation according to the application requirement. For example, production can be started from the free versions of ORM implementation and when the needs arise it can be switched to the commercial version of the ORM framework. You can switch the persistence provides without changing the code. So, ORM framework independence is another another big benefit of JPA

Hibernate ORM
In this example, we are going to choose Hibernate as ORM vendor to build the simple CRUD Application.

Spring and Hibernate ORM Framework Integration.
There are lot of articles on the net about this topic. I recommend to the read following articles on this subject.

1. http://www.javabeat.net/2007/10/integrating-spring-framework-with-hibernate-orm-framework/
2. http://static.springsource.org/spring/docs/2.5.x/reference/orm.html
3. http://blog.springsource.org/2012/04/06/migrating-to-spring-3-1-and-hibernate-4-1/
4. http://javaprogrammingtips4u.blogspot.in/2010/04/spring-integration-with-hibernate_23.html

Technologies used in this example:

1. ZK 6.5.1 CE Version.
2. Hibernate-entitymanager 4.1.9 Final
3. Spring-orm 3.2.0 Release
4. Spring-web 3.2.0 Release
5. Java mysql connector 5.1.22

In mysql, create the following table

Part 1:  First let us setup the development environment. Download this document and follow the step by step instruction to install the necessary software’s.

Part 2: This post explain how to create ZK Maven project in eclipse IDE as step by step.
Part 3: This post explain how to configure database, user name, password, etc using persistence.xml file
Part 4: This post explain how to integrate Spring and Hibernate.
Part 5: This post explain how to create DAO and service layer for the CRUD operation.
Part 6: This post explain how to create Presentation layer using ZK Framework.
Part 7: This post explain how to change the default ZK CSS for each component and change the look and feel of our application.

Output before with ZK Default CSS Style

Output after defining our own CSS for each component.

Video demo:
http://screencast.com/t/F74aYHqqr

You can download the source code here

Read More

ZK MVVM CRUD Without DB Connection

In this post, we will see step by step tutorial on ZK MVVM CRUD Operation without any DB Connection.

Part 1:
In the Part 1, Let me explain how to show the listing screen which is typical starting point for all CRUD Operation. Click here to start the Part 1.

Part 2:
In the Part 2, We will just change the Look and Feel without adding any more functionality. Here is Part 2.

Part 3:
In the Part 3, We will implement add new customer . In this example, I have shown how you can call a ZK Model window and after closing the model window, how we can update some information in the parent window. Here is Part 3.

Part 4:
In the Part 4, We will implement edit and Delete customer. Here is Part 4.

Part 5:
In the Part 5, We will change the look and feel of our customer modal window. Here is Part 5.

Part 6:
In the Part 6, We will add Read only option and also we will see how we show notification after every successful operation.
Here is part 6

Part 7:
In the Part 7, We will use jquery in ZK. And also , we will see how we can  create own component. Here is part 7

Online Demo here.

You can download the source here.

Read More

ZK MVVM CRUD - Part 3

Previous Part 2

In Part 2, we slightly change the retrieve of  objects by adding constructor. Now we will move forward. Let us take a look on the output as follows

Apart from the listing the records, we also have two search parameters such as Practice name and Show only active or inactive practices. So what we are going to do with this ? Well, if the list is big, then user has to move to particular page to locate the desired practice, instead of that we will filter the practice as soon as user starts typing the first few characters of the practice name. And also, by default we will show all the active (soft delete) records. If the user want to see all the records including deactivated, then on click of check box, we will also do that.
So here are the conditions
Case 1:
If no character present in the Practice name filter text area and also Show only active is unchecked, then let us show all the records from the DB.
Case 2:
If some characters are typed in the practice name filter and check box is  unchecked, then show all active and inactive records for the practice whose first characters are matched with the filter text
Case 3:
If no character in practice name filter text area and check box is checked, then we will show all the active practices only.
Case 4:
If both the search parameters contains values, then we will retrieve the records accordingly.
And also, we are going to Apply new ZK Bind Annotation such as @NotifyChange and @Command. Please refer here for examples in this subject. 
And also very important, we are not going hit the database for each character is typed or check box is checked or unchecked. First time we will hit the DB to bring the records and then we will do all the filter locally.
Step 1:

From the View, we need to pass the value of Practice name text area and Check box state (checked or unchecked)  to the View Model to filter the record. So we will write the following getter and setter method.
private String practiceStartWith;
private boolean showOnlyActive;

public String getPracticeStartWith() {
        return practiceStartWith;
    }
    public void setPracticeStartWith(String practiceStartWith) {
        this.practiceStartWith = practiceStartWith;
    }
    public boolean isShowOnlyActive() {
        return showOnlyActive;
    }
    public void setShowOnlyActive(boolean showOnlyActive) {
        this.showOnlyActive = showOnlyActive;
    }

Step 2:

Here is the modified PracticeVM.Java

package UIVMs;

import domain.Practice;
import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import DomainDAO.practiceDAO;

public class PracticeListVM {

    private List<Practice> AllPracticeInDB = null;
    private List<Practice> filteredPractices = null;

    private String practiceStartWith;
    private boolean showOnlyActive = true;

    public String getPracticeStartWith() {
        return practiceStartWith;
    }

    public void setPracticeStartWith(String practiceStartWith) {
        this.practiceStartWith = practiceStartWith;
    }

    public boolean isShowOnlyActive() {
        return showOnlyActive;
    }

    public void setShowOnlyActive(boolean pActive) {
        this.showOnlyActive = pActive;
    }

    public List<Practice> getprlist() {
        if (AllPracticeInDB == null) {
            filteredPractices = new ArrayList<Practice>();
            AllPracticeInDB = new practiceDAO().getListingItems();
            setShowOnlyActive(true);
            for (Practice item : AllPracticeInDB) {
                if (item.getIsActive() == 1)
                    filteredPractices.add(item);
            }
        }

        return filteredPractices;
    }

    @NotifyChange("prlist")
    @Command
    public void doFilter() {

        filteredPractices.clear();

        /* if no filter characters and check box is un checked. Then get all */
        /* 0 and 0 */

        if ((practiceStartWith == null || "".equals(practiceStartWith))
                && (showOnlyActive == false)) {
            filteredPractices.addAll(AllPracticeInDB);

        }

        /*
         * if there are filter characters and check box is un checked. Then get
         * filtered by filter text
         */
        /* 1 and 0 */

        if ((practiceStartWith != null && !practiceStartWith.equals(""))
                && (showOnlyActive == false)) {
            for (Practice item : AllPracticeInDB) {
                if (item.getPracticeName().toLowerCase()
                        .indexOf(practiceStartWith.toLowerCase()) == 0)
                    filteredPractices.add(item);
            }
        }

        /*
         * if no filter characters and check box is checked. Then get only
         * active practices
         */
        /* 0 and 1 */

        if ((practiceStartWith == null || "".equals(practiceStartWith))
                && (showOnlyActive == true)) {
            for (Practice item : AllPracticeInDB) {
                if (item.getIsActive() == 1)
                    filteredPractices.add(item);
            }
        }

        /*
         * Both Contains values i.e filter contains some text and check box is
         * checked
         */
        /* 1 and 1 */

        if ((practiceStartWith != null && !practiceStartWith.equals(""))
                && (showOnlyActive == true)) {
            for (Practice item : AllPracticeInDB) {
                if (item.getPracticeName().toLowerCase()
                        .indexOf(practiceStartWith.toLowerCase()) == 0)
                    if (item.getIsActive() == 1)
                        filteredPractices.add(item);
            }

        }

    }
}

Step 3:

Here is the modified practiceList.zul

<?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 width="250px"
                value="@bind(vm.practiceStartWith)"
                onChange="@command('doFilter')" instant="true" />
            <button id="gobutton" label="Go" />
            <space spacing="20px" />
            <checkbox id="activechk" label="Show only active"
                checked="@bind(vm.showOnlyActive)" onCheck="@command('doFilter')" />
            <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 4:

Now we can run and play around both practice name filter and check box.
The following is the execution flow

1. An Instance will be created for our PracticeListVM
2. Since we declared true value initially for showonlyactive, and also we bind our checkbox with showactiveonly, so first set method of showonlyactive will take place.
3. Then our getprList  will take place because we bind our list to this get method.

Read More

ZK MVVM CRUD - Part 2

Previous Part 1

In the part 1, we have listed all the records from the DB.
I would like to do some changes in the Part 1 without adding any other stuff.  Open PracticeDAO. Java and let us have a close look on the following line;
Query q1 = session.createQuery("from Practice ");
Here, we did not specify any columns, so it will fill up the values for all the columns matching with our java bean. But in the list, we need only to display four columns such as Practice Name, city, State and Zip Code.
So how we can retrieve only selected columns in the create query ?  You can see this example to achieve the result.
So as per that example, first let us constructors in our practice.java as shown here.

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; 


    // Our default Constructor
    public Practice() {

    }

    // constructor with fields needed for our listing
    public Practice(Integer pID, String prname, String pCity, String pState, String pZipCode, Integer pIsActive ) {
        
        this.practiceID = pID;
        this.practiceName = prname;
        this.city = pCity;
        this.state = pState;
        this.ZipCode = pZipCode;
        this.isActive = pIsActive;
    }

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

}

Now let us change our DAO as follows

Query q1 = session.createQuery("Select new Practice(practiceID, practiceName,city,state,zipCode,isActive) from Practice ");

Next Part 3

Read More

ZK MVVM CRUD - Part 1

Step 1 :

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

Step 2 :

Initial Project structure

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



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

Step 5:

Now let us create Java Bean Pojo for Practice as shown



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

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.



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

Next Part 2

Read More