Healthcare IT EMR PMS: May 2012

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

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.

ZK Hibernate Setup

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

Environment

Eclipse 3.7 Indigo IDE Download
Hibernate 4.1.1 Download
JavaSE 1.6 Download
MySQL 5.1 Download
JDBC Driver for MySQL ((MySQL-connector-java-5.1.19.zip)) Download
ZK 6 CE Version
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>

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


<property name="connection.pool_size">1</property>


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


<property name="current_session_context_class">thread</property>


<property name="cache.provider_class">org.hibernate.cache.NoCacheProvider</property>


<property name="show_sql">true</property>


<property name="hbm2ddl.auto">update</property>



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

}

Window Title Change Color

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

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

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

Message Box Customization

Environment

Eclipse 3.7 Indigo IDE
JavaSE 1.6

Many thanks to terrytornado from ZK who gave idea for how to customize ZK Message Box. You can see more details in the following url

http://www.zkoss.org/forum/listComment/8802-Multiline-Messagebox-updated

Step 1:

Create a New ZK Project

Step 2:

Create multiLineMessageBox.zul

Here is the code

<?xml version="1.0" encoding="UTF-8"?>
<?page title="Multiline Messagebox" language="xul/html"?>
 
<window border="none" width="300px" closable="true"
    use="org.zkoss.zul.impl.MessageboxDlg">
 
    <style dynamic="true">
        .myMultiMessageBox .z-panel-header { background: #FC7A7C -1px;
        font-weight:bold; zoom: 1; border: 1px solid; line-height:
        15px;} .myMultiMessageBox .z-panel-body { border-style:none
        solid solid; border-width:0 1px 1px; overflow:hidden;
        padding:0px; }
    </style>
 
    <panel title="${arg.title}" border="normal"
        sclass="myMultiMessageBox">
        <panelchildren style="background-color: white;">
            <hbox>
                <div class="${arg.icon}" />
                <div sclass="z-messagebox" width="100%">
                    <label multiline="true" value="${arg.message}"
                        sclass="word-wrap" width="100%" />
                </div>
                <div width="10px" />
            </hbox>
            <separator bar="true" />
            <hbox style="margin-left:auto; margin-right:auto">
                <button id="btn1" identity="${arg.OK}"
                    sclass="z-messagebox-btn"
                    use="org.zkoss.zul.impl.MessageboxDlg$Button"
                    if="${!empty arg.OK}" />
                <button identity="${arg.CANCEL}"
                    sclass="z-messagebox-btn"
                    use="org.zkoss.zul.impl.MessageboxDlg$Button"
                    if="${!empty arg.CANCEL}" />
                <button identity="${arg.YES}" sclass="z-messagebox-btn"
                    use="org.zkoss.zul.impl.MessageboxDlg$Button"
                    if="${!empty arg.YES}" />
                <button identity="${arg.NO}" sclass="z-messagebox-btn"
                    use="org.zkoss.zul.impl.MessageboxDlg$Button"
                    if="${!empty arg.NO}" />
                <button identity="${arg.RETRY}"
                    sclass="z-messagebox-btn"
                    use="org.zkoss.zul.impl.MessageboxDlg$Button"
                    if="${!empty arg.RETRY}" />
                <button identity="${arg.ABORT}"
                    sclass="z-messagebox-btn"
                    use="org.zkoss.zul.impl.MessageboxDlg$Button"
                    if="${!empty arg.ABORT}" />
                <button identity="${arg.IGNORE}"
                    sclass="z-messagebox-btn"
                    use="org.zkoss.zul.impl.MessageboxDlg$Button"
                    if="${!empty arg.IGNORE}" />
            </hbox>
            <separator></separator>
        </panelchildren>
    </panel>
</window>
 
 

Step 3:

Create MultiLineMessageBox.java

Here is the code

package myutility;
 
/**
 * Copyright 2010 the original author or authors.
 * 
 * This file is part of Zksample2. http://zksample2.sourceforge.net/
 *
 * Zksample2 is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * Zksample2 is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Zksample2.  If not, see <http://www.gnu.org/licenses/gpl.html>.
 */
 
import java.io.Serializable;
 
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zul.Messagebox;
 
