Growl kind of message notifications in ZK Framework

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!!!

Advertisements

Simple demonstration of Ext.extend

I have used javascript before in many project but never looked at javascript from object oriented programming prospective. As I started learning extjs, i am finding some interesting OO fundamentals in javascript. Here is a simple demonstration of extjs’s extend feature.


// declares class 'a'
var a = function(){
// constructor
console.log('in a class constructor');
};

// defines memebers in class ‘a’
a.prototype = {
foo: function() {
console.log(‘in a class m1()’);
},
bar: function() {
console.log(‘in a class m2()’);
}
};

// declares class ‘b’
var b = function() {
console.log(‘in b class constructor’);
b.superclass.constructor.call(this);
};

// extends class ‘a’
Ext.extend(b, a, {
// overrides method ‘bar’
bar : function() {
console.log(‘in b class m2()’);
}
});

// on document ready..

Ext.onReady(function(){
// declares aVar of type ‘a’
var aVar = new a();

// calls methods using aVar
aVar.foo();
aVar.bar();

// declares bVar of type ‘b’
var bVar = new b();

// calls methods using bVar
bVar.foo();
bVar.bar();

});

Output in forebug console when page loads –

in a class constructor
in a class m1()
in a class m2()
in b class constructor
in a class constructor
in a class m1()
in b class m2()