GWT – Gmail like notifications

Notifications are always an integral part of our websites. If paid a little attention to, they can not only add to the beauty of our website (or any application for that matter) but can really make it look very professional.

With this in mind we are going to develop our own Notification widget which looks which will allow you to put very nice-looking Gmail like notifications to your own website.

We will use a PopupPanel to show our notification and a Grid to render the message. We will also use some CSS to make it look like Gmail. Though, you should style them to suit the look & feel of your own website.

Step 1: Create a UiBinder Template – Notification.ui.xml

 

Step 2: Create the owning  Java class – Notification.java

Before we look into the complete source file lets try to understand the main parts of the code.

 

This is pretty simple. This is how you instantiate any object in java. We have just created a Grid with 1 row and 2 columns.

The only Object worth noting here is PositionCallback. The JavaDoc is worth reading too.

There is a problem with this code so far, though. The notification once shown will never disappear, which is not right. Once the user is provided with the required information the notification should go away or the user should be able to git rid of it.

Take a look at another version of show().

Full Source File: 

Step 3: Add notifications to your app

In the previous post, we created a Dumb details form. Let’s add the Notifications to that. You can try in own application too.

 

Full Source

 

Now, run the application, you will the details form from the previous post with an additional button labelled Notifier. On clicking the Notifier button you should see the Notification.


Easy peasy, isn’t it!!??

Now we can decorate it a bit. You can give your creativity a try or you can add the sample style I am going to use.

In our Notification.ui.xml, we will add the style tag with a couple of styles. This is how our style block looks like:

 

We will add .container style to our PopupPanel which acts as the container for our notification using styleName=“statusContainer”:

 

 

Full Source  

 

The other two style i.e, .status & .statusText will be used in our java code:

We need to apply them to our Grid like this:

Full Source 

 

Run the application again and you should see the notification that looks pretty professional and can be used in your own project without more than 10 minutes of effort.

Exercises:
1.
Can you move the notification a bit upwards, in the same position where we were showing un-styled notification?
2. Update the code to let user close the notification. You can provide a close button or cross image in the notification, which, onClick closes the notification. Let’s see if you can do that 🙂

 

Let me know how it goes in the comments section.
Have a great day!!