GWT balloon widget

What is Balloon widget

It is a simple widget which shows up with some information for the user. Its appearance is proceeded by some user action, like filling a form or choosing some option from the menu. It can e.g. look like this:

balloon example

How to implement Balloon in GWT

This is very simple widget with functionality similar to the PopupPanel. It should just show up with some info and optionally hide after some time. To create it I will use com.google.gwt.user.client.ui.PopupPaneland com.google.gwt.animation.client.Animation.   Let’s take a look on the code:

public class SimpleBaloonPanel extends PopupPanel {

        // decides if balloon should hide after some time or not
	private boolean shouldHide = true;

        // how long will take the balloon to show up
	private final int DURATION = 1200;

       // how long the balloon will be visible - used only if shouldHide==true
	private final  int HIDE_DELAY  = 4000;

	public SimpleBaloonPanel(String baloonText, boolean shouldHide) {
		super(true);
		this.shouldHide = shouldHide;
		setAutoHideEnabled(true);
		setAnimationEnabled(true);
		addStyleName("baloonPanel");
                // some sample widget will be content of the balloon
		HTML text = new HTML(baloonText);
		setWidget(text);
	}

	@Override
	public void show() {
		BaloonAnimation showBaloon = new BaloonAnimation();
		showBaloon.run(DURATION);
		super.show();

		if (shouldHide)
		{
			BaloonAnimation hideAnim = new BaloonAnimation(false);
                        // run hide animation after some time
			hideAnim.run(DURATION, Duration.currentTimeMillis() + HIDE_DELAY);
                        // after animation wil end, the balloon must be also hidden and deteached from the page
			Timer t = new Timer() {
				@Override
				public void run() {
					SimpleBaloonPanel.this.hide();
				}
			};
			t.schedule(HIDE_DELAY + DURATION);
		}
	}
       /** animation which will change opacity of the balloon depending on the show value
       * if it will be false: balloon will start to disappear
       * if it will be true: balloon will start to appear
       */
 	class BaloonAnimation extends Animation {
		boolean show = true;

		BaloonAnimation(boolean show) {
			super();
			this.show = show;
		}

		public BaloonAnimation() {
			this(true);
		}

		@Override
		protected void onUpdate(double progress) {
			double opacityValue = progress;
			if (!show) {
				opacityValue = 1.0 - progress;
			}
			SimpleBaloonPanel.this.getElement().getStyle().setOpacity(
					opacityValue);
		}
	}
}

To show the balloon we use this class in the same way as PopupPanel so we call show()  or showRelativeTo(UIObject) method.

In this example we have used PopupPanel as a container for our content. We have also used the build in resize-animation functionality by calling

setAnimationEnabled(true);

method.  Besides we have created our own “appear-disappear” animation: BaloonAnimation – which changes  slowly the opacity of our balloon. ( More about how to use Animation you can find in my another post: How to use GWT Animation ).

It is very easy to set any content you need. Just instead of creating simple label :

HTML text = new HTML(baloonText);

you need to create your own widget.. which could be text + info image OR text + some small link to another functionality. After using some CSS3 gradient functions and  applying some better looking style like :

.baloonPanel {
    padding:5px;
    border:solid;
    border-width:2px;
    border-color:rgb(200,210,240);
    border-radius: 15px;
    -moz-border-radius: 15px;
    opacity: 0.0;
    background-color:rgb(220,230,254);
    color:black;

    background: -webkit-gradient(linear, left top, left bottom, from(rgb(225,240,254)), to(rgb(200,220,244)));
    background: -moz-linear-gradient(top,  rgb(244, 244, 254),  rgb(230, 230, 245));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(225,240,254)', endColorstr='rgb(200,220,244)');
}

we can have such a simple balloon like the one in the demo shown here: http://blog-demo.appspot.com/#simpleBalloon

Usability talk

While designing rich web applications we have a lot of different possibilities to “speak” with end user. We should inform him as much as we can to help him make fast and correct decisions. There are many ways to show useful information: popups, status changes, tool-tips, rich explanations. Of course we should benefit of all sides which modern browsers can offer  as well as dynamic information which appears only if needed. One of widgets which follows user actions on the page is Balloon widget. It can appear in some common place in the page e.g. always in left corner. But in my opinion the most functional Balloon will appear exactly in the place where last action was taken, or where action should be taken. For example showing user that he needs to fill out another input of a form or he forgot to check an answer from question form. In this way user will get precise information what and where he should do.

Links

http://gradients.glrzad.com/

http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/index.html?overview-summary.html

Advertisements

4 Responses to GWT balloon widget

  1. Govind says:

    Very useful article.. Thanks

  2. Dzoni says:

    great!!!

  3. Pingback: Confluence: Kuali Rice

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: