GWT V 1.0 / 2008 - May. Plan Informations – Slides 3 - 7 Widgets GWT – Slides 8 – 11 RPC /...

34
GWT V 1.0 / 2008 - May

Transcript of GWT V 1.0 / 2008 - May. Plan Informations – Slides 3 - 7 Widgets GWT – Slides 8 – 11 RPC /...

Page 1: 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.

GWT

V 1.0 / 2008 - May

Page 2: 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.

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

Page 3: 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.

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.

Page 4: 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.

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 : liste

Le port par défaut du tomcat embarqué est le 8888 Télécharger GWT :

http://code.google.com/webtoolkit/download.html

Page 5: 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.

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

Page 6: 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.

GWT :

Gwt gère la plupart des incompatibilités de navigateurs.

Gwt Supporte l’internationalisation 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.

Page 7: 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.

GWT : Principe de fonctionnement

Code Java (1.4)

Code JavaScript Compilateur

GWTClient

Serveur

Code Java (1.6)

Services existants

RPC

Page 8: 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.

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ête Réponse

Compilateur GWT

.js

Aspect Production

Client Serveur

Interfaces

HTTPRequête

Réponse

Implémentation

Services externes

Page 9: 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.

Widgets GWT

TextArea - javadocPasswordTextBox - javadoc

ListBox

javadoc

HyperLink

javadoc

TextBox - javadocCheckBox - javadoc

ToggleButton

javadoc

PushButton

javadoc

RadioButton - javadocButton - javadoc

Page 10: 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.

Widgets GWT

PopupPanel

javadoc

DialogBox

javadoc

TabBar

javadoc

Table

javadoc

Tree

javadoc

MenuBar

javadoc

Page 11: 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.

Widgets GWT

HorizontalSplitPanel

javadoc

VerticalSplitPanel

javadoc

FlowPanel

javadoc

VerticalPanel

javadoc

HorizontalPanel

javadoc

StackPanel

javadoc

Page 12: 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.

Widgets GWT

SuggestBox

javadoc

DisclosurePanel

javadoc

RichTextArea

javadoc

TabPanel

javadoc

DockPanel

javadoc

Page 13: 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.

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 d’implémentation pour faire son appel.

Les types de retour doivent être compilable en JS Lien : Description complète des classes supportées

Concrètement les différents plugins GWT, permettent de simplifier l’utilisation du RPC Génération automatique des Classes Générations automatiques des méthodes Ajout d’une classe « Util » à l’interface MyService

pour simplifier l’appel (GWT Designer)

Page 14: 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.

GWT : RPC

Page 15: 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.

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;

} }

Page 16: 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.

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);

}

Page 17: 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.

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

Page 18: 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.

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 <script language="javascript"

src="gwt.test.Hello.nocache.js"></script>

Sous la balise fermante </body>

Pour insérer du GWT à un endroit spécifique de la page créez une div par exemple <div id=« ici »></div> Puis dans les sources GWT RootPanel.get(« ici »).add(votreGwtAInserer);

Page 19: 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.

19

Plugins

Eclipse Cypal Studio GWT Designer (Instantiation)

Netbeans GWT4NB :

Tuto : https://gwt4nb.dev.java.net/manual/tutorials/AnagramDemo/gwt4nbDemo.htm

Page 20: 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.

Plugins - Cypal Studio for GWT

Cypal Studio for GWT : 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 l’application en hosted mode Compiler l’application en JavaScript Déployer sur un serveur extérieur Exporter comme WAR

Page 21: 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.

Plugins – GWT Designer

GWT Designer (Instantiations) : http://www.instantiations.com/gwtdesigner/ . C’est 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 s’ajoutent les suivantes :

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.

Page 22: 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.

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 à l’heure actuelle n’ont pas encore pris assez d’importance pour figurer dans ces slides.

Page 23: 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.

GWT-Ext

Il s’agit d’une 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 l’application.

GWT-Ext fourni 4 « showcase » proposant un large panel de possibilités et le code associé :

Demo : http://www.gwt-ext.com/demo/ Demo-Charts : http://www.gwt-ext.com/demo-charts/ Demo-Maps : http://www.gwt-ext.com/demo-maps/ Demo apports utilisateurs :

http://www.gwt-ext.com/demo-ux/ Ainsi qu’une javadoc détaillée :

Javadoc : http://gwt-ext.com/docs/2.0.3/ Les slides suivant présente un petit échantillon des

possibilités de GWT-Ext.

Page 24: 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.

Widgets GWT-Ext

Resizable/Dragable Panel

ToolTip

Loading Bar

Editable Tree

Menu

Demo

Demo

Demo

Demo Demo

Page 25: 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.

Widgets GWT-Ext

Forms Example

Editable Grid

Demo

Demo

Page 26: 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.

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 :<target name="telosys">

<copy todir="@dot/${gwt.module.id}">

<fileset dir="${gwt.src}\WebContent"/>

</copy>

</target>

Page 27: 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.

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êteRequest response = builder.sendRequest(null, new RequestCallback() {

//Si la requete échouepublic void onError(Request request, Throwable exception) {}

//Si le requête réussiepublic void onResponseReceived(Request request, Response response) {}

});

Page 28: 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.

28

Comparaison : GWT, Flex, OpenLaszlo

CA-A-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-B-BSyntaxe du language

OpenLaszloGWTFlex

L’auteur de ce comparatif Kevin Whinnery, est un ingénieur système spécialisé dans le développement d’interfaces 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.

Page 29: 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.

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

Page 30: 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.

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 : L’EntryPoint est une classe qui hérite d’EntryPoint c’est par elle que l’on place les différentes fonctions de l’application 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 d’erreurs.

Page 31: 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.

Tutoriels

Pour démarrer Installation :

http://code.google.com/webtoolkit/gettingstarted.html

Premiers pas : http://moritan.developpez.com/tutoriels/java/gwt/premier/projet/

Autres : http://www.drivenbycuriosity.com/mywp/

Page 32: 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.

Exemples

GWT-Ext Demo : http://www.gwt-ext.com/demo Pibb : https://pibb.com/pibb MapEcos : http://mapecos.org/map

Infos : http://googlewebtoolkit.blogspot.com/2008/02/spreading-word-about-pollution-in-us.html

Project Gutenberg : Live Search (Beta) Wibokr : http://www.wibokr.com/page/page.do# OpenKM : http://www.openkm.com/ ContactOffice : http://beta.contactoffice.com/

(Beta) Google : Checkout / Base Fabset : http://www.fabset.com/

Page 33: 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.

Documentations

Présentations Développez.com :

http://moritan.developpez.com/tutoriels/java/gwt/presentation/

Api Javadoc :

http://google-web-toolkit.googlecode.com/svn/javadoc/1.4/index.html

Page 34: 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.

34

Sources

GWT JNSI :

http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.JavaScriptNativeInterface.html

News : http://www.ongwt.com/

Comparatif : http://www.sys-con.com/read/489336_1.htm