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:

Netbeans: New Web Project

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: Application Server

Netbeans:: Source Level for JDK

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: Entity Class from DB

Netbeans: Select DB connection and tables

Netbeans: Select DB connection and tables

Netbeans: Entity Class

Netbeans: Entity Class

Netbeans: Persistence Unit

Netbeans: Persistence Unit

Netbeans: Mapping

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

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

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

5 thoughts on “Tutorial: Reading from the DB with Netbeans and ZK

  1. Pingback: Tutorial: Reading from the DB with Netbeans and ZK (Part 2) « The JavaDude Weblog

  2. I could not follow it. You lost me just after New Application. I could not find any ZK360 Application. Maybe you should start by telling us where to get that database. I was looking forward to this tutorial specifically because it said “Reading from a database”

    I would still like to get whats needed if you tell me so I can go through the database. I am new tp Java and would love to see how it hook up to databases and access them.

    Thanks
    Winston

  3. BRAVO!
    With minor modifications regarding the DAO (I use hibernate), it show me the big picture in less than an hour.
    excellent work!

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