Input Form Validation window

We will see here how to validate all the input elements and show all the message in one window after submit button is clicked.  This can be done using ZK Data binding and CreateComponents method.
This example is based on Executions.CreateComponents. For more example, please check here.
Project Structure

Step 1:

ValidationMessage.Java

package MyDomain;

public class ValidationMessage 
{
    private String message;

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
    
}

Step 2:

ValidateWindow.zul

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./modalDialog" ?>
<zk>
    <window id="modalDialog" title=" " width="420px" height="auto"
        border="normal" minimizable="false" mode="modal" maximizable="false"
        closable="true" action="hide: slideUp">
        <listbox vflex="1" id="test" model="@{arg.vList}">
            <listhead sizable="true">
                <listheader label="Messages" width="300px" />
            </listhead>
            <!-- define variable p1 here-->
            <listitem self="@{each='p1'}">
                <listcell label="@{p1.Message}" />
            </listitem>
        </listbox>
        <separator />
        <div align="center">
            <button label="Ok" onCreate="self.setFocus(true)"
                onClick="modalDialog.detach()" />
        </div>
    </window>
</zk>

Step 3:

Demo.Zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <window id="win" title ="Person" width="420px" height="150px" border="normal"
        minimizable="false" mode="modal" maximizable="false" closable="true"
        apply="MyDomain.DemoComposer" action="show: slideDown;hide: slideUp">

        <grid width="400px">
            <rows>
                <row>
                    First Name:
                    <textbox id="fname"/>
                </row>
                <row>
                    Last Name:
                    <textbox id="lname"/>
                </row>
            </rows>
        </grid>
        <separator />
        <div align="center">
            <button id="Submit" label="Submit" />
        </div>
    </window>
</zk>

Step 4:

DemoComposer.Java

package MyDomain;

import java.util.HashMap;

import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;
import java.util.ArrayList;
import java.util.List;

public class DemoComposer extends GenericForwardComposer {

    private Textbox fname;
    private Textbox lname;

    public void onClick$Submit(Event event) {
        if (IsValidInput())
            alert("All are valid. Now you can Save into DB");

    }

    public boolean IsValidInput() {

        List<ValidationMessage> vList = new ArrayList<ValidationMessage>();

        ValidationMessage v1 = new ValidationMessage();

        if (fname.getValue() == "") {
            v1.setMessage("First Name Cannot be Empty");
            vList.add(v1);
        }

        if (lname.getValue() == "") {
            v1 = new ValidationMessage();
            v1.setMessage("Last Name Cannot be Empty");
            vList.add(v1);
        }

        if (vList.size() > 0) 
        {
            final HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("vList", vList);
            Executions.createComponents("ValidateWindow.zul", null, map);
            return false;
        }
        else
            return true;
        
    }

}

Step 5:

Run the demo.zul and without entering any value , click on submit button as shown



Download the source as war file

Read More

ZK Executions.createComponents

 

Example 1:

Using MVC, we will see how we can call another ZUL File and pass arguments to the ZUL File

Step : 1

Demo.Zul file

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <window title="new page title" border="normal"
        apply="myUI.DemoComposer">
        <button id="Create" label="Show Window" onClick="" />
    </window>
</zk>

 

Step : 2

DemoComposer.java

package myUI;
import java.util.HashMap;

import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;

public class DemoComposer extends GenericForwardComposer 
{
    public void onClick$Create(Event event) 
    {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("fname", "senthil");
        map.put("lname", "Nathan");
        Executions.createComponents("Person.zul",null,map);
    }
}

 

Step : 3

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
    <window id="win" width="420px" height="110px"
        border="normal" minimizable="false" mode="modal" maximizable="false"
        closable="true" action="show: slideDown;hide: slideUp">

        <grid width="400px">
            <rows>
                <row>
                    First Name:
                    <textbox value="${arg.fname}" />
                </row>
                <row>
                    Last Name:
                    <textbox value="${arg.lname}" />
                </row>
            </rows>
        </grid>
    </window>
</zk>

Step : 4

Read More

List Item Connected with Hibernate and Search Parameter

 Summary

