Overlapped window like Clients.showNotifiation()

asked 2014-12-05 21:43:44 +0800

cotupha gravatar image cotupha
23 5

updated 2014-12-05 21:44:56 +0800

Hello! I wanted to use the Clients.showNotification() method to show a band on the bottom of the screen to show a notification for our users. The problem is, when the user closes the notification, I have to save a cookie (just to know that the user read what we are showing). As I couldn't find a way to make that happen, I decided to change the approach and use an overlapped window and change its onClose method to save the cookie I want to save; it works, but the window looks awful (I want a non-disruptive notification). So here are my questions:

  1. Is there a way to save a cookie when a notification (Clients.showNotification()) is closed?
  2. If (1) is not possible, how can I tweak an overlapped window to look like a beautiful and light notification box?


delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2014-12-06 15:47:16 +0800

cotupha gravatar image cotupha
23 5

Well, I finally found a way to do it. I am not sure that my technique is the best way to achieve this, so any comments are welcome.

My second approach was also wrong: using a Window component was not the way to go. After taking a look at the code generated by zk when using the Clients.showNotification() method, I came up with this:

<div apply="my.Composer" height="100%" width="100%" align="center">
    <vlayout id="mainLayout" height="100%" width="100%" style="overflow: auto" spacing="0px">
    <div id="notification" style="position:fixed; bottom:0; padding:0; color:black" align="center" left="${zk.mobile > 0 ? '0' : '15%'}" width="${zk.mobile > 0 ? '100%' : '70%'}" zclass="z-tabbox">
        <h:i class="z-notification-icon z-icon-info-circle">
        <div width="auto" style="padding: 15px 18px 15px 45px;">
            <label style="font-size:15px; font-weight:bold; color: black;" value="Text in the notification"/>
        <div zclass="z-notification-close" id="closeNotification">
            <h:i class="z-notification-icon z-icon-times">

And in the doAfterCompose() method of the composer, add this for showing the new div only if the cookie "theCookie" was not found:

notification.setVisible(CookieManager.searchCookies(request.getCookies(), "theCookie") == null);//Utility method that searches for a cookie
closeNotification.addEventListener(Events.ON_CLICK, new EventListener<Event>() {
        public void onEvent(Event event) throws Exception {
            HttpServletResponse response = (HttpServletResponse) Executions.getCurrent().getNativeResponse();
            response.addCookie(new CookieManager.PersistentCookie("theCookie");//Utility method that saves the cookie
link publish delete flag offensive edit


Is this a single-page application? Means index.zul with i.e. a borderlayout where the content is changed in the center area. Take the time a create a custom notification window component that can be shown in the bottom of the page. Or a custom notification div component with all the stuff in it.

terrytornado ( 2014-12-06 21:32:07 +0800 )edit

The other way is to give your overlapped window a new CSS style. Which ZK version do you use?

terrytornado ( 2014-12-06 21:40:50 +0800 )edit

HI @terrytornado, I am using ZK 7.0.1. One of the problems I faced when creating my custom window component was the fact that I could not get rid of the window decoration and I did not know how to change the "close" icon, that is why I used the div approach.

cotupha ( 2014-12-08 14:32:12 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2014-12-05 21:43:44 +0800

Seen: 23 times

Last updated: Dec 06 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More