Introduction à GWT - Partie 4 - Place à un peu de code

Leave a Comment
Article précédent: Anatomie d'un projet GWT.
Dans ce chapitre nous allons regarder le code de notre application HelloGWT puis nous ferons quelques petites modifications pour vous familiariser avec les différentes parties d’une application GWT.

La page hôte d'une application GWT

Une application GWT est constituée d'une unique page HTML appelée page hôte. Le contenu de cette page est en permanence effacé et redessiné selon les sollicitations de l'utilisateur et suivant une logique propre à l'application. Voici la page hôte de notre application HelloGWT.



On a là une simple page à la différence qu'elle ne contient pas grand chose: un tag h1, un message d'invitation dans une cellule de tableau, deux éléments id, l'un pour contenir dynamique un champ de texte et l'autre le bouton. Cet aspect dépouillé de la page hôte peut vous surprendre mais la raison est que le code d'une application GWT est essentiellement du Javascript. Vous écrivez votre application en Java, le compilateur de GWT le transforme en code Javascript exécuté par le navigateur. Toute l'interface graphique dans une application GWT peut être créée dynamiquement comme c'est le cas pour le champ de texte et le bouton Send dans la version actuelle de notre application Hello GWT. Vous pouvez toujours ajouter du contenu statique à cette page si vous le souhaitez.




La page hôte inclut le fichier de style CSS (situé dans le dossier war du projet) grâce à la ligne suivante: 


Le démarrage de l'application GWT et le fichier nocache.js


On arrive à la ligne d'après qui est d'une importance capitale car elle permet d'aborder l'un des aspects les plus importants de GWT à mon sens, le deferred binding. La page hôte inclut un fichier Javascript hellogwt.nocache.js.


Le navigateur charge hellogwt.nocache.js qui contient le code nécessaire à la détermination de la configuration de l'utilisateur (langue, navigateur utilisé etc.). Puis il charge le code correspondant à cette configuration. Ainsi l'utilisateur ne va charger que le code qu'il va réellement exécuter. Un utilisateur ayant Firefox ne va pas charger le code applicatif correspondant à Internet Explorer. "On ne paye que pour ce qu'on utilise"! Comme son nom l'indique le fichier nocache n'est pas en mis en cache pour éviter de manquer les changements apportés à l'application. Par contre le code réellement exécuté peut être caché.

Le point d'entrée de l'application
Nous n'allons pas détailler l'EntryPoint généré par GWT. Au lieu de cela nous allons écrire quelque chose de beaucoup plus simple, une "task list" comme sur l'image suivante. 
L'interface est constituée d'un titre, d'un champ de texte, d'un bouton et d'un conteneur pour la liste des tâches. Il est possible d'enlever une tâche grâce au lien "Remove". Pour créer une tâche on entre son nom dans le champ de texte et on clique sur le bouton "Create task".

Pour commencer voici le contenu de la page hôte dont on va partir:

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="HelloGWT.css">
    <title>Hello GWT Application</title>    
    <script type="text/javascript" language="javascript" src="hellogwt/hellogwt.nocache.js"></script>
  </head>

  <body>
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

  </body>
</html>

Commencez par ajouter les deux lignes suivantes au corps de la page hôte: 

<h2>Hello GWT Application</h2>
<div id="content"></div>

La première ligne constitue le titre de notre application et la seconde est un emplacement qui va accueillir le contenu dynamique créé.
A ce stade l'exécution de notre application donne:


Maintenant nous allons ajouter le champ de texte et le bouton de création de la tâche.

Le monde des widgets GWT

GWT dispose d'un nombre important de classes dédiées aux interfaces graphiques et appelées widgets dans le jargon de GWT. Ces classes se trouvent dans le package com.google.gwt.user.client.ui. Si vous vous demandez toujours ce que peut être un widget c'est par exemple un bouton, un label, un champ de texte, un panneau pouvant contenir d'autres widgets etc. Vous devez, quand vous faites le design de votre application, décider du choix des widgets que vous allez utiliser. Faites un tour ici si vous souhaitez voir, sans tarder, les widgets en grandeur nature.

Construction de l'UI de notre application

Pour placer les éléments de notre interface graphique nous utilisons un conteneur spécial, un VerticalPanel, qui place ses fils (éléments contenus) verticalement, de haut en bas. Nous instancions pour cela la classe com.google.gwt.user.client.ui.VerticalPanel

VerticalPanel container = new VerticalPanel();

La prochaine étape consiste à créer le panneau de création d'une nouvelle tâche. La figure suivante donne un aperçu avec le nom des widgets utilisés.