This example contains one list box with First name and Last Name as search Field. If the user do not give any values for first name and last name, then clicking Go Button will list all the records from the DB.
If the user enters either first name or last name or both, then using like operator, it will retrieve accordingly.

Environment

1. Eclipse 3.7 Indigo IDE
2. Hibernate 4.1.1
3. JavaSE 1.6
4. MySQL 5.1

Step 1:

Set up ZK Project with Hibernate. Follow this post for more information.

Step 2:

Create the Following table in mysql

Step 3:

Let us create the Java Bean for the above Table

Here is the Code

package myDomain;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "person")
public class Person 
{
    
    private int ID;
    private String FirstName;
    private String LastName;
    private String Email;
    
    @Id
    @GeneratedValue
    public int getID() {
        return ID;
    }
    public void setID(int iD) {
        ID = iD;
    }
    
    @Column(name = "FirstName")
    public String getFirstName() {
        return FirstName;
    }
    public void setFirstName(String firstName) {
        FirstName = firstName;
    }
    
    @Column(name = "LastName")
    public String getLastName() {
        return LastName;
    }
    public void setLastName(String lastName) {
        LastName = lastName;
    }
    
    @Column(name = "Email")
    public String getEmail() {
        return Email;
    }
    public void setEmail(String email) {
        Email = email;
    }
    
    
}

Step 4:

Go Back to hibernate.cfg.xml and add the above class as follows

<!-- Mapping Classes -->
    <mapping class="myDomain.Person" />

Step 5:

Demo. Zul File

<?page title="Person List" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
    <window id='myWin' title="Person List" border="normal"
        apply="myUI.DemoComposer">
        <groupbox height="40px">
            <label value="First Name" />
            <space />
            <space />
            <textbox id="FirstName" cols="50" />
            <label value="Last Name" />
            <space />
            <space />
            <textbox id="LastName" cols="50" />
            <button id="gobutton" label="Go" />
            <space spacing="20px" />
            <space spacing="20px" />
        </groupbox>
        <separator />
        <listbox id="PersonList" >
            <listhead sizable=" true ">
                <listheader label="First Name" sort="auto" />
                <listheader label="Last Name" sort="auto" />
                <listheader label="Email" sort="auto" />
            </listhead>
            <listitem self="@{each=person}">
                <listcell label="@{person.firstName}" />
                <listcell label="@{person.LastName}" />
                <listcell label="@{person.Email}" />
            </listitem>
        </listbox>
    </window>
</zk>

Step 6:

DemoComposer.Java

package myUI;

import java.util.ArrayList;
import java.util.List;


import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Textbox;
import myDomain.Person;
import myDomain.PersonDAO;

public class DemoComposer extends GenericForwardComposer {

    private List<Person> persons = new ArrayList<Person>();
    private Textbox FirstName;
    private Textbox LastName;
    private Listbox PersonList;
    private PersonDAO p1DAO;

    @SuppressWarnings("unchecked")
    public void onClick$gobutton(Event event) 
    {
        
        p1DAO = new PersonDAO();
        
        p1DAO.setFirstName(FirstName.getValue());
        p1DAO.setLastName(LastName.getValue());
        
        persons = p1DAO.getAllPersons();
        PersonList.getItems().clear();
        PersonList.setModel(new ListModelList(persons));
        
    }
    
    public List<Person> getPersons() {
        return persons;
    }

    
}

Step 7:

PersonDAO. Java



Code

package myDomain;

import java.util.List;
import org.hibernate.Session;
import org.hibernate.Transaction;
import org.hibernate.Query;
import org.zkoss.zul.Messagebox;

import HibernateUtilities.HibernateUtil;

public class PersonDAO {

