TP n°8 : Pages Web dynamiques§

1

Mise en place§

Créez un environnement virtuel, et récupérez ce projet. C'est une application Flask permettant d'afficher les contenus des tables Proteins et Domains de la base Ensembl.

2

Votre travail§

3

Filtrage dynamique§

La vue domain_list contient une table HTML, dont l'identifiant est domains, et sa première ligne contient un champs de saisie, dont l'identifiant est domain_filter. On souhaite pouvoir filtrer les lignes de la table, en n'affichant que les lignes dont la description contient le texte saisit.

Abonnez vous à l'événement input sur le champs de saisie, qui est déclenché à chaque modification. À chaque fois, passez en revue toutes les lignes dans le <tbody> de la table, et modifiez leur attribut CSS display en comparant le texte saisit au contenu de la 2e cellule.

Indice

  • Si txt1 et txt2 sont des chaînes de caractères, txt1.search(txt2) retourne -1 si txt1 ne contient pas txt2, et retourne la position de txt2 dans txt1 sinon.
  • Notez que n'importe quelle chaîne contient la chaîne vide.
4

Mise en évidence réciproque§

Dans la vue domain_view, la table Proteins contient toutes les protéines liées au domaine affiché, et la liste Related domains contient tous les autres domaines liés à ces protCours : Programmation coté client en Javascriptéines. On souhaite, lorsque le pointeur de la souris survole une ligne d'une de ces deux tables, mettre en évidence les lignes de l'autre table qui lui correspondent (i.e. les protéines liées au domaine survolé, ou les domaines liés à la protéine survolée).

Ces tables ont pour identifiants respectifs proteins et related. Chaque ligne de la table related a pour identifiant HTML l'identifiant du domaine correspondant. Chaque ligne de la table protein a pour classes les identifiants des domaines liés à la protéine.

Vous pourrez donc vous abonner, pour chaque ligne des deux tables, aux événements mouseenter et mouseleave. Le plus judicieux sera de créer quatre fonctions nommées (une par événement et par table), puis d'itérer sur toutes les lignes et d'abonner les fonctions appropriées à chaque ligne. Il vous faudra alors utiliser le paramètre du listener pour savoir quelle ligne est concernée par l'événement.

Indice

  • La classe highlight, définie par la feuile de style, permet de mettre en évidence une ligne de table.
  • L'attribut classList vous sera très utile.
5

Utilisation de l'API§

Pour chaque domaine, une vue HTML est disponible, mais également une vue JSON (en ajoutant l'extension .json à l'URL), qui offre donc une API utilisable par un programme.

On souhaite que, lorsque l'utilisateur clique sur la description courte d'un domaine, dans la table Related domain de la vue domain_view, la description longue de ce domaine s'affiche.

Pour ce faire, vous devrez vous abonner à l'événement click sur les cellules contenant les descriptions courtes, et faire une requête HTTP à l'API (cf. ci-dessous) pour récupérer la description longue.

Pour l'afficher, vous pourrez utiliser la fonction Javascript alert, ou rendre visible le block HTML dont la classe est dialog, en modifiant son attribut CSS display.

Indice

  • Rappelez vous que l'identifiant HTML de chaque ligne de la table est l'identifiant du domaine concerné.
  • Lorsque vous "tenez" une cellule de la table c, vous pouvez accéder à la ligne qui la contient avec c.parentNode.
  • Pour faire une requête HTTP qui récupère des données JSON, vous pourrez utiliser le modèle de code ci-dessous.
fetch(votre_url_ici)
.then((resp) => {
    if (!resp.ok) { throw("Error " + resp.status); }
    return resp.json();
}).then((data) => {
    // data contient les données JSON (sous forme d'un objet)
    // AJOUTEZ ICI le code Javascript qui traite ces données
}).catch((err) => {
    console.error(err);
});
6