MVC–CRUD Application with ZK 5 Data Binding

Here is the summary of what we have completed in this subject.

1. We created new ZK Project, set up the hibernate and created Modal-View- Controller files to display all the record from the DB. Please click here to go that post.
2. Next, we added filter feature such that if the user type any value, then the list will be filtered accordingly. Please click here to go that post
3. Next, we’ve seen how to add more search parameters and filter the list. Please click here to go that post

All these are completed without using any data binding concept. Now let us see how we can use ZK 5 Data binding concepts and makes our job easy. If you are new ZK 5 Data binding, then first go here and learn basic stuffs.



Here is the Project structure so far for the files created.

To convert this example into ZK 5 Data binding, there is no need to change any MODAL Files such as Practice and PracticeDAO. Similarly there is no change in the Hibernate utility class and mapping file
All we need to create two files : one is ZUL File and its composer file
PracticeList2.zul

<?page title="Practice List" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./plstWin" ?>
<zk>

    <window title="Practice List" id="plstWin" border="normal"
        sclass="listingwindow" apply="myproject.UI.PracticeListController2">

        <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="@{plstWin$PracticeListController2.pLists}">
            <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>
            <listitem self="@{each=pr1}">
                <listcell label="@{pr1.PracticeName}" />
                <listcell label="@{pr1.City}" />
                <listcell label="@{pr1.State}" />
                <listcell label="@{pr1.ZipCode}" />
            </listitem>
        </listbox>
    </window>
</zk>

PracticeListController2.Java

package myproject.UI;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;
import org.zkoss.zul.Checkbox;
import org.zkoss.zk.ui.event.Event;
import java.util.ArrayList;
import java.util.List;
import mydomain.*;

@SuppressWarnings("rawtypes")
public class PracticeListController2 extends GenericForwardComposer {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    private Listbox PracticeList;
    private PracticeDAO practicedao;
    private Checkbox activechk;
    private List<practice> pLists;

    @SuppressWarnings({ "unchecked" })
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        practicedao = new PracticeDAO();
        pLists = practicedao.getAll();
    }

    @SuppressWarnings("unchecked")
    public void onChanging$practicefilter(InputEvent event) {
        practicedao.setFilter(event.getValue());
        PracticeList.getItems().clear();
        pLists = practicedao.getFilteredPractices();
        PracticeList.setModel(new ListModelList(practicedao
                .getFilteredPractices()));
    }

    @SuppressWarnings("unchecked")
    public void onCheck$activechk(Event event) {
        practicedao.setActiveFlag(activechk.isChecked());
        PracticeList.getItems().clear();
        PracticeList.setModel(new ListModelList(practicedao
                .getFilteredPractices()));

    }

    public List<practice> getPLists() {
        return pLists;
    }

}