Google Web Toolkit (GWT) est une boîte à outils de développement permettant de créer et d'optimiser des applications complexes basées sur un navigateur. GWT est utilisé par de nombreux produits Google, notamment Google AdWords et Orkut.

Voici les caractéristiques de GWT -

• Google Web Toolkit (GWT) est une boîte à outils de développement pour créer une application Internet RICHE (RIA).

• GWT fournit aux développeurs l'option d'écrire une application côté client en JAVA.

• GWT compile le code écrit en JAVA en code JavaScript.

• L'application écrite en GWT est compatible avec tous les navigateurs. GWT génère automatiquement du code javascript adapté à chaque navigateur.

• GWT est open source, entièrement gratuit et utilisé par des milliers de développeurs à travers le monde. Il est sous licence Apache License version 2.0.

Pourquoi devrions-nous utiliser GWT?

Voici les raisons de préférer GWT pour les projets de développement -

• Étant basé sur Java, vous pouvez utiliser des IDE JAVA comme Eclipse pour développer une application GWT. Les développeurs peuvent utiliser le code d'auto-complétion / refactorisation / navigation / gestion de projet et toutes les fonctionnalités des IDE.

• GWT offre une capacité de débogage complète. Les développeurs peuvent déboguer l'application côté client comme une application Java.

• GWT permet une intégration facile avec Junit et Maven.

• Encore une fois basé sur Java, GWT a une faible courbe d'apprentissage pour les développeurs Java.

• GWT génère du code javascript optimisé, produit le code javascript spécifique du navigateur par lui-même.

• GWT fournit une bibliothèque de widgets qui fournit la plupart des tâches requises dans une application.

• GWT est extensible et un widget personnalisé peut être créé pour répondre aux besoins des applications.

• En plus de tout, les applications GWT peuvent fonctionner sur tous les principaux navigateurs et téléphones intelligents, y compris les téléphones / tablettes Android et iOS.

Quels sont les inconvénients de GWT?

Voici les inconvénients de GWT -

• Not indexable − Les pages Web générées par GWT ne seraient pas indexées par les moteurs de recherche car ces applications sont générées dynamiquement.

• Not degradable − Si l'utilisateur de votre application désactive Javascript, l'utilisateur ne verra que la page de base et rien de plus.

• Not designer's friendly − GWT ne convient pas aux concepteurs Web qui préfèrent utiliser du HTML simple avec des espaces réservés pour insérer du contenu dynamique ultérieurement.

Voici les principaux composants de GWT -

• GWT Java to JavaScript compiler −C'est la partie la plus importante de GWT, ce qui en fait un outil puissant pour la création de RIA. Le compilateur GWT est utilisé pour traduire tout le code d'application écrit en Java en JavaScript.

• JRE Emulation library −Google Web Toolkit comprend une bibliothèque qui émule un sous-ensemble de la bibliothèque d'exécution Java. La liste comprend java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util et java.util.logging.

• GWT UI building library − Cette partie de GWT se compose de nombreuses sous-parties qui incluent les composants réels de l'interface utilisateur, la prise en charge de RPC, la gestion de l'historique et bien plus encore.

• GWT Hosted Web Browser − Le navigateur Web hébergé GWT vous permet d'exécuter et d'exécuter vos applications GWT en mode hébergé, où votre code s'exécute en Java dans la machine virtuelle Java sans compilation en JavaScript.

Une application GWT se compose de quatre parties importantes suivantes, dont la dernière partie est facultative mais les trois premières parties sont obligatoires -

• Descripteurs de module

• Ressources publiques

• Code côté client

• Code côté serveur

Un descripteur de module est le fichier de configuration sous forme de XML qui est utilisé pour configurer une application GWT. Une extension de fichier de descripteur de module est * .gwt.xml, où * est le nom de l'application et ce fichier doit résider à la racine du projet.

Cela fournit le nom de l'application.

Cela ajoute un autre module gwt dans l'application, tout comme l'importation le fait dans les applications java. N'importe quel nombre de modules peut être hérité de cette manière.

Ceci spécifie le nom de la classe qui commencera à charger l'application GWT.

Oui! N'importe quel nombre de classes de point d'entrée peut être ajouté.

La fonction onModuleLoad () est appelée et agit de la même manière que la méthode principale d'une application Java.

Ils sont appelés séquentiellement dans l'ordre dans lequel les classes de point d'entrée apparaissent dans le fichier du module. Ainsi, lorsque le onModuleLoad () de votre premier point d'entrée se termine, le point d'entrée suivant est appelé immédiatement.