    private String firstName;
    private String lastName;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    @SuppressWarnings("unchecked")
    public List<Person> getAllPersons() {

        List<Person> allrecords = null;
        Transaction trns = null;
        Session session = HibernateUtil.getSessionFactory().openSession();
        try {
            trns = session.beginTransaction();

            if ((firstName == null || "".equals(firstName))
                    && (lastName == null || "".equals(lastName))) {
                Query q1 = session.createQuery("from Person ");
                allrecords = q1.list();
            }

            if ((firstName != null && !firstName.equals(""))
                    && (lastName == null || "".equals(lastName))) {
                Query q1 = session.createQuery("from Person where firstname like :value ");
                q1.setString("value", firstName +"%");
                allrecords = q1.list();
            }

            if ((lastName != null && !lastName.equals(""))
                    && (firstName == null || "".equals(firstName))) {
                Query q1 = session.createQuery("from Person where lastname like :value ");
                q1.setString("value", lastName +"%");
                allrecords = q1.list();
            }
            if ((firstName != null && !firstName.equals(""))
                    && (lastName != null && !lastName.equals(""))) {
                
                Query q1 = session.createQuery("from Person where firstname like :value1 or lastname like :value2 ");
                q1.setString("value1", firstName +"%");
                q1.setString("value2", lastName +"%");
                allrecords = q1.list();
            }
            
            session.getTransaction().commit();

        } catch (RuntimeException e) {
            if (trns != null) {
                trns.rollback();
            }
            e.printStackTrace();
        } finally {
            session.flush();
            session.close();
        }
        return allrecords;
    }
}

 

Step 7:

Run the Demo.ZUL File

Read More

ZK Hibernate Setup

This post will explain how to set up the Hibernate for a ZK Project

Environment

1. Eclipse 3.7 Indigo IDE Download
2. Hibernate 4.1.1 Download
3. JavaSE 1.6 Download
4. MySQL 5.1 Download
5. JDBC Driver for MySQL ((MySQL-connector-java-5.1.19.zip)) Download
6. ZK 6 CE Version
7. Extract the Hibernate, MySql driver files in a separate folder

Step 1:

 In the Eclipse, Select File –> New –> ZK Project and give Project Name as <AnyNameAsYouWish>
 

Step 2:

Copy the following the following files in <YourProjectName> –> WebContent –> Web-INF –> Lib Folder 

• antlr-2.7.7.jar
• dom4j-1.6.1.jar
• hibernate-commons-annotations-4.0.1.Final.jar
• hibernate-core-4.1.1.Final.jar
• hibernate-entitymanager-4.1.1.Final.jar
• hibernate-jpa-2.0-api-1.0.1.Final.jar
• javassist-3.15.0-GA.jar
• jboss-logging-3.1.0.GA.jar
• jboss-transaction-api_1.1_spec-1.0.0.Final.jar
• mysql-connector-java-5.1.18-bin.jar

                

Step 3:

Create Hibernate Configuration File

Expand Java Resources Folder. Right Click on src folder and Select New->General->File and give the name as hibernate.cfg.xml

Paste the following code

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<!-- Database connection settings -->
<property name="connection.driver_class">com.mysql.jdbc.Driver</property>
<property name="connection.url">jdbc:mysql://localhost/drkare</property>
<property name="connection.username">root</property>
<property name="connection.password">123</property>

<!-- JDBC connection pool (use the built-in) -->
<property name="connection.pool_size">1</property>

<!-- SQL dialect -->
<property name="dialect">org.hibernate.dialect.MySQLDialect</property>

<!-- Enable Hibernate's automatic session context management -->
<property name="current_session_context_class">thread</property>

<!-- Disable the second-level cache -->
<property name="cache.provider_class">org.hibernate.cache.NoCacheProvider</property>

<!-- Echo all executed SQL to stdout -->
<property name="show_sql">true</property>

<!-- Drop and re-create the database schema on startup -->
<property name="hbm2ddl.auto">update</property>

<!-- Mapping Classes -->

</session-factory>
</hibernate-configuration>

Please take care to change the DB Name, User and Password according your setup

Step 4:

Now let us create the hibernate utility class where we will establish the DB Configuration using the above configuration file

Right Click on Java Resource folder-> Select New –> Class. Give the Package name as HibernateUtilities and Class name as HibernateUtil.java

Paste the following code

package HibernateUtilities;

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.cfg.Configuration;
import org.hibernate.service.ServiceRegistry;
import org.hibernate.service.ServiceRegistryBuilder;

public class HibernateUtil {

    private static SessionFactory factory;
    private static ServiceRegistry serviceRegistry;

