Healthcare IT EMR PMS: 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

Message Box Customization