/**
 * Extended messagebox that can show multilined messages. <br>
 * Lines can be breaked with the \n . <br>
 * <br>
 * 
 * @changes 04.07.2009/sge extended for showing the icons <br>
 *          05.07.2009/sge added an empty line before and after the message. <br>
 *          08.07.2009/sge added for the EventListener
 * 
 * @author sgerth
 */
public class MultiLineMessageBox extends Messagebox implements Serializable {
 
    private static final long serialVersionUID = 1L;
 
    // path of the messagebox zul-template
    private transient static String _templ = "/WEB-INF/pages/util/multiLineMessageBox.zul";
 
    public MultiLineMessageBox() {
    }
 
    public static void doSetTemplate() {
        setTemplate(_templ);
    }
 
    /**
     * Shows a message box and returns what button is pressed. A shortcut to
     * show(message, null, OK, INFORMATION). <br>
     * <br>
     * Simple MessageBox with customizable message and title. <br>
     * 
     * @param message
     *            The message to display.
     * @param title
     *            The title to display.
     * @param icon
     *            The icon to display. <br>
     *            QUESTION = "z-msgbox z-msgbox-question"; <br>
     *            EXCLAMATION = "z-msgbox z-msgbox-exclamation"; <br>
     *            INFORMATION = "z-msgbox z-msgbox-imformation"; <br>
     *            ERROR = "z-msgbox z-msgbox-error"; <br>
     * @param buttons
     *            MultiLineMessageBox.CANCEL<br>
     *            MultiLineMessageBox.YES<br>
     *            MultiLineMessageBox.NO<br>
     *            MultiLineMessageBox.ABORT<br>
     *            MultiLineMessageBox.RETRY<br>
     *            MultiLineMessageBox.IGNORE<br>
     * @param padding
     *            true = Added an empty line before and after the message.<br>
     * 
     * 
     * @return
     * @throws InterruptedException
     */
    public static final int show(String message, String title, int buttons, String icon, boolean padding) throws InterruptedException {
 
        String msg = message;
 
        if (padding == true) {
            msg = "\n" + message + "\n\n";
        }
 
        if (icon.equals("QUESTION")) {
            icon = "z-msgbox z-msgbox-question";
        } else if (icon.equals("EXCLAMATION")) {
            icon = "z-msgbox z-msgbox-exclamation";
        } else if (icon.equals("INFORMATION")) {
            icon = "z-msgbox z-msgbox-imformation";
        } else if (icon.equals("ERROR")) {
            icon = "z-msgbox z-msgbox-error";
        }
 
        return show(msg, title, buttons, icon, 0, null);
    }
 
    /**
     * Shows a message box and returns what button is pressed. A shortcut to
     * show(message, null, OK, INFORMATION). <br>
     * <br>
     * Simple MessageBox with customizable message and title. <br>
     * 
     * @param message
     *            The message to display.
     * @param title
     *            The title to display.
     * @param icon
     *            The icon to display. <br>
     *            QUESTION = "z-msgbox z-msgbox-question"; <br>
     *            EXCLAMATION = "z-msgbox z-msgbox-exclamation"; <br>
     *            INFORMATION = "z-msgbox z-msgbox-imformation"; <br>
     *            ERROR = "z-msgbox z-msgbox-error"; <br>
     * @param buttons
     *            MultiLineMessageBox.CANCEL<br>
     *            MultiLineMessageBox.YES<br>
     *            MultiLineMessageBox.NO<br>
     *            MultiLineMessageBox.ABORT<br>
     *            MultiLineMessageBox.RETRY<br>
     *            MultiLineMessageBox.IGNORE<br>
     * @param padding
     *            true = Added an empty line before and after the message.<br>
     * 
     * 
     * @return
     * @throws InterruptedException
     */
    public static final int show(String message, String title, int buttons, String icon, boolean padding, EventListener listener) throws InterruptedException {
 
        String msg = message;
 
        if (padding == true) {
            msg = "\n" + message + "\n\n";
        }
 
        if (icon.equals("QUESTION")) {
            icon = "z-msgbox z-msgbox-question";
        } else if (icon.equals("EXCLAMATION")) {
            icon = "z-msgbox z-msgbox-exclamation";
        } else if (icon.equals("INFORMATION")) {
            icon = "z-msgbox z-msgbox-imformation";
        } else if (icon.equals("ERROR")) {
            icon = "z-msgbox z-msgbox-error";
        }
 
        return show(msg, title, buttons, icon, 0, listener);
    }
 
}

