ZK Component Reference/Supporting Classes/Messagebox

Messagebox

• Demonstration: Messagebox
• Java API: Messagebox
• JavaScript API: N/A

Employment/Purpose

It provides a set of utilities to show a message and have a user to confirm a situation.

It is typically used to alert users when an error occurs, or to prompt users for an decision.

Example

The simplest use of a message box is to inform the user something is done. For example,

Messagebox.show("The backup has been done.");
Messagebox.show("Failed to access the information", null, 0,  Messagebox.ERROR);

There are a lot of utilities that allow you to show a message in different look, such as the buttons, icon and title. Please refer to Messagebox for more information.

Take Actions Depending On Which Button Is Clicked

If you'd like to know which button is clicked, you have to implement an event listener. For example,

Messagebox.show("Something is changed. Are you sure?", 
	"Question", Messagebox.OK | Messagebox.CANCEL,
	Messagebox.QUESTION,
	 	new org.zkoss.zk.ui.event.EventListener(){
	 		public void onEvent(Event e){
	 			if(Messagebox.ON_OK.equals(e.getName())){
	 				//OK is clicked
	 			}else if(Messagebox.ON_CANCEL.equals(e.getName())){
	 				//Cancel is clicked
	 			}
	 		}
	 	}
	);

The invocation of Messagebox.show(String, String, int, String) will return immediately after the invocation. Then, if the user clicks a button, the event listener will be invoked. You could examine the event name to know which button is clicked. If the user clicked the Close button on the right-top corner, the onClose event is fired.

---

Listen ClickEvent

[since 6.0.0]

Since ZK 6, the event listener will be invoked with an instance of Messagebox.ClickEvent, and it is easy to retrieve the button being clicked from it. For example,

Messagebox.show("Something is changed. Are you sure?", 
	"Question", Messagebox.OK | Messagebox.CANCEL,
	Messagebox.QUESTION,
	 	new org.zkoss.zk.ui.event.EventListener<ClickEvent>(){
	 		public void onEvent(ClickEvent e){
	 			switch (e.getButton() {
	 			case Messagebox.Button.OK: //OK is clicked
	 			case Messagebox.Button.Cancel: //Cancel is clicked
				default: //if the Close button is clicked, e.getButton() returns null
				}
	 		}
	 	}
	);

Customization

Assign the Order of Buttons

[since 6.0.0]

If you'd like to assign the order, you could use Messagebox.show(String, Button[], EventListener listener) as follows.

 Messagebox.show("Cancel the operation?",
 	new Messagebox.Button[] {Messagebox.Button.NO, Messagebox.Button.YES},
 		new EventListener<Messagebox.ClickEvent>() { //optional
 			public void onEvent(Messagebox.ClickEvent event) {
 				//...
 			}
 		});

The buttons will be displayed in the same order as the array specified in the buttons argument.

If you don't care the order, you could use a combination of constants, such as Messagebox.OK. For example,

 Messagebox.show("Cancel the operation?", null, Messagebox.YES+Messagebox.NO, null);

Assign the Labels of Buttons

[since 6.0.0]

By default, the label of a button is loaded from the message file based on the current locale. However, you could assign any label you'd like.

onClick='Messagebox.show("Yes and No", "Custom Labels",
	new Messagebox.Button[] {Messagebox.Button.YES, Messagebox.Button.NO},
	new String[] {"Yes, it is correct"},
	Messagebox.INFORMATION, null, null)'/>

The btnLabels argument is an array of labels you'd like to use. If it is null or the length is shorter than the array specified the buttons argument, the default label will be used.

The Default Title

If the title is not specified in the application's name (returned by WebApp.getAppName()). You could change it by invoking WebApp.setAppName(String).

Since 5.0.6, you could specify the application's name with a library property called org.zkoss.zk.ui.WebApp.name. For example, you could specify the following in WEB-INF/zk.xml:

<library-property>
    <name>org.zkoss.zk.ui.WebApp.name</name>
    <value>My Killer Application</value>
</library-property>

The Width and Parameters

[since 6.0.0]

The params argument in

Map params = new HashMap();
params.put("width", 500);
Messagebox.show("This is a very long statement and meaningless to see if it looks ok with the given width.",
	null, null, null, Messagebox.INFORMATION, null,

new EventListener() { public void onEvent(Event event) { //... } }, params);

The parameters will be passed to the dialog template (described in the next section), so you could pass whatever you'd like as long as the template recognize them. In additions, the priority of the params argument is higher, i.e., it could override the default values, though it is rarely required.

== The Template ==

The UI of a message box is based on a ZUL file, so you could customize it by replacing it with your own implementation. It can be done easily by invoking org.zkoss.zul.Messagebox.html#show(java.lang.String, java.lang.String, org.zkoss.zul.Messagebox.Button[], java.lang.String[], java.lang.String, org.zkoss.zul.Messagebox.Button, org.zkoss.zk.ui.event.EventListener, java.util.Map)" title="org.zkoss.zul.Messagebox allows you to customize a message dialog further. For example, you could make the dialog wider with the parameter called width as shown below.

Map params = new HashMap();
params.put("width", 500);
Messagebox.show("This is a very long statement and meaningless to see if it looks ok with the given width.",
	null, null, null, Messagebox.INFORMATION, null,

new EventListener() { public void onEvent(Event event) { //... } }, params);

The parameters will be passed to the dialog template (described in the next section), so you could pass whatever you'd like as long as the template recognize them. In additions, the priority of the params argument is higher, i.e., it could override the default values, though it is rarely required.

== The Template ==

The UI of a message box is based on a ZUL file, so you could customize it by replacing it with your own implementation. It can be done easily by invoking org.zkoss.zul.Messagebox">Messagebox allows you to customize a message dialog further. For example, you could make the dialog wider with the parameter called width as shown below.

Map params = new HashMap();
params.put("width", 500);
Messagebox.show("This is a very long statement and meaningless to see if it looks ok with the given width.",
	null, null, null, Messagebox.INFORMATION, null,

new EventListener() { public void onEvent(Event event) { //... } }, params);

The parameters will be passed to the dialog template (described in the next section), so you could pass whatever you'd like as long as the template recognize them. In additions, the priority of the params argument is higher, i.e., it could override the default values, though it is rarely required.

== The Template ==

The UI of a message box is based on a ZUL file, so you could customize it by replacing it with your own implementation. It can be done easily by invoking org.zkoss.zul.Messagebox.show(String, String, Button[], String[], String, Button, EventListener, Map). Notice that it affects all message boxes used in an application. It is typically called when the application starts (i.e., in WebAppInit.init(WebApp) -- for more information, please refer to ZK Developer's Reference: Init and Cleanup).

To implement a custom template, please take a look at the default template.

Supported events

Name	Event Type
None	None

Supported Children

*NONE

Use cases

Version	Description	Example Location

Version History

Version	Date	Content
6.0.0	October 2011	The order and labels of the buttons were assignable.
6.0.0	October 2011	Messagebox.ClickEvent was introduced to simplify the identification of a button.