Exemple d’utilisation AngularJS, vert.x et Generic System – Génération dynamique d’une API REST

Dans ce billet nous allons voir comment réaliser simplement une API REST dynamiquement générée à partir du modèle de données en utilisant Generic System dans un environnement non-JEE avec AngularJS et vert.x.

Configuration Environnement

Maven

Modèle de données

Comme dans l’exemple JSF, nous utilisons la configuration statique de Generic System pour mettre en place notre modèle de données. Pour cela, nous créons deux classes : Car et Power.

Car.java

Ici Car est un type, afin de le spécifier à GS il nous suffit d’ajouter l’annotation @SystemGeneric.
L’annotation @Table permet d’associer une chaîne de caractères au type concerné.

Power.java

Ici Power est une propriété de Car qui prend comme valeur des entiers. Pour le spécifier à GS nous utiliserons les annotations :

  • @Components qui permet de définir notre composant Car ;
  • @PropertyConstraint qui permet de spécifier que c’est une propriété ;
  • @InstanceValueClassConstraint qui permet de restreindre la classe des valeurs (ici des entiers) ;
  • @Column permet d’associer une chaîne de caractères à l’attribut concerné.

Serveur vert.x

Nous allons ensuite créer un serveur avec vert.x.
Pour cela, nous créons une classe Server qui est un Verticle, l’unité de travail de vert.x. Dans cette classe nous utilisons la méthode start() au sein de laquelle nous allons créer notre API REST.
Nous déclarons un router permettant de gérer les requêtes http.
Ayant besoin d’un cache pour travailler avec GS, nous créons une session vert.x dans laquelle nous déposons le cache GS.

Afficher les données

Nous allons afficher les données de notre modèle sur des pages HTML grâce à AngularJS.
Tout d’abord nous relions la vue avec le module angular dans un index.html.
Depuis la version 1.1 d’angularJS, le fichier angular-route.js doit être intégré indépendamment d’angular.js :

Voici notre module angular dans lequel nous indiquons quel “controller” utiliser suivant la page HTML affichée :
Il est à noter que depuis la version 1.1, ngRoute doit être placé en paramètre.

Au lancement de l’application, c’est le “controller” IndexCtrl qui est invoqué. Celui-ci réalise une requête de type GET qui va nous permettre de récupérer les types d’objets disponibles et de les afficher dans la page home.html.
Nous devons donc rajouter dans notre serveur le handler correspondant.
Etant donné que nous allons travailler avec angular, les données seront partagées sous forme de JSON. Ainsi, grâce à la méthode getGSJsonCRUD(), nous construisons en premier lieu un tableau d’objets JSON contenant les informations disponibles dans le modèle : les types d’objets disponibles ainsi que leurs attributs éventuels :

Celui-ci renvoie le tableau d’objets JSON généré au lancement du serveur.

le home.html :

Voilà le résultat obtenu :

snapshot_angular_gs_example1

En sélectionnant le type qui nous intéresse, nous allons alors afficher la liste des instances associées. Nous pourront alors comme dans tout CRUD qui se respecte en créer de nouvelles, les modifier, les effacer.
Nous modifions en conséquence notre javascript en rajoutant les “controller” nécessaires :

et dans notre serveur en rajoutant les handler requis. Comme nous pouvons avoir plusieurs types disponibles, nous générons notre API REST pour chaque type :

Nous affichons les instances du type sélectionné grâce à notre page list.html :

Notre formulaire add-new.html nous permettant d’ajouter de nouvelles instances :

Et le edit.html qui permet de modifier les instances existantes :

Voilà le résultat obtenu pour la liste des instances :

snapshot_angular_gs_example2

Pour remplir cette liste il nous suffit d’ajouter de nouvelles instances :

snapshot_angular_gs_example3
snapshot_angular_gs_example4

Nous pouvons modifier les instances créées :

snapshot_angular_gs_example5
snapshot_angular_gs_example6

Enregistrement et annulation

Comme précisé dans l’exemple JSF, l’enregistrement ne se fait actuellement que sur le cache, il faut donc ajouter un bouton pour flusher les modifications et un autre pour les annuler.
Si plusieurs personnes travaillent sur le même graphe, chacun possède son propre cache qui est une image du graphe à un instant donné, et ne voit pas les modifications apportées par les autres. Cependant, il est possible de visualiser tout changement persisté en effectuant un “décalage temporel” sur son cache. Nous allons donc ajouter un bouton correspondant à cette fonction.

Nous ajoutons nos boutons à notre list.html :

Nous rajoutons ensuite à notre serveur les handlers correspondants :
Et enfin on ajoute les fonctions au controller listCtrl :