How do I modify/ extend a zk button to look like a facebook notification (with numbers in top )

answered 2012-07-01 22:56:43 +0800

elopez
82 ● 1

Trator,
thanks for the suggestion, I tried to use Clients.showNotification() but when I have 2 notification does not work well they overlap each other
see http://zkfiddle.org/sample/l5ehfc/6-ShowNotification-message if you run it , you will see what I mean.

I wanted to use the "top_right" position to overlap the "3" over the right side of the button but I was not able to do it.

Maybe if I could modify the size of the notification popup so it shows only 3 , also I want to be close when the user clicks the button (notification reference).

If you have an example or any help would be highly appreciated.

package jl5ehfc$v3;
import org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends GenericForwardComposer{
       Button btn;
       Button btn1;
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
                Clients.showNotification("23", "info", btn, "middle_right", -1);
               Clients.showNotification("15", "info", btn1, "middle_left", -1);
	}
	public void onClick$btn(Event e) throws InterruptedException{
		Clients.showNotification("5", "error", btn, "before_center", -1);
	}
}

<zk>
  <window border="normal" title="hello" apply="jl5ehfc$v3.TestComposer">
 
  	<div>show notifications!</div>
 
	<button id="btn" style="float:right" label="Notifications" />
        <button id="btn1" style="float:right" label="Updates" />
  </window>
</zk>

answered 2012-07-03 02:54:24 +0800

elopez
82 ● 1

The Idea is to have a button with a number in a red square or circle like the following image
http://interactiondesign3.files.wordpress.com/2011/01/new-notifications1.jpg

answered 2012-07-12 20:32:07 +0800

elopez
82 ● 1

In Ext Js is done by using the badgeText like the following code.

var badgedButton = Ext.create('Ext.Button', {
text: 'Mi boton',
badgeText: '2'
});