Le widget GWT pour récupérer du texte court est com.google.gwt.user.client.ui.TextBox et celui pour créer un bouton est com.google.gwt.client.ui.Button. Nous plaçons ces deux widgets dans un panel, com.google.gwt.client.ui.HorizontalPanel, qui place ces éléments fils horizontalement de gauche à droite. 

TextBox taskNameBox = new TextBox();
Button createButton = new Button("Create task");
HorizontalPanel taskCreationPanel = new HorizontalPanel();  
  
taskCreationPanel.add(taskNameBox);
taskCreationPanel.add(createButton);

Comme illustré par le code précédent pour ajouter un élément au panneau horizontal (HorizontalPanel) nous invoquons la méthode add()
Ajoutons le panneau horizontal au conteneur principal créé précédemment.
container.add(taskCreationPanel);
A ce stade le code de l'Entry Point est :
package com.nouhoum.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define onModuleLoad().
 */
public class HelloGWT implements EntryPoint {
 private VerticalPanel container = new VerticalPanel();

 /**
  * This is the entry point method.
  */
 public void onModuleLoad() {
  TextBox taskNameBox = new TextBox();
  Button createButton = new Button("Create task");
  HorizontalPanel taskCreationPanel = new HorizontalPanel();

  taskCreationPanel.add(taskNameBox);
  taskCreationPanel.add(createButton);

  container.add(taskCreationPanel);
 }
}
Mettez à jour le code de l'application avant de l'exécuter. Voyez-vous un changement à l'interface graphique? En principe vous ne devriez observer aucun changement.
Maintenant ajoutons la ligne suivante et puis exécutons l'application. 
RootPanel.get("content").add(container);

Que s'est-il passé? Avant d'avoir ajouté cette ligne le conteneur n'était pas ajouté à la page hôte. Nous avons fait usage d'un widget particulier, le RootPanel, auquel nos widgets doivent être directement ou indirectement ajoutés pour être visibles. 


Note: Les clics sur le bouton "Create Task" ne font rien. Nous verrons dans la suite comment faire réagir le bouton aux évènements de l'utilisateur. Comme vous le verrez plus tard la programmation évènementielle occupe une place importante en GWT.

On avance, on avance! Il ne reste plus que l'affichage de la liste pour finir avec la partie purement graphique.


Cette UI (User Interface) est constituée de widgets: un label pour le texte "Task List" et un tableau pour la liste proprement dite. 
Il existe dans la librairie de GWT un widget (com.google.gwt.user.client.ui.Label) que nous allons utiliser pour afficher le texte. Voici comment ça marche:
Label title = new Label("Task List");
L'affichage de la liste ressemble à un tableau avec deux colonnes et un nombre variable de lignes. GWT met à notre disposition deux widgets pour réaliser des tableaux:

  • com.google.gwt.user.client.ui.Grid: Ce widget est un tableau rectangulaire qui peut contenir du texte, du code HTML ou d'autres widgets. Sa particularité est que ses dimensions sont fournies lors de sa création et son redimensionnement se fait de façon explicite (traduction vous le faites vous-même en invoquant une méthode de la classe Grid).
  • com.google.gwt.user.client.ui.Flextable: C'est un tableau comme le widget Grid mais plus flexible. Avec ce widget les cellules peuvent être créées à la demande, le nombre de cellules pouvant varier par ligne.

Nous choisissons d'afficher la liste de tâches dans un Flextable. Nous en profitons pour ajouter un label qui affiche "Task List". Voici le point d'entrée après ces ajouts:
package com.nouhoum.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define onModuleLoad().
 */
public class HelloGWT implements EntryPoint {
 private VerticalPanel container = new VerticalPanel();
 private FlexTable taskContainer = new FlexTable();

 /**
  * This is the entry point method.
  */
 public void onModuleLoad() {
  TextBox taskNameBox = new TextBox();
  Button createButton = new Button("Create task");
  HorizontalPanel taskCreationPanel = new HorizontalPanel();

  taskCreationPanel.add(taskNameBox);
  taskCreationPanel.add(createButton);
  
  container.add(taskCreationPanel);
  Label title = new Label("Task List");
  container.add(title);
  container.add(taskContainer);
  RootPanel.get("content").add(container);
 }
}

Notre super application ressemble à ça à ce niveau:



Comment ajouter une tâche?
Il nous reste à ajouter la logique de la création et de l'affichage d'une tâche. Comme vous l'avez certainement constaté rien ne se passe lorsqu'on clique sur le bouton "Create task". Ceci est dû au fait que nous sommes indifférents à l'évènement clic sur le bouton. Nous devons détecter les clics sur ce bouton et créer si nécessaire une tâche avec le nom fourni dans le champ texte. Dans le jargon de GWT nous nous mettons à l'écoute de l'évènement "clic sur le bouton Create task". 
Brève présentation de la programmation évènementielle en GWT


