Growl-like notification widget

[yanick]

Hi, I believe this widget could be quite needed within Ajax based applications. As a starting point, I coded this in about 20 minutes for a small project we're doing, but it would be nice to have an official one.

public class GrowlPanel extends VLayout {

	static public final int DEFAULT_MESSAGE_DELAY = 30000;
	
	static public final int MESSAGE_WIDTH = 300;
	
	
	static private class GrowlMessage extends Canvas {
		private Label label;
		private Button close;
		private Timer timeout;
		
		public GrowlMessage(String html, int delay) {
			super();
			
			setShowEdges(false);
			setShowShadow(false);
			setMargin(4);
			
			label = new Label(html);
			label.setShowEdges(true);
			label.setEdgeSize(2);
			label.setShowShadow(true);
			label.setShadowDepth(2);
			label.setBackgroundColor("#FFD255");
			label.setOpacity(85);
			label.setAutoHeight();
			label.setWidth100();
			label.setMargin(2);
			label.setPadding(8);
			addChild(label);
			
			close = new Button("X");
			close.setPosition(Positioning.ABSOLUTE);
			close.setLeft( MESSAGE_WIDTH - 32 );
			close.setTop(8);
			close.setWidth(16);
			close.setHeight(16);
			close.addClickHandler(new ClickHandler() {
				@Override
				public void onClick(ClickEvent event) {
					clearMessage();
				}
			});
			close.setVisible(false);
			addChild(close);
			
			initTimeout(delay);
			initHover();
		}
		
		private void initTimeout(int delay) {
			timeout = new Timer() {
				@Override
				public void run() {
					clearMessage();
				}
			};
			timeout.schedule(delay);
		}
		
		private void initHover() {
			addMouseOverHandler(new MouseOverHandler() {
				@Override
				public void onMouseOver(MouseOverEvent event) {
					//close.animateShow(AnimationEffect.FADE);
					close.setVisible(true);
					event.cancel();
				}
			});
			addMouseOutHandler(new MouseOutHandler() {
				@Override
				public void onMouseOut(MouseOutEvent event) {
					//close.animateHide(AnimationEffect.FADE);
					close.setVisible(false);
					event.cancel();
				}
			});
		}
		
		protected void clearMessage() {
			timeout.cancel();
			
			close.removeFromParent();
			close.destroy();
			
			animateFade(0, new AnimationCallback() {
				@Override
				public void execute(boolean earlyFinish) {
					removeFromParent();
					destroy();
				}
			});
		}
	}
	
	
	
	public GrowlPanel() {
		setPosition(Positioning.ABSOLUTE);
        setWidth( MESSAGE_WIDTH );  // default width
        setAutoHeight();  // auto height
        setTop( 6 );
        
        Window.addResizeHandler(new ResizeHandler() {
			@Override
			public void onResize(ResizeEvent event) {
				refreshPosition();
			}
        });
        
        refreshPosition();
	}
	
	private void refreshPosition() {
		setLeft((Window.getClientWidth() - MESSAGE_WIDTH) - 20);
	}

	public void addMessage(String html) {
		addMember(new GrowlMessage(html, DEFAULT_MESSAGE_DELAY));
	}
	
	public void addMessage(String html, int delay) {
		addMember(new GrowlMessage(html, delay));
	}
	
}

As I said, this is a simplistic widget and it works for my needs, but this is to illustrate how fairly easy implementing a Growl-like notification is easy.

[hanifw]

Hi,

I've tried your code, works very well...

However, how do i make it static? e.g. execute the notificationLayout from other files/pages?

Thanks~