Thursday, 31 May 2012

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
image

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

image

Download the source as war file

Wednesday, 30 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

image

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


image

Tuesday, 29 May 2012

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

    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

                 image

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

image

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

image

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

Monday, 28 May 2012

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

image

 

Step 2 :

Create Person POJO Class

image

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


image



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


Friday, 25 May 2012

Message Box Customization

Environment

  1. Eclipse 3.7 Indigo IDE
  2. 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
image
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


image

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


image

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

image

Step 6 :



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

image

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

image