La gestion des évènements (clic, clavier etc.) est très importante dans une application GWT car elle définit comment les utilisateurs interagissent avec votre application. La problématique est gérée en suivant le design pattern observer. Comment marche ce design pattern? En résumé il est constitué de deux types d'acteurs: un sujet (observé) et des observateurs. Les observateurs, intéressés par un évènement donné, s'enregistrent auprès du sujet (observé) qui les notifie dès que cet évènement arrive. Clair? Pas clair?


Passons maintenant à la pratique en appliquant ce qu'on vient d'apprendre à notre problème. Notre sujet (observé) est tout trouvé! C'est le bouton "Create task". Il doit permettre aux observateurs de s'enregistrer auprès de lui. Ceci est possible grâce à la méthode addClickHandler() du widget Button. En réalité cette méthode provient d'une interface com.google.gwt.event.dom.client.HasClicHandlers qui est implémentée par tous les widgets qui souhaitent être notificateurs d'évènements clic.  Voici son code source:

package com.google.gwt.event.dom.client;

import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.event.shared.HasHandlers;

/**
 * A widget that implements this interface provides registration for
 * {@link ClickHandler} instances.
 */
public interface HasClickHandlers extends HasHandlers {
  /**
   * Adds a {@link ClickEvent} handler.
   * 
   * @param handler the click handler
   * @return {@link HandlerRegistration} used to remove this handler
   */
  HandlerRegistration addClickHandler(ClickHandler handler);
}

La méthode addClickHandler() prend en argument un objet ClickHandler qui représente un observateur. Mettons cela en pratique en implémentant ceci:
  1. Se mettre à l'écoute du clic du bouton "Create task"
  2. Récupérer le contenu du champ de texte
  3. Créer et afficher la tâche
package com.nouhoum.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define onModuleLoad().
 */
public class HelloGWT implements EntryPoint {
 private TextBox taskNameBox = new TextBox();
 private FlexTable taskContainer = new FlexTable();
 private VerticalPanel container = new VerticalPanel();

 /**
  * This is the entry point method.
  */
 public void onModuleLoad() {  
  Button createButton = new Button("Create task");
  HorizontalPanel taskCreationPanel = new HorizontalPanel();

  taskCreationPanel.add(taskNameBox);
  taskCreationPanel.add(createButton);
  
  container.add(taskCreationPanel);
  Label title = new Label("Task List");
  container.add(title);
  container.add(taskContainer);
  
  createButton.addClickHandler(new ClickHandler() {   
   @Override
   public void onClick(ClickEvent event) {
    //We remove leading and trailing whitespaces from 
    //the user provided text
    String taskName = taskNameBox.getText().trim();
    if(!taskName.isEmpty()) {
     addTask(taskName); 
    }
   }
  });
  
  RootPanel.get("content").add(container);
 }

 private void addTask(String taskName) {
  // TODO Auto-generated method stub 
 }
}

Implémentons maintenant la méthode addTask().  Au passage on accélère un peu le rythme en ajoutant l'implémentation de la suppression d'une tâche. Voici le code final de HelloGWT.java:


package com.nouhoum.gwt.client;

import java.util.ArrayList;
import java.util.List;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define onModuleLoad().
 */
public class HelloGWT implements EntryPoint {
 private TextBox taskNameBox = new TextBox();
 private FlexTable taskContainer = new FlexTable();
 private List<Label> tasks = new ArrayList<Label>();
 private VerticalPanel container = new VerticalPanel();

 /**
  * This is the entry point method.
  */
 public void onModuleLoad() {  
  Button createButton = new Button("Create task");
  HorizontalPanel taskCreationPanel = new HorizontalPanel();

  taskCreationPanel.add(taskNameBox);
  taskCreationPanel.add(createButton);
  
  container.add(taskCreationPanel);
  Label title = new Label("Task List");
  container.add(title);
  container.add(taskContainer);
  
  createButton.addClickHandler(new ClickHandler() {   
   @Override
   public void onClick(ClickEvent event) {
    //We remove leading and trailing whitespaces from 
    //the user provided text
    String taskName = taskNameBox.getText().trim();
    if(!taskName.isEmpty()) {
     addTask(taskName); 
    }
    taskNameBox.setText("");
   }
  });
  
  RootPanel.get("content").add(container);
  taskNameBox.setFocus(true);
 }

