In this post, I am trying to share an implementation to get Growl kind of message notifications in ZK based application.
In summary, Idea is to have JQuery for notifications and make javascript calls from java code in ZK.
I chose jquery plug-in developed by Eric from his blog here
Steps:
1) Download jquery and plugin available here
2) Include plugin in .zul file. I kept this in my template file header area of application
<style src="/resources/css/ui.notify.css"/>
<script type="text/javascript" src="/resources/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/resources/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/resources/js/jquery.notify.js"></script>
3) Create two div tags, one for regular notifications and one for error messages in zul file.
Note: I added only two containers here. One for success messages and another one for both warning and error message. You can create as many as you want to display messages in different styles.
<h:div id="<strong>container</strong>" style="height: 0px;">
...
</h:div>
<h:div id="<strong>errorContainer</strong>" style="height: 0px;">
..
</h:div>
4) Added code to call notify() method on page load (as explained for jquery)
<script type="text/javascript" <strong>defer="true"</strong>>
jQuery("#container").notify();
jQuery("#errorContainer").notify();
</script>
5) Added below javascript code to one of js files
/* Growl message display methods */
function displayNotificationMessage(messageTitle, message) {
jQuery("#container").notify();
jQuery("#container").notify("create", 0, {
title: messageTitle,
text: message
});
}
function displayErrorMessage(messageTitle, message) {
jQuery("#errorContainer").notify();
jQuery("#errorContainer").notify("create", "error-msg-template", {
title: messageTitle,
text: message
});
}
6) Created below java class to call above javascript methods –
This class’s interface exposes below methods –
public void displayNotificationMessage(String summary, String detail); //Displays notification message
public void displayWarningMessage(String summary, String detail); //Displays warning message
public void displayErrorMessage(String summary, String detail); //Displays error message
public void addNotificationMessage(String summary, String detail); //Adds a notification message to session
public void addWarningMessage(String summary, String detail); //Adds a warning message to session
public void addErrorMessage(String summary, String detail); //Adds a error message to session
public void displayPendingMessages(); //Displays all messages stored in session and clean them up.
Implementaiton
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.util.Clients;
import java.util.ArrayList;
import java.util.List;
/**
* JQuery based grawl message display handler.
*
* @author Anil
*/
public class GrowlJQMessageHandler implements MessageHandler {
@Override
public void displayNotificationMessage(String summary, String detail) {
Clients.evalJavaScript("displayNotificationMessage('" + summary + "', '" + detail + "')");
}
@Override
public void displayWarningMessage(String summary, String detail) {
Clients.evalJavaScript("displayErrorMessage('" + summary + "', '" + detail + "')");
}
@Override
public void displayErrorMessage(String summary, String detail) {
Clients.evalJavaScript("displayErrorMessage('" + summary + "', '" + detail + "')");
}
@Override
public void addNotificationMessage(String summary, String detail) {
ZKMessage message = new ZKMessage(ZKMessage.INFO_MSG, summary, detail);
addMessage(message);
}
@Override
public void addWarningMessage(String summary, String detail) {
ZKMessage message = new ZKMessage(ZKMessage.WARNING_MSG, summary, detail);
addMessage(message);
}
@Override
public void addErrorMessage(String summary, String detail) {
ZKMessage message = new ZKMessage(ZKMessage.ERROR_MSG, summary, detail);
addMessage(message);
}
@Override
public void displayPendingMessages() {
List zkMessages = (List) Executions.getCurrent().getSession().getAttribute(SkillSessionScopeKey.PENDING_MESSAGE_LIST.getValue());
if(zkMessages != null) {
for (ZKMessage message : zkMessages) {
if (message.getSeverity() == ZKMessage.INFO_MSG) {
displayNotificationMessage(message.getSummary(), message.getDetails());
} else if (message.getSeverity() == ZKMessage.WARNING_MSG) {
displayWarningMessage(message.getSummary(), message.getDetails());
} else if (message.getSeverity() == ZKMessage.ERROR_MSG) {
displayErrorMessage(message.getSummary(), message.getDetails());
}
}
zkMessages.clear();
Executions.getCurrent().getSession().setAttribute(SkillSessionScopeKey.PENDING_MESSAGE_LIST.getValue(), zkMessages);
}
}
private void addMessage(ZKMessage message) {
List zkMessages = null;
if (Executions.getCurrent().getSession().getAttribute(SkillSessionScopeKey.PENDING_MESSAGE_LIST.getValue()) != null) {
zkMessages = (List) Executions.getCurrent().getSession().getAttribute(SkillSessionScopeKey.PENDING_MESSAGE_LIST.getValue());
zkMessages.add(message);
} else {
zkMessages = new ArrayList();
zkMessages.add(message);
}
Executions.getCurrent().getSession().setAttribute(SkillSessionScopeKey.PENDING_MESSAGE_LIST.getValue(), zkMessages);
}
}
Usage:
Below code can be called from one of the composite right after particular action
1) To display success message immediately after the action (On same page) –
messageHandler.displayNotificationMessage("Success", "Session cancelled successfully!!!");
2) To display warning message immediately after the action (On same page) –
messageHandler.displayWarningMessage("Invalid Session ID", "Session ID entry is invalid, Please try again");
3) To display success message in redirected page after the action (On redirected page) –
messageHandler.addNotificationMessage("Success", "Session cancelled successfully!!!");
Below are screen shots of success and warning messages
Hope this post helps!!!
My notes for future reference 