Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Implémentation d'une ressource côté client Javascript

Dans cette section, nous décrivons d'abord la manière d'ajouter un modèle côté Javascript. Celui-ci aura pour tâche de communiquer avec le serveur selon les principes REST. Nous décrivons ensuite la manière de l'utiliser via un exemple concret pour chaque opération possible (GET, POST, PUT, DELETE) et la façon de générer des vues HTML pour afficher les résultats.

Outils

L'interface Web Cytomine est une application écrite en Javascript. Lorsqu'un utilisateur se connecte à l'adresse du serveur avec un navigateur Web, le serveur lui envoie l'entièreté de l'application, dont les fichiers sources ont été fusionnés et minimisés dans un fichier unique appelé application.js. L'application fonctionne de manière autonome et contient le code logique pour communiquer avec l'API Web.

...

  • Model : objet qui contient les données d'une ressource (par exemple le nom et prénom pour une ressource user). Il connaît également l'URL de la ressource dont il contient les données. Il propose notament trois méthodes pour communiquer avec le serveur, toujours sur les principes REST :
    • fetch() : effectue une requête HTTP GET sur l'URL de la ressource. La méthode renvoie un modèle contenant les données de la ressource obtenue.
    • save() : effectue soit une requête POST si la ressource n'existe pas sur le serveur, soit une requête PUT si la ressource existe au préalable. Les données du modèle sont automatiquement envoyés via le corps (body) de la requête HTTP. La méthode renvoie soit le nouveau modèle, soit le modèle mis à jour.
    • destroy() : effectue une requête DELETE sur l'URL de la ressource. Le résultat est une suppression de la ressource côté serveur. La méthode indique si l'opération est un succès ou non.
  • Collection : une collection est un ensemble de Model. Elle permet de contenir les modèles d'une même ressource, par exemple l'ensemble des user. Elle propose également des méthodes pour parcourir, comparer et trier les modèles.
  • Controller/Router : un Router (l'ancien nom est Controller) permet de définir les routes (URLs) de l'application Web et de leur associer des actions. Ainsi, lorsqu'un utilisateur navigue sur une URL présente dans un Router, l'action associée est automatiquement exécutée par le Router.
  • View : une vue (View) est un objet qui a pour tâche d'effectuer le rendu HTML d'un composant de l'interface. Elle est souvent, mais pas forcément, associée à un modèle ou à une collection. Elle a également la responsabilité de dispatcher les évènements que l'utilisateur déclenche dans la page HTML générée (survol d'un élément, click souris, ...).

Création d'un domaine et d'une collection

L'étape de création d'un modèle consiste à étendre l'objet Model présent dans la librairie Backbone et à définir la méthode url(). Cette méthode renverra les URL associées à la ressource dont on écrit le modèle, avec comme préfixe $CYTOMINEURL. Ces URLs sont définies par le serveur (URL mappings), comme expliqué précédemment. On peut également définir une méthode validate() pour imposer certaines contraintes. Cette méthode est appelée avant toute opération (fetch()save() et destroy()). Dans le cas où elle échoue, la requête HTTP n'a pas lieu. Cela permet d'éviter de faire des requêtes inutiles côté serveur si la ressource n'est pas valide (exemple : champs requis inexistant). Notons également qu'il n'est pas nécessaire de définir les attributs liés à un user (firstname, lastname, ...) car ils seront dynamiquement définis en fonction de la réponse du serveur. Cela procure évidemment une grande flexibilité et un gain de temps non négligeable lors du développement de l'application.

...

Code Block
titleRécupération de tous les _user_
var users = new UserCollection().fetch({
    success: function (collection, response) {
        //les modèles user ont bien été obtenus
    },
    error: function (collection, response) {
        //une erreur s'est produite
    }
});

Création de la vue

Pour rappel, une vue (View) est un objet qui a pour tâche d'effectuer un rendu HTML dans la page Web et d'intercepter les évènement sur celle-ci.
On passe généralement deux variables importantes à la vue :

...

Un cas d'utilisation de la vue est expliqué dans la création du Router.

Création du Controller/Router

Comme dit précédemment, un Router permet de faire correspondre des urls à une action que l'utilisateur peut effectuer dans l'interface.
Nous prenons le cas d'un lien existant dans une page html dont la cible est "user/list". Lorsque l'utilisateur effectue un click sur ce lien, le routeur concerné détecte l'évènement et déclenche l'action associée. Dans ce cas-ci, l'action sera de lister les users. Un tel contrôleur se définit comme suit :

...