 private void addTask(String taskName) {
  final int row = taskContainer.getRowCount();
  final Label taskLabel = new Label(taskName);
  taskContainer.setWidget(row, 0, taskLabel);
  final Label removeLink = new Label("Remove");
  removeLink.addStyleName("remove");
  taskContainer.setWidget(row, 1, removeLink);  
  tasks.add(taskLabel);
  
  removeLink.addClickHandler(new ClickHandler() {     
   @Override
   public void onClick(ClickEvent event) {
    int index = tasks.indexOf(taskLabel);
    removeTask(tasks.indexOf(taskLabel)); 
    tasks.remove(index);
   }
  });
 }

 private void removeTask(int row) {
  taskContainer.removeRow(row);
 }
}

Le résultat en image!




Une fois la tâche créée nous l'insérons dans la première colonne du Flextable  et le lien pour la supprimer dans la deuxième colonne avec le code suivant:    
final Label taskLabel = new Label(taskName);
taskContainer.setWidget(row, 0, taskLabel);
final Label removeLink = new Label("Remove");
removeLink.addStyleName("remove");
taskContainer.setWidget(row, 1, removeLink);
Puis nous écoutons l'évènement de clic sur le label Remove. Dès qu'il survient nous récupérons la ligne correspondante grâce à la liste qui stocke l'ensemble des tâches en cours. Avec le numéro de la ligne nous supprimons la tâche de liste tasks et du tableau.


removeLink.addClickHandler(new ClickHandler() {     
  @Override
  public void onClick(ClickEvent event) {
    int index = tasks.indexOf(taskLabel);
    removeTask(tasks.indexOf(taskLabel)); 
    tasks.remove(index);
 }
});
Nous avons ajouté une classe CSS au label "Remove" pour l'afficher en rouge et faire apparaître le curseur sous forme de pointeur.
.remove {
  color: #c00;
  cursor: pointer;
}
Voici la capture finale de notre super application HelloGWT.

C'est la fin de cet article. Dans le prochain de la série nous verrons comment faire communiquer une application GWT avec un serveur.

Introduction à GWT - Partie 3 - Anatomie d'un projet GWT

Leave a Comment
Article précédent: Préparation de l'environnement de travail.
Dans ce troisième article nous verrons l'organisation d'un projet GWT puis modifierons le code du projet HelloWorld.
L'image ci-dessous donne un aperçu de la façon dont est organisé notre projet: 




Rappel: Rappelez-vous que nous avons créé notre application avec le package com.nouhoum.gwt.HelloGWT.

En vous rendant à la racine du projet vous verrez qu'il est structuré principalement en trois dossiers: src, test et war que nous allons explorer.
  • src: Ce dossier contient le code source Java de notre application ainsi que la configuration du module. Nous reviendrons, dans la suite, sur la notion de module dans la suite. Le code source de l'application est subdivisé en trois catégories:
    • com.nouhoum.gwt.client: Le code Java destiné à être transformé en Javascript et exécuté par le navigateur est placé dans ce package. Notez que dans vous ne devez utiliser dans ce package que les classes du JRE pouvant émulées par le compilateur de GWT.
    • com.nouhoum.gwt.shared: Ce package contient le code commun aux parties serveur et client de l'application.
    • com.nouhoum.gwt.server: Si l'application contient une partie serveur le code correspondant sera placé dans ce package. Le code-serveur n'est pas traduit en Javascript et peut contenir toute classe du JRE. Le chemin complet pour accéder au code-serveur à partir de la racine du projet est com/nouhoum/gwt/server.
  • test: Ici se trouvent les fichiers relatifs aux tests unitaires de notre application.
  • war: Les ressources statiques telles que les images, les fichiers de style et les pages HTML se trouvent ici. Une application GWT est constituée d'une unique page (ici HelloGWT.html - voir figure l'image ci-dessus) dont le contenu est dynamiquement effacé et dessiné. Nous reviendrons, dans le prochain article, sur le contenu de cette page.
  • war/WEB-INF: Ce dossier contient les fichiers qui font de notre application une application web Java. Il contient notamment web.xml, le fichier de configuration de l'application web Java.
  • war/WEB-INF/lib: Contient les librairies utilisées par l'application.
La structure de projet que nous venons de voir n'est point obligatoire. Vous pouvez la changer si vous le souhaitez comme nous le verrons plus tard. 

La notion de module

 La notion de module définie en GWT permet de "packager" des fonctionnalités et de les distribuer afin d'être utilisées dans d'autres projets. Le module constitue l'unité de configuration en GWT et correspond concrètement à un fichier de configuration [NomModule].gwt.xml et un ensemble de fichiers (classes Java, ressources statiques....). Pour notre application HelloGWT le fichier de configuration HelloGWT.gwt.xml est situé com/nouhoum/gwt/.  Voici son contenu:



