Requirement Constraints

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Friday, 25 May 2012

Message Box Customization

Posted on 22:58 by Unknown

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
Email ThisBlogThis!Share to XShare to Facebook
Posted in ZK Message Box | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • ZK Example for inline Editing with Add New and Delete
    I am quite impressed on this demo from ZK . But adding new record and delete existing record is missing as part of typical CRUD. So i thoug...
  • EDI 5010 Documentation 837 Professional - Loop 2010BB Payer Name
    2010BB Payer Name          In this loop, all the information will be taken from Insurance master screen. Take a look of our sample screen...
  • EDI 5010 Documentation–837 - BHT - Beginning of Hierarchical Transaction
    BHT – Beginning of Hierarchical Transaction Loop Seg ID Segment Name Format Length Ref# Req Value   BHT Beginning of Hier...
  • MVVM Command annotation and Notify change example
    Here is an example, how to pass parameter on a zul through MVVM Command binding annotation. ZK URL http://books.zkoss.org/wiki/ZK%20Develo...
  • EDI 270–5010 Documentation - GS – Functional Group Header
    GS – Functional Group Header Loop Seg ID Segment Name Format Length Ref# Req Value Header GS Functional Group Header 2 ...
  • History of Present Illness
    HPI - One of the main component of Clinical History. What is an HPI ? The history of present illness (HPI) is a chronological description...
  • Patient Demographics
    Patient browse (search) is the key element for any EMR / PMS Software. In my past 15 years experience, i involved more than 5 times in desig...
  • EDI 270–5010 Documentation - ISA – Interchange Control Header
    ISA – Interchange Control Header ISA – Interchange Control Header   The ISA is a fixed record length segment and all positions within ea...
  • EDI 5010 Documentation–837 Professional - ISA – Interchange Control Header
      ISA – Interchange Control Header   The ISA is a fixed record length segment and all positions within each of the data elements must be ...
  • ZK Datebox: Customize Datebox as Yearbox/Monthbox
    This article based on Bai Ben from his blog. You can check here . My sincere thanks to him who helped me in this example ZK Version : 6.5.0...

Categories

  • Billing Process
  • C Workbook
  • C++ Workbook
  • Eclipse Tips
  • EDI 5010
  • EMR Appointment Features
  • EMR Labs Stuff
  • EMR PMS Links
  • EMR Use cases
  • EMR Vital Sign
  • Good Website Design
  • Hibernate Criteria Queries
  • Hibernate Introduction
  • Hibernate Introduction Setup
  • Hibernate Mapping
  • Hibernate POC
  • Hibernate Validator
  • Hibernate–Java Environment setup
  • HPI
  • Java
  • Maven
  • MU Certification
  • NPI
  • PQRS
  • Practice Management System
  • Spring Security
  • Tech Links
  • Today Tech Stuff
  • zk
  • ZK Hibernate
  • ZK 5 Databinding
  • ZK Application
  • ZK Calling Another ZUL
  • ZK CheckBox
  • ZK CreateComponents
  • ZK CSS
  • ZK extended Components
  • ZK Foreach
  • ZK Forum Posts
  • ZK Framework
  • ZK Hibernate Setup
  • ZK ID Space
  • ZK Include
  • ZK Installation
  • ZK iReport
  • ZK Layout
  • ZK Listitem Pagination
  • ZK Message Box
  • ZK MVC
  • ZK MVC Combox Box
  • ZK MVC CRUD Examples
  • ZK MVC Listbox
  • ZK MVVM
  • ZK MVVM Combo
  • ZK MVVM CRUD
  • ZK MVVM ListBox
  • ZK Spring
  • ZK TextBox

Blog Archive

  • ►  2013 (105)
    • ►  December (3)
    • ►  September (7)
    • ►  August (13)
    • ►  July (1)
    • ►  June (11)
    • ►  May (3)
    • ►  April (14)
    • ►  March (19)
    • ►  February (21)
    • ►  January (13)
  • ▼  2012 (177)
    • ►  December (1)
    • ►  November (13)
    • ►  October (19)
    • ►  September (24)
    • ►  August (26)
    • ►  July (6)
    • ►  June (37)
    • ▼  May (30)
      • Input Form Validation window
      • ZK Executions.createComponents
      • List Item Connected with Hibernate and Search Para...
      • ZK Hibernate Setup
      • Window Title Change Color
      • List item Data Binding
      • ZK Data Binding
      • Message Box Customization
      • MVC CRUD Application–Filter records in the list ba...
      • ZK Check Event Handling Using MVC
      • MVC CRUD Application with Auto filter for List item
      • Text Box on change and on Changing Event
      • Hibernate Criteria Queries
      • MVC CRUD Application
      • Hibernate Query uniqueResult Method
      • Hibernate retrieve the first record always when we...
      • Hibernate Introduction Part 4
      • ZK Data Binding Part 1
      • Simple Sightseeing Application Part 2
      • Window CSS
      • ZK Simple Sightseeing Application Part 1
      • Button CSS
      • Group Box with Collapse and Expand Button in the R...
      • Tuning Eclipse Performance and Avoiding OutOfMemor...
      • Listitem Mold Paging - Add components in the pagin...
      • ZK Calling Another ZUL File
      • ZK Installation Guide
      • List Box CSS
      • Eclipse Tips and Tricks
      • Hibernate Introduction Part 3
    • ►  April (16)
    • ►  March (1)
    • ►  January (4)
  • ►  2011 (5)
    • ►  December (1)
    • ►  November (1)
    • ►  July (1)
    • ►  June (1)
    • ►  April (1)
  • ►  2010 (1)
    • ►  September (1)
Powered by Blogger.

About Me

Unknown
View my complete profile