Ceci spécifie les noms des dossiers source que le compilateur GWT recherchera pour la compilation source.

Le chemin public est l'endroit de votre projet où les ressources statiques référencées par votre module GWT, telles que CSS ou images, sont stockées.

Le chemin public par défaut est le sous-répertoire public sous où le fichier XML du module est stocké.

Injecte automatiquement le fichier JavaScript externe situé à l'emplacement spécifié par src.

Injecte automatiquement le fichier CSS externe situé à l'emplacement spécifié par src.

Un point d'entrée de module est toute classe qui peut être affectée à EntryPoint et qui peut être construite sans paramètres. Lorsqu'un module est chargé, chaque classe de point d'entrée est instanciée et sa méthode EntryPoint.onModuleLoad () est appelée.

Il contient le code javascript requis pour résoudre les configurations de liaison différée (par exemple, la détection du navigateur) et pour utiliser la table de recherche générée par le compilateur GWT pour localiser l'un des .cache.html.

Il contient le programme réel d'une application GWT.

Voici les étapes du processus de démarrage pour l'application GWT lorsqu'un navigateur charge l'application GWT -

• Le navigateur charge la page html hôte et le fichier .nocache.js.

• Le navigateur exécute le code javascript du fichier .nocache.js.

• Le code .nocache.js résout les configurations de liaison différée (par exemple, la détection du navigateur) et utilise la table de recherche générée par le compilateur GWT pour localiser l'un des .cache.html.

• Le code .nocache.js crée ensuite une iframe cachée html, insère cette iframe dans le DOM de la page hôte et charge le fichier .cache.html dans la même iframe.

• .cache.html contient le programme réel d'une application GWT et, une fois chargé dans iframe, affiche l'application GWT dans le navigateur.

Le compilateur GWT génère un fichier .nocache.js à chaque fois avec le même nom chaque fois qu'une application GWT est compilée. Le navigateur doit donc toujours télécharger le fichier .nocache.js pour obtenir la dernière application gwt. Le code gwt.js ajoute en fait un horodatage unique à la fin du nom de fichier afin que le navigateur le traite toujours comme un nouveau fichier et ne doit jamais le mettre en cache.

La ressource publique la plus importante est la page hôte qui est utilisée pour appeler l'application GWT réelle. Une page hôte HTML typique pour une application peut ne pas inclure du tout de contenu de corps HTML visible, mais elle est toujours censée inclure une application GWT via une balise <script ... />.

Par défaut, le nom de classe de chaque composant est gwt- <classname>. Par exemple, le widget Button a un style par défaut de gwt-Button et de la même manière que le widget TextBox a un style par défaut de gwt-TextBox.

Non! Par défaut, ni le navigateur ni GWT ne créent d'attributs d'identifiant par défaut pour les widgets.

Cette méthode effacera tous les styles existants et définira le style du widget sur la nouvelle classe CSS fournie à l'aide de style.

Cette méthode ajoutera un nom de style secondaire ou dépendant au widget. Un nom de style secondaire est un nom de style supplémentaire, donc s'il y avait des noms de style précédents appliqués, ils sont conservés.

Cette méthode supprimera le style donné du widget et laissera tous les autres associés au widget.

Cette méthode obtient tous les noms de style de l'objet, sous forme de liste séparée par des espaces.

Cette méthode définit le nom de style principal de l'objet et met à jour tous les noms de style dépendants.

Par défaut, le nom de style principal d'un widget sera le nom de style par défaut de sa classe de widget. Par exemple, gwt-Button pour les widgets Button. Lorsque nous ajoutons et supprimons des noms de style à l'aide de la méthode AddStyleName (), ces styles sont appelés styles secondaires.

L'apparence finale d'un widget est déterminée par la somme de tous les styles secondaires qui lui sont ajoutés, plus son style principal. Vous définissez le style principal d'un widget avec la méthode setStylePrimaryName (String).

Il existe plusieurs approches pour associer des fichiers CSS à votre module. Les applications GWT modernes utilisent généralement une combinaison de CssResource et UiBinder.

• Utilisation d'une balise <link> dans la page HTML hôte.

• Utilisation de l'élément <stylesheet> dans le fichier XML du module.

• Utilisation d'un CssResource contenu dans un ClientBundle.

• Utilisation d'un élément <ui: style> en ligne dans un modèle UiBinder.

La classe UIObject est la superclasse de tous les objets d'interface utilisateur.

• La classe UIObject est la superclasse de tous les objets d'interface utilisateur. Il enveloppe simplement un élément DOM et ne peut pas recevoir d'événements. Il fournit des classes enfants directes comme Widget, MenuItem, MenuItemSeparator, TreeItem.