Voyons la signification des éléments de ce fichier de configuration:
  • Renommer le module: L'option rename-to de l'élément permet .... de renommer le module.
  • Hériter d'autres modules: Le code source de GWT est un ensemble de modules dont peuvent hériter les applications GWT. Ceci est accompli grâce à l'élément . Par exemple notre application hérites des fonctionnalités de base de GWT se trouvant dans le module : com.google.gwt.user.User.
  • Le point d'entrée de l'application: L'élément permet de spécifier le point d'entrée de l'application. Il s'agit d'une classe particulière qui est instanciée lorsque le module est chargé. Toute classe peut être le point d'entrée du module à condition d'implémenter l'interface EntryPoint définie. Cette interface à une unique méthode onModuleLoad() sans argument qui s'exécute au chargement du module.
  • Les sources: L'élément permet de spécifier où se trouvent les classes à convertir en Javascript. Dans notre exemple les client et shared sont inclus.
Vous en savez suffisamment sur le fichier de configuration d'un module pour la suite de cet article.

Les modes d'exécution d'une application GWT

Le mode développement 

Ce mode est très utile lors de la phase de développement. Il permet d'exécuter l'application tout en bénéficiant de facilitations de debuggage de l'IDE (Eclipse). En effet dans ce mode c'est le bytecode Java qui s'exécute et le plugin GWT fait la liaison entre la JVM et le navigateur.

Le mode production

Ce mode permet de tester l'application dans des conditions similaires à ce qu'on peut rencontrer en production. Le code de l'application est transformé en Javascript. Il sert notamment à tester l'application (rendu, performance...) dans différents navigateurs.

Passons à l'action
  • Lancer l'application avec la tâche ant devmode : Lorsque l'application a été créée avec webAppCreator un fichier de build Ant qui sert entre autres à lancer l'application en mode développement.
    ant devmode
    
  • Lancer l'application depuis Eclipse: Faites un clic droit puis Run as > Web Application.


Cliquez sur le bouton Copy to Clipboard et coller l'URL dans votre navigateur. Vous obtenez, si vous n'avez pas déjà le plugin, une suggestion d'installation:



Installez le plugin en suivant les instructions puis lancez l'application. En attendant le prochain article vous pouvez jouer avec l'application HelloGWT.

Article suivant: Place à un peu de code

NoSQL au Paris JUG

Leave a Comment
La fièvre du NoSQL n’a pas échappé à Antonio et à son équipe du ParisJUG. Ainsi la soirée mensuelle du JUG était consacrée, ce mardi 14 septembre, aux technologies NoSQL. Il y avait au programme deux présentations : la première, une introduction générale au NoSQL, était animée par Olivier Malassi d’OCTO et Michaël Figuière de Xebia et la deuxième animée par Steven Noels de Outerthought revenait sur son expérience du NoSQL basée sur la réalisation d’un CMS. 

Un tour d'horizon

Les mythes autour du NoSQL : Ils ont précisé que le mouvement NoSQL n’a pas pour objectif la mort du SQL, il constitue plutôt une solution alternative et parfois complémentaire à la technologie traditionnelle et plus éprouvé du relationnel. Le NoSQL comme n’importe quelle technologie doit être utilisée à bon escient. Rappelez-vous ce principe: « The right tool for the right job ». En clair, en fonction du problème que vous avez sous la main vous choisirez soit le NoSQL soit une base relationnelle. Et ce choix devrait rester technologique et non dogmatique.

A l’origine les géants du web

Face à de fortes contraintes (volume de données énorme, exigence forte de disponibilité…) les géants du web comme Google, Amazon, LinkedIn ou Facebook ont créé de nouveaux systèmes de stockage et de traitement de données. BigTable chez Google, Dynamo chez Amazon, Cassandra chez Facebook et Voldemort chez LinkedIn. Les problématiques auxquelles ces géants faisaient face les a poussés à opérer un changement radical de paradigme. Par exemple ils considèrent que, dans un système constitué d’un très grand nombre de nœuds, il existe à chaque instant t un nombre non négligeable de nœuds qui tombent. Cette dimension est ainsi prise en compte lors du design des systèmes et on sait ce qu’il faut lorsque cela arrive.

Un mouvement dominé par l’Open Source

