Tutoriel pour apprendre à utiliser des Web Components avec GWT : application à Google Polymer

À partir de la version 2.7 de GWT, JsInterop a été présenté comme une fonctionnalité expérimentale pour remplacer le JSNI. Comme son nom l'indique, JsInterop est une façon d'interopérer Java (GWT) avec JavaScript. Il offre un meilleur mode de communication entre les deux en utilisant des annotations, au lieu d'avoir à écrire du JavaScript dans vos classes. JSInterop est défini par les interfaces suivantes : @JsType, @JsProperty, @JSMethod, @JSConstructor, @JSFunction, @JsExport.

La première utilité de JsInterop est de pouvoir exposer vos classes Java afin de pouvoir les utiliser à partir d'un script JavaScript. Par exemple :

package com.jsinterop;

@JsType
public class myClasse {

  public String name;
            
  public myClass(String name){
    this.name = name;
  }


  public void sayHello() {
    return 'Hello' + this.name;
  }
}

On pourra utiliser notre classe depuis un script comme ceci :

// le Nom du package est important car il sert comme namespace
var aClass = new com.jsinterop.myClasse('developpez.com');

console.log(aClass.sayHello());

// resultat: 'Hello developpez.com'

La deuxième utilité de JsInterop est la possibilité d'importer les bibliothèques JavaScript existantes et de pouvoir les utiliser dans GWT sans avoir à réécrire une ligne de JavaScript. C'est ici où les choses deviennent intéressantes. Imaginez que vous pouvez faire usage de tous les grands frameworks qui existent dans l'écosystème JavaScript (Angular, Polymer, React …) à partir de votre code Java. Il suffit donc d'importer la bibliothèque JavaScript dans la page principale (Entry Point). Il faudra aussi identifier les méthodes et champs à importer dans votre projet GWT.

Par exemple, supposons que nous voulions utiliser Leaflet, qui est une bibliothèque JavaScript qui permet de manipuler des cartes, depuis notre code Java. Tout ce que nous devons faire est d'envelopper les méthodes dont nous avons besoin à l'aide de JsInterop :

@JsType(isNative=true, namespace=JsPackage.GLOBAL)
public class L {
  
  public static native Map map(String id);
}

@JsType(isNative=true)
public class Map {
  
  
  @JsMethod
  public native L setView(double[] center, int zoom);
}

Veuillez noter qu'on a utilisé les mêmes noms de variables que ceux du code source de la bibliothèque Leaflet. Les noms de classes, dans notre exemple L et Map, et les noms des méthodes sont très importants dans JsInterop car du moment où on spécifie isNative=true, GWT va automatiquement chercher dans l'environnement du navigateur les noms des variables similaires et va les associer à ceux définis à l'aide de JsInterop.

On pourra maintenant initialiser une carte Leafet dans notre application GWT sans manipuler du code JavaScript :

public class Leafletwrapper implements EntryPoint {
  
  double[] positions = {51.505, -0.09};
  
  public void onModuleLoad() {
    
    // ça marche !!! 
    L.map("map").setView(positions, 13);
  }
}

Le code complet de cet exemple est disponible à : https://github.com/zak905/jsinterop-leaflet

Pour le moment, il n'y a pas de méthode automatisée pour faire l'import d'une bibliothèque JavaScript dans GWT. En attendant un outil qui permette de le faire (du style gwt-api-generator qui est utilisé uniquement pour les éléments Polymer), le développeur doit connaître le fonctionnement de la bibliothèque JavaScript (les méthodes, les arguments, les champs, les namespaces…), et faire le mapping manuellement. Bien sûr, le mapping manuel n'est pas à l'abri de l'erreur, mais c'est le seul moyen qui existe pour le moment. Un autre inconvénient du mapping manuel est lors de l'évolution d'une bibliothèque/framework JavaScript. Encore une fois, le développeur doit incorporer les changements manuellement pour la continuité de l'interopérabilité.

Voici un autre exemple intéressant qui peut aider à comprendre JsIntrop et dans lequel AngularJs est utilisé depuis GWT : https://github.com/bitwerk/AngularGwtExample

