PDA

View Full Version : Ext.ux.Notification for GXT GWT



Alejandro.Casagrande
4 Aug 2011, 9:32 AM
This is a conversion of the Ext.ux.Notification plugin (http://www.sencha.com/forum/showthread.php?32365-Ext.ux.Notification) to use with GWT, using the GXT components.

Any improvement or suggestion is welcome.

GXT Rocks!


package com.extjs.gxt.ui.client.plugins.notification;

/**
* NotificationWindow is translation of Ext.ux.ToastWindow
*
* @author Edouard Fattal
* @date March 14, 2008
*
* @class Ext.ux.ToastWindow
* @extends Ext.Window
*
*********************************************************************
*
* NotificationWindow
*
* @author Alejandro Casagrande - Advenio Software
* @company Advenio Software
* @website http://www.advenio.com.ar
* @date August 4, 2011
*
* @class com.extjs.gxt.ui.client.plugins.notification.NotificationWindow
* @extends com.extjs.gxt.ui.client.widget.Window
*
*/


import java.util.ArrayList;


import com.extjs.gxt.ui.client.Style.Direction;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.fx.FxConfig;
import com.extjs.gxt.ui.client.util.DelayedTask;
import com.extjs.gxt.ui.client.util.IconHelper;
import com.extjs.gxt.ui.client.widget.Html;
import com.extjs.gxt.ui.client.widget.Window;


public class NotificationWindow extends Window{


protected static ArrayList<Integer> positions = new ArrayList<Integer>();

protected DelayedTask task = null;
protected boolean autoDestroy = false;
protected int hideDelay = 5000;
protected int position = 0;
protected com.google.gwt.user.client.Element document;
protected String message;
protected String iconCls;
protected Listener<BaseEvent> clickListener;

public int getHideDelay() {
return hideDelay;
}


public void setHideDelay(int hideDelay) {
this.hideDelay = hideDelay;
}


public NotificationWindow(boolean autoDestroy,com.google.gwt.user.client.Element document,String iconCls){
super();
this.setWidth(200);
this.document = document;
this.setAutoHeight(true);
this.setPlain(false);
this.iconCls = iconCls;
this.setDraggable(false);
this.setBodyStyle("text-align:center");
this.autoDestroy = autoDestroy;
this.setResizable(false);
this.setStyleName("x-notification");
if (autoDestroy){
this.setClosable(false);
task = new DelayedTask(new Listener<BaseEvent>() {
@Override
public void handleEvent(BaseEvent be) {
animOnhide();
}
});

clickListener = new Listener<BaseEvent>() {

@Override
public void handleEvent(BaseEvent be) {
removeListener(Events.OnMouseDown, clickListener);
cancelHiding();
}
};
this.addListener(Events.OnMouseDown, clickListener);

}else{
this.setClosable(true);
}

if (iconCls!=null){
this.setIcon(IconHelper.createStyle(iconCls));
}
}

public void setMessage(String message){
this.message = message;
}

protected void cancelHiding(){
setClosable(true);
initTools();
this.addStyleName("fixed");
if(this.autoDestroy) {
this.task.cancel();
}
}


@Override
protected void afterShow() {
super.afterShow();

if(this.autoDestroy) {
this.task.delay(this.hideDelay);
}

Html html = new Html(message);
this.body.update(html.getHtml());

animShow();

}

protected void animOnhide(){
FxConfig fxConfig = FxConfig.NONE;
fxConfig.setDuration(1000);
el().slideOut(Direction.DOWN, fxConfig);
el().fadeOut(fxConfig);
focusable = false;
if (positions.indexOf(this.position)!=-1){
positions.remove(positions.indexOf(this.position));
this.position=-1;
}
}

@Override
protected void onHide() {
if (positions.indexOf(this.position)!=-1){
positions.remove(positions.indexOf(this.position));
this.position=-1;
}
super.onHide();
}

protected void animShow(){
this.position = 0;

while (positions.indexOf(position)>-1){
position++;
}
positions.add(position);

this.setSize(200,100);

int[] offsets = new int[2];
offsets[0] = -20;
offsets[1] = -20-((this.getSize().height+10)*this.position);
this.el().alignTo(document, "br-br", offsets);

FxConfig cfg = FxConfig.NONE;
cfg.setDuration(1);
el().slideIn(Direction.UP, cfg);
}
}

vtysh
4 Aug 2011, 11:46 PM
Isn't it very similar to Info.display?

Alejandro.Casagrande
5 Aug 2011, 3:22 AM
Yes, it is an improvement of Info.display. Also allows to close the popup, add an icon, and prevent the window to disappear if the user wants to keep it open.

Check the demo of the original extjs plugin.

Regards