A ce jour le mouvement du NoSQL est dominé par des solutions open source dont certaines des plus connues sont : HBase (Apache Hadoop), Cassandra, MongoDB, CouchDB, Neo4j.
Les différents types de technologies NoSQL:
  • Systèmes de stockage distribué orienté paire key-value : Ces solutions peuvent être vues comme des « hash map » donc constituées d’une paire clé-valeur. Exemples : Voldemort, MemcacheDB.
  • Systèmes de stockage orientés document : Dans ces systèmes les données sont stockées dans des documents plutôt que dans une table comme dans une base de données relationnelle. Exemples : Apache CouchDB, MongoDB, SimpleDB d’Amazon. Pour en savoir plus : Document-oriented databases
  • Systèmes de stockage orientés graphe : Ces bases de données stockent les données dans un graphe plutôt que dans une table. Neo4j est un exemple de ce type de base de données écrit en Java et en open source. Pour en savoir plus : Neo4j.
  • Systèmes de stockage orientés colonne : Dans ces systèmes les données sont stockées par colonnes plutôt que par lignes comme dans les bases de données relationnelles. C’est une notion pas forcément évidente à assimiler à premier abord. Voici un lien pour y voir un peu plus clair : Column-oriented data stores.

Un terrain d’innovation mais….

Le NoSQL est aujourd’hui un terrain d’innovation et une technologie assez jeune, surtout comparé aux technologies relationnelles fortes de leur quarantaine d’expérience. Qu’on ne s’y méprenne pas cette jeunesse est toute relative quand on sait que ces technologies NoSQL sont utilisées dans des conditions extrêmes comme chez Google, Amazon, Facebook ou LinkedIn.
 
Un CMS basé sur HBase et SOLR

Dans la présentation le speaker, Steven Noels, nous présente comment ils ont construit un Content Management System, Lily, autour de technologies NoSQL à savoir HBase, SOLR et bien d’autres.
Il a commencé par présenter l’architecture classique d’un CMS puis les limites de celle-ci, notamment le fait que dans ces systèmes tout est fait pour ne pas parler à la base de données notamment par ajout de caches à plusieurs niveaux. S’ils voulaient pousser plus les performances de leur CMS ils avaient le choix entre plusieurs solutions par exemple ajouter plus de bases de données, un bus de messages ou changer complètement de paradigme et passer au NoSQL.
Ils ont au final opté pour cette dernière solution en choisissant HBase pour le stockage des données et SOLR, un serveur de recherche basé sur Lucene, pour la recherche. Ce choix n’aurait pas été évident à cause notamment du nombre pléthorique de solutions disponibles et du buzz marketing qui les accompagne.
Voici quelques les ayant aidés à choisir :
  • Un passage à l’échelle automatique (automatic scaling to large data set) 
  • La tolérance à la panne 
  • Une solution open source et capable de tourner sur du matériel de base 
  • Une solution basée sur du Java
  • Un modèle de donnée flexible
Steven est revenu sur les notions de « column family » et de région.
L'architecture de Lily est disponible sur son site et donne une vision intéressante de l'article des différents composants.

A retenir
  • Le NoSQL n’est pas là pour tuer les bases de données relationnelles mais il offre seulement une autre alternative particulièrement adaptée à certains problèmes.
  • Faites attention au marketing et aux « buzz words » ! Etudiez sérieusement le choix de technologies NoSQL car il est crucial pour le choix de votre projet.
  • Le NoSQL n’est pas forcément le choix à faire pour votre problème. Une base de données relationnelle peut être mieux adaptée.
Allez plus loin

Vous avez envie d'aller plus loin et explorer davantage les technologies de l'univers NoSQL et des big data? Voici quelques liens qui pourraient vous aider :
Bien sûr ce compte rendu ne reflète pas entièrement ce qui s'est dit à la soirée NoSQL. Pour le compléter vous pouvez vous référer à l'article de Nicolas Martignole alias Touilleur Express ici et aux photos publiées sur le site de Paris JUG ici.

Introduction à GWT -Partie 2- Préparation de l'environnement de travail

Leave a Comment
Article précédent : Introduction à GWT - Partie 1 - Présentation de GWT.

Avant d'entrer dans le vif du sujet et mettre la main dans le cambouis nous allons rapidement nous doter des bons outils.

