Tutorial: Reading from the DB with Netbeans and ZK

After the first very basic tutorial that gets you started with the required plugins and settings (link), I will summarize in this tutorial how display data with zul using the JPA.

Requirements:

• Netbeans 6.5 with a running derby DB and the sample database (customer table)
• Installed ZK 3.6.0 plugin

Tutorial:

Content:
1. Start a new project
2. Create a new Entity Class from Database
3. Create a Controller
4. Create the table

1. Start a new project (File|New Project|Category: Web|ZK360 Application)

Lets call it ZKReadDB

Netbeans: New Web Project

Netbeans: Project Name and Location

We find a complete web project skeleton with an empty index.zul file.

We need to some manual changes because the new project wizard does not ask for it. Open the project properties (by right click on the project title in the project explorer)
- Choose the application server you want to use (from these configured in your NB). Seems the wizard just choose anyone.
- The binary format JDK 6 (if earlier version,before 1.5, you have problems compiling JPA methods or creating entity classes)

Netbeans: Application Server

Netbeans: Source Level for JDK

2. Create a new Entity Class from Database (Right click project|New..|Persistence|Entity class from DB)

Exclude the related table to make the overall sourcecode for this tutorial less complex.
Let the wizard create the Persistence Unit using Toplink for you. Default name: ZKReadDBPU
Place the class file in the package data
Leave the mapping options as default but use as collection type java.util.list

Netbeans: Entity Class from DB

Netbeans: Select DB connection and tables

Netbeans: Entity Class

Netbeans: Persistence Unit

Netbeans: Mapping

Now we should have a Customer.java file in the package data with all the default JPA methods and members mapping the customer table.

3. Create a Controller (Right click project|New..|Java Class)

Netbeans: Controller Class

package data;

public class Controller {

}

Remark: You could add the controller code into a <zscript> tag directly into the zul file, but I wont recommend that for functionality of that extent. There are no automatic IDE features available while typing the code and it is hard to debug and maintain. Stick to the separation concept and keep the controller in its own classfile!

Now we need to add (finally) some functionality to the controller and the zul file:
- the class needs to extend the Window class (org.zkoss.zul.Window)
- a arraylist that the zul file can access via a getter
- some persistence code to read all customer records (for the sake of the simple sample we place this in the constructor and we read all records)
- import the required packages (Use “Fix Imports”)

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();

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

4. Create the table (index.zul)

Empty skeleton:

<?xml version="1.0" encoding="UTF-8"?>
<window>
    My ZK application
</window>

Give the window an id and connect it to the controller class.

<window id="win" use="data.Controller">

Add a listbox by Drag and Drop from the palette, place it right after the “My ZK Application”.

Listbox skeleton:

	<listbox id="" width="" height=""
                    onSelect="">
	<listhead>
	<listheader label=""/>
	<listheader label=""/>
        </listhead>
	<listitem>
	<listcell label=""/>
	<listcell label=""/>
        </listitem>

    </listbox>

Modify the listbox as follows:

	<listbox id="lb" width="200" height="300"  >
	<listhead>
	<listheader label="name" sort="auto"/>
	<listheader label="email"/>
        </listhead>
	<listitem forEach="${win.customers}" value="${each}">
	<listcell label="${each.name}"/>
	<listcell label="${each.email}"/>
        </listitem>
    </listbox> 

There we go, run the project, it gets deployed and your favorite browser should open showing this:

Result in Browser

Remarks:

• This is the most basic possible version, it lacks of any error handling and security.
• The next exercise would be adding a detail view that offers CRUD functionality and databinding.