Step 4:

Create MessageBoxComposer.java and Demo.zul

MessageBoxComposer.java

package mydomain;
 
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
 
import myutility.MultiLineMessageBox;
 
@SuppressWarnings("rawtypes")
public class MessageBoxComposer extends GenericForwardComposer {
 
    private static final long serialVersionUID = 1L;
 
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
    }
 
    public void onClick$btn_MultilineMessagebox(Event event) throws InterruptedException {
        String msg = "Hallo \n\nI'm a multi line Message.";
        String title = "E r r o r !";
 
        MultiLineMessageBox.doSetTemplate();
        MultiLineMessageBox.show(msg, title, MultiLineMessageBox.OK, "ERROR", true);
    }
 
}

Demo.zul

<zk>
    <window title="Hello World!!" border="normal" width="500px"
        apply="mydomain.MessageBoxComposer">
 
        <hbox>
            <button id="btn_MultilineMessagebox"
                label="MultilineMessagebox" width="200px" />
        </hbox>
    </window>
</zk>

Step 5 :

Run the Demo.zul file. The output as folllows

Step 6 :

Now let us change the look and feel by adding external CSS File. Create the CSS File as shown below

CSS Code

.z-window-highlighted-hr,.z-window-highlighted-hl,.z-window-highlighted-hm,.z-window-highlighted-tl,.z-window-highlighted-br,.z-window-highlighted-cl,.z-window-highlighted-cr
    {
    background: none;
    background-color: #F99DB0;
}
 
.z-window-modal-tr,.z-window-highlighted-tr,.z-window-overlapped-tr,.z-window-popup-tr
    {
    background-position: right -12px;
    margin-right: -6px;
    margin-top: -6px;
}
 
.z-window-highlighted-close { background:url('../images/closebutton.gif')
        transparent no-repeat 0 0; }
        
.z-window-highlighted-icon
{
    width: 13px;
}
.z-msgbox-question {
    
    background-image:url('../images/Question_32_32.png');
}
 
/* button 
---------------------------------------------- */
.mybutton.z-button .z-button-cm {
    background-image: none;
    color: black; 
    font-weight : bolder; 
}
 
.mybutton.z-button .z-button-tm, .z-button .z-button-bm {
    background-image: none;
}
 
.mybutton.z-button .z-button-cl, .z-button .z-button-cr {
    background-image: none;
}
 
.mybutton.z-button .z-button-tl {
   background-image: none;
}
 
.mybutton.z-button .z-button-bl {
   background-image: none;
}
 
.mybutton.z-button .z-button-tr {
   background-image: none;
}
 
.mybutton.z-button .z-button-br {
   background-image: none;
}
 
.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em ;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
 
.smallrounded {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    font-weight : bolder;
    color: black;
    
}
 
.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}
 
.roundsearch {
    background-image:url('../images/green_search_button.png');
    background-position: center;
    height: 22px;
    width: 22px;
}
 
 
.roundsearch:hover {
    background-image:url('../images/green_search_button-hover.png');
    background-position: center;
    height: 22px;
    width: 22px;
    
}
 
/* color styles 
---------------------------------------------- */
 