    public static Configuration getInitConfiguration() {
        Configuration config = new Configuration();
        config.configure();
        return config;
    }

    public static Session getSession() {
        if (factory == null) {
            Configuration config = HibernateUtil.getInitConfiguration();
            serviceRegistry = new ServiceRegistryBuilder().applySettings(
                    config.getProperties()).buildServiceRegistry();
            factory = config.buildSessionFactory(serviceRegistry);
        }
        Session hibernateSession = factory.getCurrentSession();
        return hibernateSession;
    }

    public static Session beginTransaction() {
        Session hibernateSession;
        hibernateSession = HibernateUtil.getSession();
        hibernateSession.beginTransaction();
        return hibernateSession;
    }

    public static void CommitTransaction() {
        HibernateUtil.getSession().getTransaction().commit();
    }

    public static void closeSession() {
        HibernateUtil.getSession().close();
    }

    public static void rollbackTransaction() {
        HibernateUtil.getSession().getTransaction().rollback();
    }

}

Read More

Window Title Change Color

Reference URL
http://books.zkoss.org/wiki/ZK_Style_Guide/XUL_Component_Specification/Window/Default_(embedded)

Zul File

<?page title="Auto Generated index.zul"?>
<zk>
    <style>

        .z-window-embedded-tl,.z-window-embedded-tr,.z-window-embedded-hl,.z-window-embedded-hr,
        .z-window-embedded-hm 
        { 
            background-image:none;
            background-color:#94D3D3; 
        } 
        .z-window-embedded-cnt 
        { 
            border:1px
            solid #7BADAD; 
        }
    </style>
    <window title="Hello World!!" border="normal" width="200px"
        mode="embedded">
        <label value="You are using: ${desktop.webApp.version}" />
    </window>
</zk>

Output

Read More

List item Data Binding

 

Now let us see how we can load the items in the list item using Data binding.

Step 1:

Create a Zul Project as follows

 

Step 2 :

Create Person POJO Class

Java Code

package mydomain;

public class Person {

    private String _firstName = "";
    private String _lastName = "";

    // getter and setters
    public void setFirstName(String firstName) {
        _firstName = firstName;
    }

    public String getFirstName() {
        return _firstName;
    }

    public void setLastName(String lastName) {
        _lastName = lastName;
    }

    public String getLastName() {
        return _lastName;
    }

    public void setFullName(String f) {
        // do nothing.
    }

    public String getFullName() {
        return _firstName + " " + _lastName;
    }

}

 

Step 3 :

Demo.Zul File

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./myWin" ?>
<zk>
    <window id='myWin' title="MVC example" border="normal"
        apply="mydomainUI.DemoComposer">
        Example for "for each" using MVC Controller
        <listbox model="@{myWin$DemoComposer.persons}">
            <listhead sizable="true">
                <listheader label="First Name" width="100px" />
                <listheader label="Last Name" width="285px" />
            </listhead>
            <listitem self="@{each=person}">
                <listcell label="@{person.firstName}" />
                <listcell label="@{person.LastName}" />
            </listitem>
        </listbox>
    </window>
</zk>

 

Step 4:

Composer

package mydomainUI;

import java.util.ArrayList;
import java.util.List;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;
import mydomain.Person;

public class DemoComposer extends GenericForwardComposer {

    private List<Person> persons = new ArrayList<Person>();
    

    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        Person p1 = new Person();
        p1.setFirstName("John");
        p1.setLastName("Robert");
        persons.add(p1);

        p1 = new Person();
        p1.setFirstName("Rosy");
        p1.setLastName("Sean");
        persons.add(p1);

    }

    public List<Person> getPersons() {
        return persons;
    }

    

}

 

Step 5:

Run the ZUL File, The output as follows

Read More

ZK Data Binding

This is based on ZK 5 Data binding using Data Bind Manager org.zkoss.zkplus.databind.AnnotateDataBinderInit

Data binding is a mechanism that automates the data-copy plumbing code (CRUD) between UI components and the  data source. Application developers only have to tell the data binding manager about the associations between UI components and the data source. Then, the data -binding manager will do all the loading (loading data from the data source to UI components) and saving (saving data from UI component into the data source) jobs automatically
Now, let us start with simple example. You can find more details in ZK 5 Developer Reference Document.
The following example uses MVC Pattern design + ZK 5 Data binding concepts.

