GWT V 1.0 / 2008 - May. Plan Informations – Slides 3 - 7 Widgets GWT – Slides 8 – 11 RPC / JNSI - Slides 12 - 16 Plugins – Slides 17 - 19 Bibliothèques.

Présentation au sujet: "GWT V 1.0 / 2008 - May. Plan Informations – Slides 3 - 7 Widgets GWT – Slides 8 – 11 RPC / JNSI - Slides 12 - 16 Plugins – Slides 17 - 19 Bibliothèques."— Transcription de la présentation:

1 GWT V 1.0 / 2008 - May

2 Plan Informations – Slides 3 - 7 Widgets GWT – Slides 8 – 11 RPC / JNSI - Slides 12 - 16 Plugins – Slides 17 - 19 Bibliothèques de Widgets – Slides 20 - 23 Informations complémentaires – Slides 24 - 31

3 3 Pourquoi GWT ? GWT a été créé pour permettre à des développeurs java de créer des clients légers en AJAX sans toucher à javascript. Historique : 2006 : Première version de GWT (1,0). 2007 : La version 1.4 perd le tag « beta » et est considérée comme stable. 2008 : Version 1.5 RC1 GWT est un projet open source sous licence Apache 2.0 Il est multi-plateforme.

4 4 Informations La dernière version stable est la 1.4.62 GWT compatibilité java : Coté client le code java est transformé en JavaScript et doit être en Java 1.4 au plus Côté serveur le code java peut être en 1.6 tant que les réponses au client utilisent des Objets 1.4 compilable en JS : listeliste Le port par défaut du tomcat embarqué est le 8888 Télécharger GWT : http://code.google.com/webtoolkit/download.html

5 5 GWT : Support de java Les types de base de Java sont supportés, néanmoins Google précise qu'il est préférable d'employer des int plutôt que des long. La gestion des Exception est supportée, mis à part Throwable.getStackTrace() qui ne l'est pas en web mode. Le compilateur parse les assertions, mais ne génère pas de code JavaScript pour celles-ci. Le multithreading et la synchronisation ne sont pas disponibles. Les interpréteurs Javascript sont Monothread. Et si le compilateur de GWT laisse passer l'instruction synchronized, les méthodes de synchronisation ne sont pas disponibles. La réflexion n'est pas disponible dans son ensemble, pour des questions d'optimisation du JS généré. Il est néanmoins possible de récupéré un objet par sa classe en utilisant GWT.getTypeName(Object). La finalisation n'est pas supporté. L'instruction strictfp n'est pas supporté. Description complète des classes supportées

6 GWT : Gwt gère la plupart des incompatibilités de navigateurs. Gwt Supporte linternationalisation Infos Gwt supporte ant Maven et des tests unitaires On peut aisément ajouter des fonctions développées sous GWT à des sites web existants.

7 GWT : Principe de fonctionnement Code Java (1.4) Code JavaScript Compilateur GWT Client Serveur Code Java (1.6) Services existants RPC

8 GWT : Principe de fonctionnement.java Java 1.4 max package x.client.java Implémentations des Services Java 1.4, 1.5, 1.6 package x.server Interfaces des services. 1.4 max package x.client Aspect Développement RequêteRéponse Compilateur GWT.js Aspect Production Client Serveur Interfaces HTTP Requête Réponse Implémentation Services externes

9 Widgets GWT TextArea - javadocjavadocPasswordTextBox - javadoc javadoc ListBox javadoc HyperLink javadoc TextBox - javadocjavadocCheckBox - javadocjavadoc ToggleButton javadoc PushButton javadoc RadioButton - javadocjavadocButton - javadocjavadoc

10 Widgets GWT PopupPanel javadoc DialogBox javadoc TabBar javadoc Table javadoc Tree javadoc MenuBar javadoc

11 Widgets GWT HorizontalSplitPanel javadoc VerticalSplitPanel javadoc FlowPanel javadoc VerticalPanel javadoc HorizontalPanel javadoc StackPanel javadoc

12 Widgets GWT SuggestBox javadoc DisclosurePanel javadoc RichTextArea javadoc TabPanel javadoc DockPanel javadoc

13 GWT : Remote Procedure Calls Utiliser le RPC de google revient à faire un appel asynchrone en AJAX. Mais puisque nous travaillons en java, GWT passe par deux interfaces et une classe dimplémentation pour faire son appel. Les types de retour doivent être compilable en JS Lien : Description complète des classes supportéesDescription complète des classes supportées Concrètement les différents plugins GWT, permettent de simplifier lutilisation du RPC Génération automatique des Classes Générations automatiques des méthodes Ajout dune classe « Util » à linterface MyService pour simplifier lappel (GWT Designer)

14 GWT : RPC