/* black */
.black {
    color: #d7d7d7;
    border: solid 1px #333;
    background: #333;
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
    background: -moz-linear-gradient(top,  #666,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
    padding: 3px 5px 3px 5px;
}
.black:hover {
    background: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
    background: -moz-linear-gradient(top,  #444,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
    padding: 4px 5px 2px 5px;
}
.black:active {
    color: #666;
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top,  #000,  #444);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
    padding: 3px 5px 3px 5px;
}
 
/* gray */
.gray {
    color: #e9e9e9;
    border: solid 1px #555;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    background: -moz-linear-gradient(top,  #888,  #575757);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
    padding: 3px 5px 3px 5px;
}
.gray:hover {
    background: #616161;
    background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
    background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
    padding: 4px 5px 2px 5px;
}
.gray:active {
    color: #afafaf;
    background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
    background: -moz-linear-gradient(top,  #575757,  #888);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
    padding: 3px 5px 3px 5px;
}
 
/* white */
.white {
    color: #606060;
    border: solid 1px #b7b7b7;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top,  #fff,  #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
    padding: 3px 5px 3px 5px;
}
.white:hover {
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
    padding: 4px 5px 2px 5px;
}
.white:active {
    color: #999;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    background: -moz-linear-gradient(top,  #ededed,  #fff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
    padding: 3px 5px 3px 5px;
}
 
/* orange */
.orange {
    color: #F2C46C;
    border: solid 1px #F2C46C;
    background: #F2C46C;
    background: -webkit-gradient(linear, left top, left bottom, from(#E9A436), to(#FFF4D6));
    background: -moz-linear-gradient(top,  #E9A436,  #FFF4D6);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E9A436', endColorstr='#FFF4D6');
    padding: 3px 5px 3px 5px;
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF4D6), to(#E9A436));
    background: -moz-linear-gradient(top,  #FFF4D6,  #E9A436);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF4D6', endColorstr='#E9A436');
    padding: 4px 5px 2px 5px;
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    padding: 3px 5px 3px 5px;
}
 
 
/* red */
.red {
    color: #faddde;
    border: solid 1px #980c10;
    background: #d81b21;
    background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
    background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
    padding: 3px 5px 3px 5px;
}
.red:hover {
    background: #b61318;
    background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
    background: -moz-linear-gradient(top,  #c9151b,  #a11115);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
    padding: 4px 5px 2px 5px;
}
.red:active {
    color: #de898c;
    background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
    background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
    padding: 3px 5px 3px 5px;
}
 
/* blue */
.blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#77bcfc), to(#286a99));
    background: -moz-linear-gradient(top,  #77bcfc,  #286a99);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#77bcfc', endColorstr='#286a99');
    padding: 3px 5px 3px 5px;
}
.blue:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#286a99), to(#77bcfc));
    background: -moz-linear-gradient(top,  #286a99,  #77bcfc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#286a99', endColorstr='#77bcfc');
    padding: 4px 5px 2px 5px;
}
.blue:active {
    color: #80bed6;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
    padding: 3px 5px 3px 5px;
}
 
/* rosy */
.rosy {
    color: #fae7e9;
    border: solid 1px #b73948;
    background: #da5867;
    background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
    background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
    padding: 3px 5px 3px 5px;
}
.rosy:hover {
    background: #ba4b58;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
    background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
    padding: 4px 5px 2px 5px;
}
.rosy:active {
    color: #dca4ab;
    background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
    background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
    padding: 3px 5px 3px 5px;
}
 
/* green */
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#93dd31), to(#4f8801));
    background: -moz-linear-gradient(top,  #93dd31,  #4f8801);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#93dd31', endColorstr='#4f8801');
    padding: 3px 5px 3px 5px;
}
 
 
.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#4f8801), to(#93dd31));
    background: -moz-linear-gradient(top, #4f8801,  #93dd31);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f8801', endColorstr='#93dd31');
    padding: 4px 5px 2px 5px;
    
}
.green:active {
    color: #a9c08c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
    padding: 3px 5px 3px 5px;
}
 
/* pink */
.pink {
    color: #feeef5;
    border: solid 1px #d2729e;
    background: #f895c2;
    background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
    background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
    padding: 3px 5px 3px 5px;
}
.pink:hover {
    background: #d57ea5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
    background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
    padding: 4px 5px 2px 5px;
}
.pink:active {
    color: #f3c3d9;
    background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
    background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
    padding: 3px 5px 3px 5px;
}

Modified Demo.zul

<zk>
    <window title="Hello World!!" border="normal" width="500px"
        apply="mydomain.MessageBoxComposer">
 
        <hbox>
            <button id="btn_MultilineMessagebox"
                label="MultilineMessagebox" width="200px" />
            <button id="btn_YesNo"    
                label="Yes And No" width="200px" />
        </hbox>
    </window>
</zk>

Modified MessageBoxComposer.java

package mydomain;
 
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Messagebox;
 
import myutility.MultiLineMessageBox;
 
@SuppressWarnings("rawtypes")
public class MessageBoxComposer extends GenericForwardComposer {
 
    private static final long serialVersionUID = 1L;
 
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
    }
 
    public void onClick$btn_MultilineMessagebox(Event event)
            throws InterruptedException {
        String msg = "Hallo \n\nI'm a multi line Message.";
        String title = "E r r o r !";
 
        MultiLineMessageBox.doSetTemplate();
        MultiLineMessageBox.show(msg, title, MultiLineMessageBox.OK, "ERROR",
                true);
    }
 
    public void onClick$btn_YesNo(Event event) throws InterruptedException {
        String msg = "Are you sure to delete the selected items...?";
        String title = "Confirmation";
 
        MultiLineMessageBox.doSetTemplate();
        MultiLineMessageBox.show(msg, title,  MultiLineMessageBox.OK | MultiLineMessageBox.CANCEL, "QUESTION",
                true);
    }
 
}

Modified multiLineMessageBox.zul

<?xml version="1.0" encoding="UTF-8"?>
<?page title="Multiline Messagebox" language="xul/html"?>
 
<window border="normal" width="400px" closable="true"
    use="org.zkoss.zul.impl.MessageboxDlg" mode="modal"
    title="${arg.title}">
 
    <style src="/css/messageboxcss.css"></style>
    
    <separator></separator>
    <hbox>
        <div class="${arg.icon}" />
        <div sclass="z-messagebox" width="100%">
            <label multiline="true" value="${arg.message}"
                sclass="word-wrap" width="100%" />
        </div>
        <div width="10px" />
    </hbox>
    
    <hbox style="margin-left:auto; margin-right:auto">
        <button id="btn1" identity="${arg.OK}" mold ="trendy" sclass="mybutton orange small smallrounded"
            use="org.zkoss.zul.impl.MessageboxDlg$Button" if="${!empty arg.OK}" />
        <button identity="${arg.CANCEL}" mold ="trendy" sclass="mybutton orange small smallrounded"
            use="org.zkoss.zul.impl.MessageboxDlg$Button"
            if="${!empty arg.CANCEL}" />
        <button identity="${arg.YES}" mold ="trendy" sclass="mybutton orange small smallrounded"
            use="org.zkoss.zul.impl.MessageboxDlg$Button" if="${!empty arg.YES}" />
        <button identity="${arg.NO}" sclass="z-messagebox-btn"
            use="org.zkoss.zul.impl.MessageboxDlg$Button" if="${!empty arg.NO}" />
        <button identity="${arg.RETRY}" sclass="z-messagebox-btn"
            use="org.zkoss.zul.impl.MessageboxDlg$Button"
            if="${!empty arg.RETRY}" />
        <button identity="${arg.ABORT}" sclass="z-messagebox-btn"
            use="org.zkoss.zul.impl.MessageboxDlg$Button"
            if="${!empty arg.ABORT}" />
        <button identity="${arg.IGNORE}" sclass="z-messagebox-btn"
            use="org.zkoss.zul.impl.MessageboxDlg$Button"
            if="${!empty arg.IGNORE}" />
    </hbox>
    <separator></separator>
    <separator></separator>
</window>
 
 
 

Output

X12 EDI Examples

ZK Executions.createComponents

Step : 1

Step : 2

Step : 3

Step : 4

List Item Connected with Hibernate and Search Parameter

Summary

ZK Hibernate Setup

Environment

Step 1:

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

Step 2:

Window Title Change Color

List item Data Binding

Step 1:

Step 2 :

Step 3 :

Step 4:

Composer

Step 5:

ZK Data Binding

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

Step 3:

Step 4:

Message Box Customization

Environment

Many thanks to terrytornado from ZK who gave idea for how to customize ZK Message Box. You can see more details in the following url

Step 1:

Step 2:

Step 3:

Create MultiLineMessageBox.java

Step 4:

Create MessageBoxComposer.java and Demo.zul

Step 5 :

Step 6 :