Tutorial: Reading from the DB with Netbeans and ZK (Part 2)

In this part 2 we modify the ZK project from part 1 and add data binding and a detail view.

Before we start adding the new functions, you might want to look in some of the project settings that are default when you create a new ZK360 type web project. Both context path (under Project properties|Run), as well the Display Name in the web.xml (under project explorer|configuration files) . You better change the default to avoid confusion when starting to create the second project.

I recommend to have a look at these 2 documents: ZK Developers Guide and the ZK Reference Doc (link), giving you more insights how ZK works and how feature rich it is. I noticed the available Netbeans palette does not show all available features, so you are better of browsing the docs and look at the sourcecode of the ZK Explorer application (Live Demo).

Back to part 2.

Requirements:

  • Netbeans 6.5 with a running derby DB and the sample database (customer table)
  • Installed ZK 3.6.0 plugin
  • The project from part 1 (link)

Content

1. Open the ZKReadDB project from part 1
2. Change the controller class
3. Activate the Data Binding Manager
4. Make the listbox work witha model and refer the listitems to the fields
5. Implement the detail view
6. Add the detail view with textboxes
7. The complete index.zul and controller.java

1. Open the ZKReadDB project from part 1

We dont need to change the underlying data class (Customer.java) but need to make adjustments to the controller class (Controller.java) and our zul file (index.zul)

2. Change the controller class

The changes are required to implement the detail view for the selected customer record in the listbox. We add 1 customer instance plus getter/setter.

[..]
    Customer selected = new Customer();
[..]
    public Customer getSelected() {
        return selected;
    }

    public void setSelected(Customer selected) {
        this.selected = selected;
    }
[..]    

3. Activate the Data Binding Manager

Add at the top of index.zul

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
[..]    

4. Make the listbox work with a model and refer the listitems to the fields

	<listbox id="lb" model="@{win.customers}"
&#91;..&#93;
        <listitem self="@{each=customers}">
	<listcell label="@{customers.name}"/>
	<listcell label="@{customers.email}"/>
        </listitem>
[..]    

5. Implement the detail view

Use the selected item method of the listbox

[..]
	<listbox id="lb" .. selectedItem="@{win.selected}" ..>
[..]    

6. Add the detail view with textboxes

Add a separate groupbox with hbox and vbox to create a detail view. You can add more fields of the customer table if you like to following the name and email sample.

[..]
        <groupbox id="gb" mold="3d" width="600px">
            <caption label="Selected Customer"/>
            Name: <textbox id="name"  cols="50" value="@{win.selected.name}" />
            Email: <textbox id="email" value="@{win.selected.email}" />
        </groupbox>
[..]    

7. The complete index.zul and controller.java

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?page title="My Page Title"?>
<window id="win" use="data.Controller" border="normal" width="75%">
    Customer DB
	<listbox id="lb" model="@{win.customers}" selectedItem="@{win.selected}" mold="paging" pageSize="4">
	<listhead sizable="true">
	<listheader label="name" width="50px"/>
	<listheader label="email" width="250px"/>
        </listhead>
	<listitem self="@{each=customers}">
	<listcell label="@{customers.name}"/>
	<listcell label="@{customers.email}"/>
        </listitem>
    </listbox>
  <separator bar="true"/>
    <hbox>
        <groupbox id="gb" mold="3d" width="600px">
            <caption label="Selected Customer"/>
            Name: <textbox id="name"  cols="50" value="@{win.selected.name}" />
            Email: <textbox id="email" value="@{win.selected.email}" />
        </groupbox>
    </hbox>
</window>

package data;

import java.util.ArrayList;
import java.util.List;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
import org.zkoss.zul.Window;

public class Controller extends Window {

    List customers = new ArrayList();
    Customer selected = new Customer();

    public Controller() {
        EntityManagerFactory emf;
        emf = Persistence.createEntityManagerFactory("ZKReadDBPU");
        EntityManager em = emf.createEntityManager();
        javax.persistence.Query q = em.createQuery("select c from Customer as c");
        customers = q.getResultList();
        em.close();
    }

    public List getCustomers() {
        return customers;
    }

    public Customer getSelected() {
        return selected;
    }

    public void setSelected(Customer selected) {
        this.selected = selected;
    }
}

Result

ZKReadDB2 in Browser

ZKReadDB2 in Browser

You notice I also added the pagination feature and worked with the window size. Maybe it would be an option to use a grid instead of the vbox/hbox to avoid ugly wraps like in the screenshot.

Remarks:

  • Dont forget to start the Java Derby DB (Services|Databases|Connect sample DB..) in Netbeans or you will get a Error connecting to server localhost on port 1527 with message Connection refused: connect.
  • Without databinding in the previous part we could use the listbox sort feature (sort=”auto”). We loose this convenience once we use data-binding. Check the developers guide to implement such a function. But we also should do a reality check, do we want the browser to sort 10.000 rows ?

Where are we going from here:

  • Implement the sort function (or maybe a filter that cuts down the number of records to display)
  • Add CRUD functionality
  • Find out if we can use session beans

Enjoy the ride and stay tuned..

Advertisements

2 thoughts on “Tutorial: Reading from the DB with Netbeans and ZK (Part 2)

  1. Pingback: ZK with EJB3.1 running on Glassfish « The JavaDude Weblog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s