De quels outils avons-nous?

  • Un SDK Java : Pour vérifier si vous avez un SDK sur votre plateforme lancez une invite de commande et tapez javac. Si aucun SDK Java n'est installé sur votre système vous aurez un message similaire au suivant :
    C:\Users\nouhoum>javac
    'javac' n'est pas reconnu en tant que commande interne
    ou externe, un programme exécutable ou un fichier de commandes.

    Téléchargez et installez le SDK de Java.
  • GWT: Nous allons maintenant installer Google Web Toolkit. Téléchargez GWT à partir d'ici. Extrayez le contenu du fichier téléchargé à l'endroit de votre choix sur votre machine. Examinons le contenu du répertoire d'installation avant d'aller plus loin.
    • La documentation : le dossier doc contient de la documentation sur l'API de GWT (la javadoc).
    • Les bibliothèques de GWT: Les fichiers archive Java (JAR) contenus dans le dossier d'installation contiennent les classes du toolkit GWT. gwt-user.jar est particulièrement important pour le développeur d'applications GWT. Il contient les classes relatives à l'interface graphique (les widgets), à l'internalisation etc. gwt-dev contient le code des outils utilisés lors du développement notamment le compilateur GWT chargé de transformer le code Java en code Javascript. Et gwt-servlet contient quant à lui les API nécessaires au développement de services RPC (Remote Procedure Call).
    • Des fichiers de commande (des scripts): GWT vient également avec un certain nombre de scripts utilitaires. Nous reviendrons dans cette partie sur l'usage de certains de ces scripts.
    • Des exemples de projets GWT: Des exemples de projets de GWT dont vous pourrez vous inspirer pour vos propres projets.
  • Eclipse : Nous différons l'installation d'Eclipse à plus tard car je souhaite que nous fassions d'abord connaissance avec GWT et son outillage.
Maintenant place à un peu de pratique! Dans la section suivante nous allons créer notre premier projet Google Web Toolkit.

Créons notre premier projet GWT?

Le script webAppCreator localisé à la racine du dossier d'installation de GWT permet de créer une application en ligne de commande. Voici comment l'utiliser :


C:\Users\nouhoum>webappcreator
Missing required argument 'moduleName'
Google Web Toolkit 2.0.3
WebAppCreator [-overwrite] [-ignore] [-out dir]
[-junit pathToJUnitJar] moduleName

where
-overwrite  Overwrite any existing files
-ignore     Ignore any existing files; do not overwrite
-out        The directory to write output files into (defaults to current)
-junit      Specifies the path to your junit.jar (optional)
and
moduleName  The name of the module to create (e.g. com.example.myapp.MyApp)


Relançons la commande en lui fournissant comme option -out HelloGWT et pour le nom du module com.nouhoum.gwt.HelloGWT.
Voici la commande complète pour créer l'application HelloGWT.
#webAppCreator -out HelloGWT com.nouhoum.gwt.HelloGWT
Not creating tests because -junit argument was not specified.

Created directory HelloGWT\src
Created directory HelloGWT\war
Created directory HelloGWT\war\WEB-INF
Created directory HelloGWT\war\WEB-INF\lib
Created directory HelloGWT\src\com\nouhoum\gwt
Created directory HelloGWT\src\com\nouhoum\gwt\client
Created directory HelloGWT\src\com\nouhoum\gwt\server
Created directory HelloGWT\src\com\nouhoum\gwt\shared
Created directory HelloGWT\test\com\nouhoum\gwt
Created directory HelloGWT\test\com\nouhoum\gwt\client
Created file HelloGWT\src\com\nouhoum\gwt\HelloGWT.gwt.xml
Created file HelloGWT\war\HelloGWT.html
Created file HelloGWT\war\HelloGWT.css
Created file HelloGWT\war\WEB-INF\web.xml
Created file HelloGWT\src\com\nouhoum\gwt\client\HelloGWT.java
Created file HelloGWT\src\com\nouhoum\gwt\client\GreetingService.java
Created file HelloGWT\src\com\nouhoum\gwt\client\GreetingServiceAsync.java
Created file HelloGWT\src\com\nouhoum\gwt\server\GreetingServiceImpl.java
Created file HelloGWT\src\com\nouhoum\gwt\shared\FieldVerifier.java
Created file HelloGWT\build.xml
Created file HelloGWT\README.txt
Created file HelloGWT\.project
Created file HelloGWT\.classpath
Created file HelloGWT\HelloGWT.launch
Created file HelloGWT\war\WEB-INF\lib\gwt-servlet.jar

Que s'est-il passé là?

En fait le script webAppCreator a généré notre application HelloGWT avec tous les fichiers nécessaires pour l'importer dans Eclipse.

Installation d'Eclipse
  • Téléchargez et installez Eclipse à partir du site d'Eclipse.
  • Rendez-vous ici pour récupérer l'URL du plugin de Google pour votre version d'Eclipse. Par exemple la version 3.6 d'Eclipse l'URL du plugin est : http://dl.google.com/eclipse/plugin/3.6
  • L'installation du plugin se fait en lançant Eclipse et en allant au menu Help/Install New Software... Il suffit ensuite de suivre les différentes étapes. 
 
Importation du projet dans Eclipse

Allez au menu File/import d'Eclipse puis choisissez l'option General et cliquez sur Existing Projects into Workspace. Ceci importe le projet dans votre espace de travail Eclipse. Maintenant que le projet est importé dans Eclipse pour l'exécuter il suffit de faire un clic sur le fichier de lancement HelloGWT.launch situé à la racine du projet et de cliquer sur Run as et hop!

