How to create a MessageSystem with the zk framework ?
A simple messageBarController that works with the new zk5 EventQueues mechanism.
In this article we will create a messaging system which is visually placed in the statusBar. We will call it messageBar and we add it as a Window component left before the statusBar window component as we explained in this previous post.
The ready implemented component are looks like this picture with only two icons in it. The red mail icon is for showing the message. This icon is blinking if there comes new messages in and the message reader is not opened (or if you uncomment a few lines in code it will popUp if a new message come in) . The right next icon is for opening a little window for writing a message text who can be send to all users.

Message Bar component
pieces of the zul-template
. . .
<!-- STATUS BAR AREA -->
<south id="south" border="none" height="22px"
splittable="false">
<div id="divSouth" align="left"
style="float: left; padding: 0px" width="100%">
<borderlayout width="100%" height="22px">
<west border="none" width="50px">
<!-- The MessageBar. Comps are created in the Controller -->
<window id="winMessageBar"
apply="${messageBarCtrl}" border="none" width="50px"
height="22px" />
</west>
<center border="none">
<!-- The StatusBar. Comps are created in the Controller -->
<window id="winStatusBar"
apply="${statusBarCtrl}" border="none" width="100%"
height="22px" />
</center>
</borderlayout>
</div>
</south>
. . .
The messageBar controller creates the two icons with their event Listeners and the global Listener for the messaging system. If you whish that an incoming message will popup self than you can uncomment the involved lines in the afterCompose method.
MessageBarCtrl.java
/**
* =======================================================================<br>
* MessageBarController. <br>
* =======================================================================<br>
* Works with the EventQueues mechanism of zk 5.x. ALl needed components are
* created in this class. In the zul-template declare only this controller with
* 'apply' to a winMessageBar window component.<br>
* This MessageBarController is for sending and receiving messages from other
* users.<br>
*
* The message text we do input with a special helper window that is called
* InputMessageTextBox.java
*
* <pre>
* < borderlayout >
* . . .
* < !-- STATUS BAR AREA -- >
* < south id="south" border="none" margins="1,0,0,0"
* height="20px" splittable="false" flex="true" >
* < div id="divSouth" >
*
* < !-- The MessageBar. Comps are created in the Controller -- >
* < window id="winMessageBar" apply="${messageBarCtrl}"
* border="none" width="100%" height="100%" />
* < !-- The StatusBar. Comps are created in the Controller -- >
* < window id="winStatusBar" apply="${statusBarCtrl}"
* border="none" width="100%" height="100%" />
* < /div >
* < /south >
* < /borderlayout >
* </pre>
*
* call for the message system:
*
* <pre>
* EventQueues.lookup("userNameEventQueue", EventQueues.APPLICATION, true).publish(new Event("onChangeSelectedObject", null, "new Value"));
* </pre>
*
*
* Spring bean declaration:
*
* <pre>
* < !-- MessageBarCtrl -->
* < bean id="messageBarCtrl" class="de.forsthaus.webui.util.MessageBarCtrl"
* scope="prototype">
* < /bean>
* </pre>
*
* since: zk 5.0.0
*
* @author sgerth
*
*/
public class MessageBarCtrl extends GenericForwardComposer implements Serializable {
private static final long serialVersionUID = 1L;
/*
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* All the components that are defined here and have a corresponding
* component with the same 'id' in the zul-file are getting autowired by our
* 'extends GFCBaseCtrl' GenericForwardComposer.
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
protected Window winMessageBar; // autowired
// Indicator column for message buttons
private Column statusBarMessageIndicator;
private Toolbarbutton btnOpenMsg;
private Toolbarbutton btnSendMsg;
private Window msgWindow = null;
private String msg = "";
private String userName;
/**
* Default constructor.
*/
public MessageBarCtrl() {
super();
}
@Override
public void doAfterCompose(Component window) throws Exception {
super.doAfterCompose(window);
try {
userName = ((UserImpl) SecurityContextHolder.getContext().getAuthentication().getPrincipal()).getUsername();
} catch (Exception e) {
e.printStackTrace();
}
// Listener for incoming messages ( scope=APPLICATION )
EventQueues.lookup("testEventQueue", EventQueues.APPLICATION, true).subscribe(new EventListener() {
@Override
public void onEvent(Event event) throws Exception {
final String msg = (String) event.getData();
// Check if empty, than do not show incoming message
if (StringUtils.isEmpty(msg)) {
return;
}
setMsg(msg);
if (msgWindow == null) {
/**
* If you whish to popup the incoming message than uncomment
* these lines.
*/
// getMsgWindow();
// ((Textbox)
// getMsgWindow().getFellow("tb")).setValue(getMsg());
MessageBarCtrl.this.btnOpenMsg.setImage("/images/icons/incoming_message1_16x16.gif");
} else {
((Textbox) getMsgWindow().getFellow("tb")).setValue(getMsg());
}
}
});
}
/**
* Automatically called method from zk.
*
* @param event
*/
public void onCreate$winMessageBar(Event event) {
final Grid grid = new Grid();
grid.setHeight("100%");
grid.setWidth("50px");
grid.setParent(this.winMessageBar);
final Columns columns = new Columns();
columns.setSizable(false);
columns.setParent(grid);
// Column for the Message buttons
this.statusBarMessageIndicator = new Column();
this.statusBarMessageIndicator.setWidth("50px");
this.statusBarMessageIndicator.setStyle("background-color: #D6DCDE; padding: 0px");
this.statusBarMessageIndicator.setParent(columns);
Div div = new Div();
div.setStyle("padding: 1px;");
div.setParent(statusBarMessageIndicator);
// open message button
this.btnOpenMsg = new Toolbarbutton();
this.btnOpenMsg.setWidth("20px");
this.btnOpenMsg.setHeight("20px");
this.btnOpenMsg.setImage("/images/icons/message2_16x16.gif");
this.btnOpenMsg.setTooltiptext(Labels.getLabel("common.Message.Open"));
this.btnOpenMsg.setParent(div);
this.btnOpenMsg.addEventListener("onClick", new EventListener() {
@Override
public void onEvent(Event event) throws Exception {
// 1. Reset to normal image
btnOpenMsg.setImage("/images/icons/message2_16x16.gif");
// 2. open the message window
Window win = getMsgWindow();
Textbox t = (Textbox) win.getFellow("tb");
t.setText(getMsg());
// Clients.scrollIntoView(t);
}
});
// send message button
this.btnSendMsg = new Toolbarbutton();
this.btnSendMsg.setWidth("20px");
this.btnSendMsg.setHeight("20px");
this.btnSendMsg.setImage("/images/icons/message1_16x16.gif");
this.btnSendMsg.setTooltiptext(Labels.getLabel("common.Message.Send"));
this.btnSendMsg.setParent(div);
this.btnSendMsg.addEventListener("onClick", new EventListener() {
@Override
public void onEvent(Event event) throws Exception {
// open a box for inserting the message
Window win = (Window) Path.getComponent("/outerIndexWindow");
final String str = InputMessageTextBox.show(win);
EventQueues.lookup("testEventQueue", EventQueues.APPLICATION, true).publish(new Event("onTestEventQueue", null, str));
}
});
}
// +++++++++++++++++++++++++++++++++++++++++++++++++ //
// ++++++++++++++++ Setter/Getter ++++++++++++++++++ //
// +++++++++++++++++++++++++++++++++++++++++++++++++ //
public void setMsg(String msg) {
this.msg = this.msg + "\n" + msg;
}
public String getMsg() {
return msg;
}
public void setMsgWindow(Window msgWindow) {
this.msgWindow = msgWindow;
}
public Window getMsgWindow() {
if (msgWindow == null) {
msgWindow = new Window();
msgWindow.setId("msgWindow");
msgWindow.setTitle("Messages");
msgWindow.setSizable(true);
msgWindow.setClosable(true);
msgWindow.setWidth("400px");
msgWindow.setHeight("250px");
msgWindow.setParent(winMessageBar);
msgWindow.addEventListener("onClose", new EventListener() {
@Override
public void onEvent(Event event) throws Exception {
msgWindow.detach();
msgWindow = null;
}
});
msgWindow.setPosition("bottom, left");
Textbox tb = new Textbox();
tb.setId("tb");
tb.setMultiline(true);
tb.setRows(10);
tb.setReadonly(true);
tb.setHeight("100%");
tb.setWidth("98%");
tb.setParent(msgWindow);
msgWindow.doOverlapped();
}
return msgWindow;
}
}
If you click on the left mail icon a little window comes up and shows all messages that comes in since the user was logged in.