• Tous les objets UIObject peuvent être stylisés à l'aide de CSS.

• Chaque UIObject a un nom de style principal qui identifie la règle de style CSS clé qui doit toujours lui être appliquée.

• Un comportement de style plus complexe peut être obtenu en manipulant les noms de style secondaires d'un objet.

La classe Widget est la classe de base pour la majorité des objets d'interface utilisateur. Widget ajoute la prise en charge de la réception d'événements du navigateur et de l'ajout direct aux panneaux.

Ce widget contient du texte, non interprété comme HTML à l'aide d'un élément <div>, ce qui le fait s'afficher avec une disposition de bloc.

Ce widget peut contenir du texte HTML et affiche le contenu html à l'aide d'un élément <div>, ce qui provoque son affichage avec une disposition de bloc.

Ce widget affiche une image à une URL donnée.

Ce widget représente un élément <a> simple.

Le widget Bouton représente un bouton poussoir standard.

PushButton représente un bouton poussoir normal avec un style personnalisé.

Le widget ToggleButton représente un bouton avec état élégant qui permet à l'utilisateur de basculer entre les états haut et bas.

Le widget CheckBox représente un widget de case à cocher standard. Cette classe sert également de classe de base pour RadioButton.

Le widget RadioButton représente un widget de bouton radio de sélection mutuellement exclusif.

Le widget ListBox représente une liste de choix pour l'utilisateur, sous forme de zone de liste ou de liste déroulante.

Le widget SuggestionBox représente une zone de texte ou une zone de texte qui affiche un ensemble préconfiguré de sélections correspondant à l'entrée de l'utilisateur. Chaque suggestBox est associé à un seul suggestOracle. SuggérezOracle est utilisé pour fournir un ensemble de sélections en fonction d'une chaîne de requête spécifique.

Le widget TextBox représente une zone de texte sur une seule ligne.

Le widget PasswordTextBox représente une zone de texte qui masque visuellement son entrée pour empêcher toute écoute clandestine.

Le widget TextArea représente une zone de texte qui permet de saisir plusieurs lignes de texte.

Le widget RichTextArea représente un éditeur de texte riche qui permet un style et une mise en forme complexes.

Le widget FileUpload enveloppe l'élément HTML <input type = 'file'>.

Le widget caché répète un champ caché dans un formulaire HTML.

Le widget d'arbre représente un widget d'arbre hiérarchique standard. L'arborescence contient une hiérarchie de TreeItems que l'utilisateur peut ouvrir, fermer et sélectionner.

Le widget MenuBar représente un widget de barre de menu standard. Une barre de menus peut contenir n'importe quel nombre d'éléments de menu, dont chacun peut soit déclencher une commande, soit ouvrir une barre de menus en cascade.

Le widget DatePicker représente un sélecteur de date GWT standard.

Le widget CellTree représente une vue d'un arbre. Ce widget ne fonctionnera qu'en mode standard, ce qui nécessite que la page HTML dans laquelle il est exécuté ait une déclaration <! DOCTYPE> explicite.

Le widget CellList représente une seule colonne de liste de cellules.

Le widget CellTable représente une vue tabulaire qui prend en charge la pagination et les colonnes.

Le widget CellBrowser représente une vue navigable d'un arbre dans lequel un seul nœud par niveau peut être ouvert à la fois. Ce widget ne fonctionnera qu'en mode standard, ce qui nécessite que la page HTML dans laquelle il est exécuté ait une déclaration <! DOCTYPE> explicite.

Les panneaux de disposition peuvent contenir d'autres widgets. Ces panneaux contrôlent la manière dont les widgets doivent être affichés sur l'interface utilisateur. Chaque widget Panel hérite des propriétés de la classe Panel qui à son tour hérite des propriétés de la classe Widget et qui à son tour hérite des propriétés de la classe UIObject.

Panel est la classe de base abstraite de tous les panneaux, qui sont des widgets pouvant contenir d'autres widgets.

Le widget FlowPanel représente un panneau qui met en forme ses widgets enfants en utilisant le comportement de mise en page HTML par défaut.

Le widget HorizontalPanel représente un panneau qui dispose tous ses widgets dans une seule colonne horizontale.

Le widget VerticalPanel représente un panneau qui dispose tous ses widgets dans une seule colonne verticale.

Le widget HorizontalSplitPanel représente un panneau qui organise deux widgets sur une seule ligne horizontale et permet à l'utilisateur de modifier de manière interactive la proportion de la largeur dédiée à chacun des deux widgets. Les widgets contenus dans un HorizontalSplitPanel seront automatiquement décorés avec des barres de défilement si nécessaire.

