Multiple Suggest Box with GWT

When we was creating user interface in GWT, we needed some text fields that suggest word completion to the user based on previously filled list or from database.
This feature is called SuggestBox and is already implemented in GWT. Otherwise, it is limited to only one suggestion and its user interface is very poor comparing to commonly used suggest box like Facebook search panel or Gmail destination address.

Therefore we designed a custom suggest box in GWT that allows user to type words, select a suggestion and continue with other words. It also allows the user to delete previously selected suggestions using the x button or by selecting the suggestion and deleting it.

Custom Notification Popup in GWT and Liferay

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.

Comparaison entre les performances des composants GWT vs GXT

Voici un comparatif que j'ai intégrer dans cet article qui mesure la différence de performance entre GWT et GXT et la rapidité d'affichage..

Le test a été créer par Dustin Mallory avec un projet GAE. En essayant les différents widgets GWT et GXT, on voit bien que les composants natives GWT sont beaucoup plus rapides que ceux de GXT. La librairie GXT ajoute plusieurs styles CSS, ressources et code JS ce qui alourdit le chargement des composants.

Idem pour le SmartGWT, son utilisation s'avère beaucoup plus lourde que GXT. Le SmartGWT est un JSNI wrapper de la librairie Javascript SmartClient. Ce qui le rend donc plus lent, lourd à charger et plus difficile à étendre que GXT qui est une vrai surcouche à GWT

Ecran modal GWT avec un bouton Fermer

Après avoir travailler pour longtemps avec des librairies GWT tierces (GXT, SmartGWT, GQuery..), revenir vers les composant natives GWT était très difficile au départ. Les composants présents dans les librairies tierces étaient beaucoup plus riches avec plus de fonctionnalités. Même les widgets basiques manquaient de styles et de Look&Feel.

Mais en utilisant les composants natives GWT, en remarque rapidement la facilité d'enrichir et d'étendre ses widgets, la légèreté et la rapidité d'exécution en comparaison avec SmartGWT par exemple. J'ai parlé de ça dans cet article avec une comparaison entre la vitesse de chargement des composants GWT et GXT, mais ça reste aussi valide pour le SmartGWT qui est un JSNI wrapper de la librairie Javascript SmartClient vers GWT donc plus lent, lourd à charger et plus difficile à étendre que GXT qui est une vrai surcouche à GWT

On a construit alors une bibliothèque plus riche et complète de Widget en se basant seulement sur les composants natives GWT. Parmi ces widget à ajouter, le DialogBox ou PopupPanel avec un bouton Fermer

Le composant GWT native DialogBox n'affiche pas un bouton Fermer X dans la fenêtre modale. il fallait donc appuyer sur Echap pour masquer la boite de dialogue.

Pour ajouter ce bouton, il faut étendre la classe DialogBox pour changer son header en appelant getCellElement(0,1) et le remplacer avec un HorizontalPanel qui va contenir le bouton Fermer :