Healthcare IT EMR PMS: ZK MVVM CRUD

Showing posts with label ZK MVVM CRUD. Show all posts

A simple CRUD Application based on JPA.

ZK MVVM CRUD Without DB Connection

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.

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

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 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

X12 EDI Examples

ZK MVVM List Box–Retrieve records from MYSQL with Hibernate and Spring integration

ZK MVVM Form Binding CRUD with Spring and Hibernate

ZK MVVM CRUD with Spring 3. and Hibernate 4

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

ZK MVVM CRUD Without DB Connection

ZK MVVM CRUD - Part 3

Previous Part 2

Step 2:

Step 3:

Step 4:

ZK MVVM CRUD - Part 2

Previous Part 1

Next Part 3

ZK MVVM CRUD - Part 1

Step 1 :

Step 2 :

Step 3:

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:

Step 9:

Next Part 2