Présentation PowerPoint

quaggaholeInternet and Web Development

Aug 15, 2012 (5 years and 1 month ago)

522 views

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 de Widgets – Slides 20 ­ 23

Informations complémentaires – Slides 24 ­ 31
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
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
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
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.
GWT : Principe de fonctionnement
Code Java
(1.4)
Code
JavaScript
Compilateur
GWT
Client
Serveur
Code Java
(1.6)
Services
existants
RPC
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
HTTP
Requête
Réponse
Implémentation
Services
externes
Widgets GWT
TextArea -
javadoc
PasswordTextBox -
javadoc
ListBox
javadoc
HyperLink

javadoc
TextBox -
javadoc
CheckBox -
javadoc
ToggleButton

javadoc
PushButton

javadoc
RadioButton -
javadoc
Button -
javadoc
Widgets GWT 
PopupPanel
javadoc
DialogBox
javadoc
TabBar
javadoc
Table
javadoc
Tree
javadoc
MenuBar
javadoc
Widgets GWT
HorizontalSplitPanel
javadoc
VerticalSplitPanel
javadoc
FlowPanel
javadoc
VerticalPanel
javadoc
HorizontalPanel
javadoc
StackPanel
javadoc
Widgets GWT
SuggestBox
javadoc
DisclosurePanel
javadoc
RichTextArea
javadoc
TabPanel
javadoc
DockPanel
javadoc
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)
GWT : RPC
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;
} } 
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
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
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);
19
Plugins

Eclipse

Cypal Studio

GWT Designer (Instantiation)

Netbeans

GWT4NB : 

Tuto : 
https://gwt4nb.dev.java.net/manual/tutorials/AnagramDemo/gwt4
nbDemo.htm
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
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.
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.
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.
Widgets GWT­Ext
Resizable/Dragable Panel
ToolTip
Loading Bar
Editable Tree
Menu
Demo
Demo
Demo
Demo
Demo
Widgets GWT­Ext
Forms Example
Editable Grid
Demo
Demo
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>

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
Comparaison : GWT, Flex, OpenLaszlo
C
A-
A-
Performance côté client
B+
B
A
Widgets/Features/
Puissance du toolkit
B-
C
B
Facilitée de développement
B
A
B+
Performance côté serveur
A+
B+
B-
Portabilitée
B-
B+
C+ (B+ avec
plugin Eclipse
payant (400 $)
Processus de développement
B-
B-
B
Syntaxe du language
OpenLaszlo
GWT
Flex
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.
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
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.
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/
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/
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
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