Création d'un nouveau projet avec Eclipse

Vous pouvez, au lieu de passer par le script WebAppCreator, utiliser Eclipse pour créer votre application GWT. Voici comment procéder:
  • File > New > Web Application Project
  • Fournissez les informations demandées puis cliquez sur Finish pour créer le projet.


Dans les prochains articles nous nous pencherons sur la structure d'un projet GWT en nous basant sur notre exemple d'application HelloGWT puis nous modifierons son code et vous verrez combien c'est facile d'écrire une application Ajax avec GWT.
Article suivant: Anatomie d'un projet GWT.

Introduction à GWT - Partie 1 - Présentation de GWT

Leave a Comment
Cet article est le premier d’une série d’articles d’introduction à Google Web Toolkit – GWT. Je vous propose lors de cette série d’explorer le développement d’applications Ajax avec GWT. Dans un premier temps nous verrons des exemples simples qui nous permettrons de prendre en main l’outil. Ensuite nous verrons des cas plus complexes se rapprochant de ce qu’on peut rencontrer dans le « monde réel ».

Développement d’applications Ajax

Le monde avant GWT


Les applications Ajax ont connu une grande popularité depuis quelques années. Elles constituent une rupture avec les applications Web traditionnels et offrent une meilleure expérience aux utilisateurs. Le socle technologique d’Ajax est composé de (X)HTML, de DOM, de Javascript et de XML.
Afin de faciliter le développement d’applications Ajax de nombreux frameworks Javascript ont vu le jour. Malgré tous les apports de ces frameworks les caractéristiques du langage Javascript (typage dynamique, ….) et les incompatibilités des navigateurs quant au support de ce langage font que développer une application Ajax est, pour les développeurs, un véritable parcours du combattant.

En résumé cela donne:
  • Javascript est un langage puissant mais mal maîtrisé
  • Typage dynamique en Javascript (difficile de détecter les erreurs telles que des fautes de frappe avant l’exécution du script de l’application)
  • Incompatibilité des navigateurs : Le développeur doit traiter à la main les incompatibilités entre les différents navigateurs lors du développement de son application.
L’approche GWT

L’approche de GWT pour développer des applications est pour le moins originale et peut se résumer en résumer en une phrase : Traiter le Javascript comme l’assembleur l’est par les langages de programmation haut niveau tels que le C++. Un autre langage, en occurrence Java, est utilisé pour écrire le code applicatif et GWT se charge de générer le code Javascript pour les plateformes cibles : les navigateurs. Quelles sont les implications d’un tel choix ? C’est ce que nous allons voir sans tarder.

  • Apports du langage Java
Java est un langage très populaire (peut-être le plus populaire) disposant d’une très large communauté et d’un écosystème riche d’outils et de méthodologies éprouvées rendant ainsi le développement d’applications Ajax très productif.
En écrivant son application Ajax directement en langage Java le développeur tire pleinement profit des avantages de la programmation orientée objet : conception modulaire, réutilisation de codes. L’utilisation d’un IDE Java tel qu’Eclipse et les possibilités offertes par celui-ci, à savoir l’auto-complétion, le débogage, le refactoring, et d’outils de tests unitaires (JUnit notamment) permettent de détecter un grand nombre d’erreurs dès la phase de développement de l’application et de gagner en productivité.

  • Apports du compilateur de GWT

En plus du Java et de son écosystème GWT tire indéniablement sa force de son compilateur chargé de générer le code Javascript de l’application à partir de classes Java.
  1. Génération du code Javascript de l’application : Le framework GWT arrive avec un compilateur qui est chargé de générer le code Javascript de l’application à partir des classes Java écrites par le développeur.
  2. Prise en charge des incompatibilités entre navigateurs : Le développeur n’écrivant pas le code de son application en Javascript il ne s’occupe plus du traitement des incompatibilités des navigateurs quant au support de Javascript. La gestion de ces incompatibilités est laissée à la charge du compilateur Java-Javascript de GWT. Ce compilateur génère le code Javascript adéquats pour les principaux navigateurs du marché : Firefox, Chrome, Safari, IE, Opera.
  3. Optimisation du code Javascript généré : Le compilateur GWT ne limite pas à une simple génération de code Javascript mais il opère des optimisations importantes sur le code généré.

L’ensemble de ces éléments contribue à rendre productif et moins complexe le développement d’applications Ajax performantes.

Nous arrivons à la fin de ce premier article. Dans le prochain article nous préparerons notre environnement de travail et créerons notre première application GWT.


Article suivant: Préparation de l'environnement de travail 
© Nouhoum TRAORE.. Fourni par Blogger.