Le widget VerticalSplitPanel représente un panneau A qui organise deux widgets dans une seule colonne verticale et permet à l'utilisateur de modifier de manière interactive la proportion de la hauteur dédiée à chacun des deux widgets. Les widgets contenus dans un VertialSplitPanel seront automatiquement décorés avec des barres de défilement si nécessaire.

Le widget FlexTable représente un tableau flexible qui crée des cellules à la demande. Il peut être irrégulier (c'est-à-dire que chaque ligne peut contenir un nombre différent de cellules) et des cellules individuelles peuvent être définies pour s'étendre sur plusieurs lignes ou colonnes.

Le widget Grille représente une grille rectangulaire qui peut contenir du texte, du html ou un widget enfant dans ses cellules. Il doit être redimensionné explicitement au nombre souhaité de lignes et de colonnes.

DeckPanel est un panneau qui affiche tous ses widgets enfants dans un «deck», où un seul peut être visible à la fois. Il est utilisé par TabPanel.

Ce widget représente un panneau qui place ses widgets enfants «ancrés» sur ses bords extérieurs, et permet à son dernier widget de prendre l'espace restant en son centre.

Ce widget représente un panneau contenant du HTML et qui peut attacher des widgets enfants à des éléments identifiés dans ce HTML.

Ce widget représente un panneau qui représente un ensemble de pages à onglets, chacune contenant un autre widget. Ses widgets enfants s'affichent lorsque l'utilisateur sélectionne les différents onglets qui leur sont associés. Les onglets peuvent contenir du HTML arbitraire.

Ce widget représente un type de widget qui peut envelopper un autre widget, masquant les méthodes du widget enveloppé. Lorsqu'il est ajouté à un panneau, un composite se comporte exactement comme si le widget qu'il enveloppe avait été ajouté.

SimplePanel est la classe de base pour les panneaux contenant un seul widget.

Le widget ScrollPanel représente un panneau simple qui enveloppe son contenu dans une zone de défilement.

Le widget FocusPanel représente un panneau simple qui rend son contenu focalisable et ajoute la possibilité de capturer les événements de la souris et du clavier.

Ce widget représente un panneau qui encapsule son contenu dans un élément HTML <FORM>.

Ce widget représente un panneau qui peut apparaître sur d'autres widgets. Il recouvre la zone client du navigateur (et toutes les fenêtres contextuelles créées précédemment).

Ce widget représente une forme de popup qui a une zone de légende en haut et peut être déplacé par l'utilisateur. Contrairement à un PopupPanel, les appels à PopupPanel.setWidth (String) et PopupPanel.setHeight (String) définiront la largeur et la hauteur de la boîte de dialogue elle-même, même si un widget n'a pas encore été ajouté.

GWT fournit un modèle de gestionnaire d'événements similaire aux frameworks d'interface utilisateur Java AWT ou SWING.

Une interface d'écoute définit une ou plusieurs méthodes que le widget appelle pour annoncer un événement. GWT fournit une liste d'interfaces correspondant à divers événements possibles.

Une classe souhaitant recevoir des événements d'un type particulier implémente l'interface de gestionnaire associée, puis passe une référence à elle-même au widget pour s'abonner à un ensemble d'événements.

Par exemple, la classe Button publie des événements de clic, vous devrez donc écrire une classe pour implémenter ClickHandler pour gérer l'événement de clic.

Tous les gestionnaires d'événements GWT ont été étendus à partir de l'interface EventHandler et chaque gestionnaire n'a qu'une seule méthode avec un seul argument. Cet argument est toujours un objet de type événement associé. Chaque objet événement a un certain nombre de méthodes pour manipuler l'objet événement passé.

GWT propose trois façons de créer des éléments d'interface utilisateur personnalisés. Il y a trois stratégies générales à suivre -

• Create a widget by extending Composite Class −C'est le moyen le plus courant et le plus simple de créer des widgets personnalisés. Ici, vous pouvez utiliser des widgets existants pour créer une vue composite avec des propriétés personnalisées.

• Create a widget using GWT DOM API in JAVA −Les widgets de base GWT sont créés de cette manière. C'est toujours un moyen très compliqué de créer un widget personnalisé et doit être utilisé avec prudence.

• Use JavaScript and wrap it in a widget using JSNI −Cela ne devrait généralement être fait qu'en dernier recours. Compte tenu des implications inter-navigateurs des méthodes natives, cela devient très compliqué et devient également plus difficile à déboguer.

• UiBinder est un framework conçu pour séparer la fonctionnalité et la vue de l'interface utilisateur.

• Le framework UiBinder permet aux développeurs de créer des applications gwt sous forme de pages HTML avec des widgets GWT configurés dans leur ensemble.

• Le framework UiBinder facilite la collaboration avec les concepteurs d'interface utilisateur qui sont plus à l'aise avec XML, HTML et CSS qu'avec le code source Java.

• UIBinder fournit une manière déclarative de définir l'interface utilisateur.

• UIBinder sépare la logique de programmation de l'interface utilisateur.

• UIBinder est similaire à ce que JSP est aux servlets.

• RPC, Remote Procedure Call est le mécanisme utilisé par GWT dans lequel le code client peut exécuter directement les méthodes côté serveur.

• GWT RPC est basé sur un servlet.

• GWT RPC est asynchrone et le client n'est jamais bloqué pendant la communication.

• En utilisant GWT RPC, les objets Java peuvent être envoyés directement entre le client et le serveur (qui sont automatiquement sérialisés par le framework GWT).

• Le servlet côté serveur est appelé service.

• L'appel de procédure à distance qui appelle des méthodes de servlets côté serveur à partir du code côté client est appelé appel d'un service.

Voici les trois composants utilisés dans le mécanisme de communication GWT RPC -

• Un service distant (servlet côté serveur) qui s'exécute sur le serveur.

• Code client pour appeler ce service.

• Objets de données Java qui seront transmis entre le client et le serveur.

• Le client et le serveur GWT sérialisent et désérialisent automatiquement les données afin que les développeurs ne soient pas obligés de sérialiser / désérialiser les objets et les objets de données peuvent voyager via HTTP.

Un objet de données java doit implémenter l'interface isSerializable afin qu'il puisse être transféré sur le fil dans GWT RPC.

L'internationalisation est un moyen d'afficher des informations spécifiques aux paramètres régionaux sur un site Web. Par exemple, afficher le contenu d'un site Web en anglais aux États-Unis et en danois en France.

GWT propose trois façons d'internationaliser une application GWT -

• Internationalisation de chaînes statiques.

• Internationalisation dynamique des chaînes.

• Interface localisable.

Cette technique est la plus répandue et nécessite très peu de frais généraux lors de l'exécution; est une technique très efficace pour traduire à la fois des chaînes constantes et paramétrées; la plus simple à implémenter. L'internationalisation de chaînes statiques utilise des fichiers de propriétés Java standard pour stocker les chaînes traduites et les messages paramétrés, et des interfaces Java fortement typées sont créées pour récupérer leurs valeurs.

Cette technique est très flexible mais plus lente que l'internationalisation de chaînes statiques. La page hôte contient les chaînes localisées, par conséquent, les applications ne sont pas obligées d'être recompilées lorsque nous ajoutons une nouvelle locale. Si l'application GWT doit être intégrée à un système de localisation côté serveur existant, cette technique doit être utilisée.

Cette technique est la plus puissante des trois techniques. La mise en œuvre de Localizable nous permet de créer des versions localisées de types personnalisés. C'est une technique d'internationalisation avancée.

balise extend-property avec un nom d'attribut défini comme locale et des valeurs comme locale spécifique à la langue, par exemple de pour la langue allemande.

Afin d'utiliser la prise en charge de l'historique GWT, nous devons d'abord intégrer l'iframe suivant dans notre page HTML hôte.

<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

Le framework de journalisation émule java.util.logging, il utilise donc la même syntaxe et a le même comportement que le code de journalisation côté serveur.

La journalisation GWT est configurée à l'aide de fichiers .gwt.xml.

Nous pouvons configurer la journalisation pour qu'elle soit activée / désactivée; nous pouvons activer / désactiver des gestionnaires particuliers et modifier le niveau de journalisation par défaut.

SystemLogHandler se connecte à stdout et ces messages ne peuvent être vus qu'en mode développement dans la fenêtre DevMode.

DevelopmentModeLogHandler enregistre en appelant la méthode GWT.log. Ces messages ne peuvent être vus qu'en mode développement dans la fenêtre DevMode.

ConsoleLogHandler se connecte à la console javascript, qui est utilisée par Firebug Lite (pour IE), Safari et Chrome.

FirebugLogHandler se connecte à la console Firebug.

PopupLogHandler se connecte à la fenêtre contextuelle qui réside dans le coin supérieur gauche de l'application lorsque ce gestionnaire est activé.

Ce gestionnaire envoie des messages de journal au serveur, où ils seront journalisés à l'aide du mécanisme de journalisation côté serveur.