window for showing the messages
After clicking on the right icon there comes a window up for inserting the message text to send.

window for showing the messages
The code for the InputMessageTextBox looks like this:
InputMessageTextBox.java
/**
* This class creates a modal window as a dialog in which the user <br>
* can input some text. By onClosing with <RETURN> or Button <send> this
* InputConfirmBox can return the message as a String value if not empty. <br>
* In this case the returnValue is the same as the inputValue.<br>
*
* @author bbruhns
* @author sgerth
*/
public class InputMessageTextBox extends Window {
private static final long serialVersionUID = 8109634704496621100L;
private static final Logger logger = Logger.getLogger(InputMessageTextBox.class);
private final Textbox textbox;
private String msg = "";
private String userName;
/**
* The Call method.
*
* @param parent
* The parent component
* @param anQuestion
* The question that's to be confirmed.
* @return String from the input textbox.
*/
public static String show(Component parent) {
return new InputMessageTextBox(parent).getMsg();
}
/**
* private constructor. So it can only be created with the static show()
* method.
*
* @param parent
* @param anQuestion
*/
private InputMessageTextBox(Component parent) {
super();
textbox = new Textbox();
setParent(parent);
try {
userName = ((UserImpl) SecurityContextHolder.getContext().getAuthentication().getPrincipal()).getUsername();
} catch (Exception e) {
e.printStackTrace();
}
createBox();
}
private void createBox() {
setWidth("350px");
setHeight("150px");
setTitle(Labels.getLabel("message.Information.PleaseInsertText"));
setId("confBox");
setVisible(true);
setClosable(true);
addEventListener("onOK", new OnCloseListener());
// Hbox hbox = new Hbox();
// hbox.setWidth("100%");
// hbox.setParent(this);
// Checkbox cb = new Checkbox();
// cb.setLabel(Labels.getLabel("common.All"));
// cb.setChecked(true);
Separator sp = new Separator();
sp.setParent(this);
textbox.setWidth("98%");
textbox.setHeight("80px");
textbox.setMultiline(true);
textbox.setRows(5);
textbox.setParent(this);
Separator sp2 = new Separator();
sp2.setBar(true);
sp2.setParent(this);
Button btnSend = new Button();
btnSend.setLabel(Labels.getLabel("common.Send"));
btnSend.setParent(this);
btnSend.addEventListener("onClick", new EventListener() {
@Override
public void onEvent(Event event) throws Exception {
// Check if empty, than do not send
if (StringUtils.isEmpty(StringUtils.trim(textbox.getText()))) {
onClose();
return;
}
msg = msg + ZksampleDateFormat.getDateTimeLongFormater().format(new Date()) + " / " + Labels.getLabel("common.Message.From") + " " + userName + ":" + "\n";
msg = msg + textbox.getText();
msg = msg + "\n" + "_____________________________________________________" + "\n";
onClose();
}
});
try {
doModal();
} catch (SuspendNotAllowedException e) {
logger.fatal("", e);
} catch (InterruptedException e) {
logger.fatal("", e);
}
}
final class OnCloseListener implements EventListener {
@Override
public void onEvent(Event event) throws Exception {
onClose();
}
}
// +++++++++++++++++++++++++++++++++++++++++++++++++ //
// ++++++++++++++++ Setter/Getter ++++++++++++++++++ //
// +++++++++++++++++++++++++++++++++++++++++++++++++ //
public void setMsg(String msg) {
this.msg = msg;
}
public String getMsg() {
return msg;
}
}
It’s now at your hands to implement the logic for sending a message to a selected user or user groups in the InputMessageTextBox and the logic for listening only to the user’s account who is the receiver of the message in the MessageBarCtrl.
Samples are hostet in the Zksample2 project on
Have fun with it.
Stephan Gerth
Dipl.rer.pol.
PS: Help to prevent the global warming by writing cool software