15 GWT : RPC – Création du service MyService (Interface) public interface MyService extends RemoteService { public String myMethod(String s); } MyServiceAsycn (Interface) interface MyServiceAsync { public void myMethod(String s, AsyncCallback callback); } MyServiceImpl (Classe) public class MyServiceImpl extends RemoteServiceServlet implements MyService { public String myMethod(String s) { // Do something interesting with 's' here on the server. return s; }

16 GWT : RPC – Appel du service // (1) Create the client proxy. MyServiceAsync myService = (MyServiceAsync) GWT.create(MyService.class); // (2) Specify the URL at which our service implementation is running. ServiceDefTarget endpoint = (ServiceDefTarget) myService; String moduleRelativeURL = GWT.getModuleBaseURL() + "email"; endpoint.setServiceEntryPoint(moduleRelativeURL); // (3) Create an asynchronous callback to handle the result. AsyncCallback callback = new AsyncCallback() { public void onSuccess(Object result) { // do some UI stuff to show success } public void onFailure(Throwable caught) { // do some UI stuff to show failure } }; // (4) Make the call. myService.myMethod(s, callback); }

17 17 GWT : JSNI (JavaScript Native Interface) Le compilateur de GWT transforme le code java en javascript. Mais il est parfois nécessaire d'insérer du code javascript dans le java. C'est pourquoi GWT propose JNSI, basé sur JNI on déclare les méthodes où sont insérées les portions de code js comme native puis on commente le code javascript. $wnd et $doc représentent les objets JavaScript window et document Exemple : public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/; Source

18 Informations diverses Les servlets, Service GWT, Fichiers js, EntryPoint, fichiers css, et autres sont mappés dans le fichier src/…package…/nomModule.gwt.xml Pour utiliser la fonction refresh avec GWT-Ext Dans le fichier public/nomModule.html déplacer la ligne Sous la balise fermante Pour insérer du GWT à un endroit spécifique de la page créez une div par exemple Puis dans les sources GWT RootPanel.get(« ici »).add(votreGwtAInserer);

19 19 Plugins Eclipse Cypal Studio GWT Designer (Instantiation) Netbeans GWT4NB : Tuto : https://gwt4nb.dev.java.net/manual/tutorials/AnagramDemo/gwt 4nbDemo.htm

20 Plugins - Cypal Studio for GWT Cypal Studio for GWT : http://www.cypal.in/studio http://www.cypal.in/studio Est un plugin eclipse open-source. Ses fonctionnalités sont limitées et le GWT designer propose un panel similaire. Créer un module Créer un remote service Maintenir le fichier Async Lancer lapplication en hosted mode Compiler lapplication en JavaScript Déployer sur un serveur extérieur Exporter comme WAR

21 Plugins – GWT Designer GWT Designer (Instantiations) : http://www.instantiations.com/gwtdesigner/. Cest un plugin eclipse payant (40 $ /Poste), il est actuellement le meilleur plugin pour GWT. Il dispose des mêmes fonctionnalités que le plugin Cypal auxquelles sajoutent les suivantes : http://www.instantiations.com/gwtdesigner/ Editeur WYSIWYG (drag & drop) Génération bidirectionnelle du code Support du CSS Wizards générant certaines classes récurrentes Lancement de tests JUnit Refactoring – Internationalisation Création, Edition et Transformation de web project en projets GWT. Documentation très étoffée.

22 22 Bibliothèques de widgets GWT-Ext (LGPL) Utilise Ext-js 2.0.2 pour son design Ext-GWT, anciennement MyGwt (Licence commerciale et GPL) Il existe de nombreuses autres librairies qui à lheure actuelle nont pas encore pris assez dimportance pour figurer dans ces slides.

23 GWT-Ext Il sagit dune librairie remodelant totalement les widgets basiques de GWT et leur fonctionnement. Concrètement mis à part deux ou trois widgets natifs de GWT qui conserveront leur utilité GWT-Ext doit être utilisée à 100% dans lapplication. GWT-Ext fourni 4 « showcase » proposant un large panel de possibilités et le code associé : Demo : http://www.gwt-ext.com/demo/http://www.gwt-ext.com/demo/ Demo-Charts : http://www.gwt-ext.com/demo-charts/http://www.gwt-ext.com/demo-charts/ Demo-Maps : http://www.gwt-ext.com/demo-maps/http://www.gwt-ext.com/demo-maps/ Demo apports utilisateurs : http://www.gwt-ext.com/demo-ux/http://www.gwt-ext.com/demo-ux/ Ainsi quune javadoc détaillée : Javadoc : http://gwt-ext.com/docs/2.0.3/http://gwt-ext.com/docs/2.0.3/ Les slides suivant présente un petit échantillon des possibilités de GWT-Ext.

24 Widgets GWT-Ext Resizable/Dragable Panel ToolTip Loading Bar Editable Tree Menu Demo

25 Widgets GWT-Ext Forms Example Editable Grid Demo

26 GWT et Telosys - Fonctionnement GWT et Telosys fonctionnent parfaitement ensemble moyennant un build Ant approprié. En effet le fonctionnement par défaut de GWT ignore le web.xml contenu dans le projet. L'ajout d'une tâche Ant appropriée résout le problème, en ajoutant au.war le contenu du WebContent :

27 Pour appeler un service Telosys depuis le client GWT on commence par construire une requête. Elle prend comme paramètre la méthode et l'url. Puis on execute la requête tout en définissant la conduite à tenir en cas de succès ou d'échec GWT et Telosys - Communication RequestBuilder builder = new RequestBuilder( RequestBuilder.GET, GWT.getModuleBaseURL()+"/telo.svc?p1="+aTF.getText() +"&p2="+bTF.getText()); //On execute la requête Request response = builder.sendRequest(null, new RequestCallback() { //Si la requete échoue public void onError(Request request, Throwable exception) {} //Si le requête réussie public void onResponseReceived(Request request, Response response) {} });

28 28 Comparaison : GWT, Flex, OpenLaszlo CA- Performance côté client B+BAWidgets/Features/ Puissance du toolkit B-CBFacilitée de développement BAB+Performance côté serveur A+B+B-Portabilitée B-B+C+ (B+ avec plugin Eclipse payant (400 $) Processus de développement B- BSyntaxe du language OpenLaszloGWTFlex Lauteur de ce comparatif Kevin Whinnery, est un ingénieur système spécialisé dans le développement dinterfaces Web. Il semble avoir une préférence marquée pour Flex, ce qui devrait relativiser la note de facilitée de développement de GWT.

29 29 A venir Google développe son propre designer Version 1.5 de GWT (Google): Prise en charge de java 5 GWT Designer (Instantiations): Support des widgets de GWT-Ext en cours de développement, et peut-être Ext-GWT

30 30 Lexique JNI : est un framework qui permet à du code Java s'exécutant à l'intérieur de la JVM d'appeler et d'être appelé par des applications natives ou avec des bibliothèques logicielles basées sur d'autres langages. Module : Un module représente une application GWT, lors du déploiement chaque module est un.war EntryPoint : LEntryPoint est une classe qui hérite dEntryPoint cest par elle que lon place les différentes fonctions de lapplication dans le.html du module. On peut créer plusieurs EntryPoint dans un module pour clarifier le code. Mais elles doivent insérer dans le même.html pour ne pas générer derreurs.

31 Tutoriels Pour démarrer Installation : http://code.google.com/webtoolkit/gettingstarted.html http://code.google.com/webtoolkit/gettingstarted.html Premiers pas : http://moritan.developpez.com/tutoriels/java/gwt/premier/projet/ http://moritan.developpez.com/tutoriels/java/gwt/premier/projet/ Autres : http://www.drivenbycuriosity.com/mywp/

32 Exemples GWT-Ext Demo : http://www.gwt-ext.com/demohttp://www.gwt-ext.com/demo Pibb : https://pibb.com/pibbhttps://pibb.com/pibb MapEcos : http://mapecos.org/maphttp://mapecos.org/map Infos : http://googlewebtoolkit.blogspot.com/2008/02/spreading-word- about-pollution-in-us.html http://googlewebtoolkit.blogspot.com/2008/02/spreading-word- about-pollution-in-us.html Project Gutenberg : Live Search (Beta)Live Search Wibokr : http://www.wibokr.com/page/page.do#http://www.wibokr.com/page/page.do# OpenKM : http://www.openkm.com/http://www.openkm.com/ ContactOffice : http://beta.contactoffice.com/ (Beta)http://beta.contactoffice.com/ Google : Checkout / BaseCheckout Base Fabset : http://www.fabset.com/http://www.fabset.com/

33 Documentations Présentations Développez.com : http://moritan.developpez.com/tutoriels/java/gwt/presentation/ http://moritan.developpez.com/tutoriels/java/gwt/presentation/ Api Javadoc : http://google-web- toolkit.googlecode.com/svn/javadoc/1.4/index.htmlhttp://google-web- toolkit.googlecode.com/svn/javadoc/1.4/index.html

34 34 Sources GWT JNSI : http://code.google.com/webtoolkit/documentation/com.google.gwt.d oc.DeveloperGuide.JavaScriptNativeInterface.html http://code.google.com/webtoolkit/documentation/com.google.gwt.d oc.DeveloperGuide.JavaScriptNativeInterface.html News : http://www.ongwt.com/http://www.ongwt.com/ Comparatif : http://www.sys-con.com/read/489336_1.htm http://www.sys-con.com/read/489336_1.htm