We needed once to have a notification popup like Facebook or Gmail notification to show for a few seconds in the right bottom corner of our GWT application within a liferay portal. A Notification is an info bubble displayed for few seconds in bottom right corner of the screen.
While this component can be found in third-party libraries (based on GWT) such as SmartGWT, GXT, GQuery and Vaadin, using one of those libraries will also add a load of code and resources that we never need. Also using native GWT widget is greater in terms of performance. So as long as customization of GWT widget is possible, we prefer avoiding 3rd party gwt libraries. I talked more about the benefits of using native GWT widget rather than GXT & SmartGWT in this article (in french). And for a comparison between plain GWT widget performance Vs. GXT performance, please check this previous article where it shows how fast are native GWT widget comparing with 3rd party libraries.
First, you need to add a div element in your host HTML or JSP page with id = notification_section. This element will contain the notification bubble (could be created programmatically)
Then create the notification panel that will manage the widget
Now, to display the notification, create your EntryPoint and a Button to display the notification.
Finally, lets define the CSS responsible of displaying the notification in the right down corner. This is the tricky part, and it will explains why I embedded multiple html element to create the stacked right bottom effect.
So lets check the output, the Notify button was centered in the screen for better visibility. For each click, a notification popup will show in the right bottom corner of the screen and multiple notification can be stacked.
While this component can be found in third-party libraries (based on GWT) such as SmartGWT, GXT, GQuery and Vaadin, using one of those libraries will also add a load of code and resources that we never need. Also using native GWT widget is greater in terms of performance. So as long as customization of GWT widget is possible, we prefer avoiding 3rd party gwt libraries. I talked more about the benefits of using native GWT widget rather than GXT & SmartGWT in this article (in french). And for a comparison between plain GWT widget performance Vs. GXT performance, please check this previous article where it shows how fast are native GWT widget comparing with 3rd party libraries.
First, you need to add a div element in your host HTML or JSP page with id = notification_section. This element will contain the notification bubble (could be created programmatically)
Then create the notification panel that will manage the widget
Now, to display the notification, create your EntryPoint and a Button to display the notification.
Finally, lets define the CSS responsible of displaying the notification in the right down corner. This is the tricky part, and it will explains why I embedded multiple html element to create the stacked right bottom effect.
So lets check the output, the Notify button was centered in the screen for better visibility. For each click, a notification popup will show in the right bottom corner of the screen and multiple notification can be stacked.
And what is great in using just plain CSS for layout is that even if you include this screen in a portal, the notification is still gonna be displayed in the portal context and not in the portlet right down corner. I tested it in Liferay and the result was perfect :)
So welcome to any reviews, suggestions and questions. Thank you very much.
So welcome to any reviews, suggestions and questions. Thank you very much.
Goood job thx !!
RépondreSupprimer