Avec l'émergence du nouveau web et des applications riches et interactives, les développeurs web se sont retrouvés à faire des manipulations complexes de HTML, CSS et JavaScript. Travailler avec les trois à la fois n'est pas toujours évident et donc les développeurs et la communauté web en général ont ressenti le besoin d'avoir quelque chose de plus standard afin de pouvoir mieux gérer les bouts de HTML, CSS et JS.

L'idée des Web Components est née de ce besoin. Le but derrière la création des Web Components est la réutilisabilité. La réutilisabilité a été parmi les objectifs principaux des langages orientés objet tels que Java, mais n'a pas été mise en évidence pour la partie client (Frontend). Il y a évidemment beaucoup de patterns qui se répètent d'une application à une autre et donc la question qui se pose est pourquoi ne pas pouvoir les porter et les réutiliser. Imaginez que vous ayez créé une barre de menu pour une application, et vous ayez passé beaucoup de temps sur des choses telles que le HTML, le style, les animations, les événements-…

En développant une nouvelle application, vous réalisez que vous avez besoin du même menu, alors vous retournez à votre projet précédent et commencez à ramasser et recoller les bouts de HTML, JS, CSS et à les adapter à votre nouvelle application ; cela devient fastidieux au fil du temps et propice aux erreurs. Les Web Components fournissent une solution pragmatique à ce problème. Les Web Components fournissent un excellent moyen de portage et de réutilisation de bouts de HTML, CSS et JS, le tout encapsulé dans un tag HTML. Les Web Components sont définis par quatre spécifications qui ont été ajoutées par le W3C aux spécifications HTML :

• custom elements : ce qui permet de créer vos propres composants <mon-element></mon-element> ;
• HTML imports : pouvoir importer ces éléments dans n'importe quel DOM ;
• templates : pouvoir définir des templates de HTML qui sont manipulables par JavaScript;
• shadow Dom : permet de cacher la complexité de certains éléments HTML en cachant le HTML sous-jacent.

Les Web Components sont des spécifications brutes, mais il y a aussi plusieurs frameworks qui sont construits à partir de ces spécifications et qui permettent de tirer avantage de toutes leurs fonctionnalités. Polymer est parmi ces frameworks. Polymer est un projet construit et maintenu par Google. C'est un framework basé sur les Web Components et qui permet de construire des applications optimisées, soignées au niveau esthétique et qui peut marcher sur n'importe quel dispositif. Polymer offre également la possibilité d'étendre ses fonctionnalités et de créer vos propres composants réutilisables.

Pour illustrer l'utilisation des Web Components, nous allons créer un élément Polymer simple avec un look personnalisé qui affiche une pop-up à chaque clic. Nous allons appeler cet élément cool-div. Pour faire cela, nous allons créer une définition de l'élément dans un fichier appelé cool-div.html :

<dom-module id="cool-div">
  <template>
    <style>
      :host {
        display: block;
      }
      #mydiv{
        background-color: orange;
        max-width: 100px;
        color: white;
      }

    </style>
   <div id="mydiv">
    <content></content>
  </div>
  </template>

  <script>
    Polymer({

      is: 'cool-div',

      properties: {
        prop1: {
          type: String,
          value: 'cool-div',
        },
      },

       listeners :{
            click:'divClicked'
        },

        divClicked: function(){
          alert('cool div clicked');
        }

    });
  </script>
</dom-module>

On pourra maintenant utiliser cet élément en important simplement la définition dans la section head de la page HTML :

<link rel="import" href="cool-div.html">

et puis :

<cool-div>mon premier web component</cool-div>

Le code complet de cet exemple est disponible à : https://github.com/zak905/cool-div

II-A. Le point de rencontre entre JsInterop et les Web Components▲

II-B. Faire sa première application▲

JsInterop apporte beaucoup de nouvelles possibilités à GWT. L'utilisation de JsInterop peut également aider à surmonter la confusion qui pourrait survenir avec le système de typage de JavaScript. Avec JsInterop, vous pouvez vérifier au moment de la compilation s'il y a des erreurs de typage. JsInterop ouvre un nouveau monde aux utilisateurs GWT et il est seulement en phase expérimentale. Nous devrons attendre que la version stable de GWT 2.8 soit lancée pour pouvoir utiliser JsInterop en production.

Nous tenons à remercier genthial pour la relecture orthographique attentive de cet article et Mickael Baron pour la mise au gabarit.