Step 1:

Create ZK Project as shown.

Step 2:

First of all, we have to define a data source as a data bean. In this example, we use Person class as an example
that holds the information of a person, say, first name, and last name

Here is the Code

package mydomain;

public class Person {

    private String _firstName = "";

    private String _lastName = "";

    // getter and setters

    public void setFirstName(String firstName) {

        _firstName = firstName;

    }

    public String getFirstName() {

        return _firstName;

    }

    public void setLastName(String lastName) {

        _lastName = lastName;

    }

    public String getLastName() {

        return _lastName;

    }

    public void setFullName(String f) {

        // do nothing.

    }

    public String getFullName() {

        return _firstName + " " + _lastName;

    }

}

Step 3:

Activates Data Binding Manager

The Data Binding Manager can be activated by defining the page Initializer at the top of every page.
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>

Demo.zul File

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<?page title="new page title" contentType="text/html;charset=UTF-8"?>

<zk>

    <window title="ZK Data Binding" border="normal">

        <grid width="400px">

            <rows>

                <row>

                    First Name:

                    <textbox  />

                </row>

                <row>

                    Last Name:

                    <textbox  />

                </row>

                <row>

                    Full Name:

                    <label  />

                </row>

            </rows>

        </grid>

    </window>

</zk>

Step 4:

Associate UI Components with Data Source

After adding the source data and activating the data-binding manager, you have to define the required UI objects and then associate them with the data source. ZUML annotation expression can be used to tell the data-binding manager the relationship between the data source and UI components. Its usage is very straightforward, simply by declaring the annotation into the component's attribute directly.
<component-name attribute-name="@{bean-name.attribute-name}'''"'''/>

Example

<textbox value="@{person.firstName}"

Data binding works with ZK MVC such as that:
1. Controller class provides a getter method to obtain the bean, or Collection.
2. Declare the bean, or Collection, as the value for a UI component in ZUL. The data binder will call the Controller class' getter method to append data to UI.

Modified Demo.Zul File

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<?page title="new page title" contentType="text/html;charset=UTF-8"?>

<zk>

    <window id="win" title="ZK Data Binding" border="normal" apply="UI.DemoComposer">

        <grid width="400px">

            <rows>

                <row>

                    First Name:

                    <textbox  value="@{win$DemoComposer.person.firstName}"/>

                </row>

                <row>

                    Last Name:

                    <textbox  value="@{win$DemoComposer.person.LastName }"/>

                </row>

                <row>

                    Full Name:

                    <label  />

                </row>

            </rows>

        </grid>

    </window>

</zk>

Modified  DemoComposer.Java

package UI;

import org.zkoss.zk.ui.Component;

import org.zkoss.zk.ui.util.GenericForwardComposer;

import org.zkoss.zul.Textbox;

import mydomain.Person;

public class DemoComposer extends GenericForwardComposer {

    Person person = new Person();

    public void doAfterCompose(Component comp) throws Exception {

        super.doAfterCompose(comp);

        //prepare the example person object

        person.setFirstName("George");

        person.setLastName("Bush");

    }

    public String getFirstName()

    {

        return person.getFirstName();

    }

    public String getLastName()

    {

        return person.getLastName();

    }

}

Please remember the following always
Data binding works with ZK MVC such as that:
1. Controller class provides a getter method to obtain the bean, or Collection.
2. Declare the bean, or Collection, as the value for a UI component in ZUL. The data binder will call the Controller class' getter method to append data to UI.

In the composer, instead of writing getter for each property, we can get return the object of the bean as follows without changing any thing on the zul file as shown below



package UI;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Textbox;
import mydomain.Person;

public class DemoComposer extends GenericForwardComposer {
    Person person = new Person();

    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        // prepare the example person object
        person.setFirstName("George");
        person.setLastName("Bush");
    }

    /*
     * public String getFirstName() { return person.getFirstName(); } public
     * String getLastName() { return person.getLastName(); }
     */
    public Person getPerson() {
        return this.person;
    }
}

Read More