INTRODUCTION A JQUERY UI

Introduction

Généralités

jQuery UI est une bibliothèque basée sur jQuery qui permet de l'enrichir de composants d'interface homme machine comme des onglets, des calendriers, des menus, etc ...

Vous pouvez obtenir jQuery UI de deux manières :

Une fois le fichier téléchargé et décompressé, le répertoire jquery-ui-1.11.4 contient les deux sous-répertoires et les neufs fichiers ci-dessous.

Application à réaliser

L'objectif de ce TP est de réaliser une application cliente sous jQuery UI mettant en oeuvre trois fonctionnalités : Les onglets, le calendrier et le complètement automatique.

Mise en oeuvre des onglets

Introduction

La génération d'onglets sous jQuery UI est établie à partir de 4 tags :

Etude à réaliser :

  1. Se connecter sur le site de jQuery UI et se rendre dans le menu Widgets/Tabs.
  2. Cliquer sur View Source afin d'étudier le code jQuery UI de l'exemple.
  3. Repérer les tags énoncés ci-dessus.

Développement

  1. Compléter le code ci-dessous afin d'obtenir le squelette d'une application comprenant trois onglets "Acquisition", "Date" et "Autocompletion". 
    <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="jquery-ui.css" rel="stylesheet">
    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <script>

    </script>
  </head>
  <body>

  </body>
</html>
  2. Insérer, dans le contenu de l'onglet "Acquisition" le traitement demandé dans le cahier des charges. Le valeur retournée par le serveur sera un nombre pris au hasard entre 3 et 75. On utilisera un code similaire à celui étudié lors du TP7 sur l'introduction à Ajax et à jQuery.

Mise en oeuvre d'un calendrier

Introduction

L'objectif est de faciliter la saisie d'une date dans un champ d'édition de formulaire. La date saisie sera envoyée au serveur via ajax. Le script serveur qui traitera la requête retournera la date au client. La date saisie par l'utilisateur sera affichée pour valider le fonctionnement.

Etude à réaliser :

  1. Se connecter sur le site de jQuery UI et se rendre dans le menu Widgets/Datepicker.
  2. Cliquer sur View Source afin d'étudier le code jQuery UI de l'exemple.

Développement

  1. Compléter le code précédent afin de faire apparaître un calendrier lors du clic sur la zone d'édition.
  2. Rechercher, dans la documentation de Datepicker, la signification de l'option onSelect.
  3. Mettre en place une fonction associée à l'événement précédent pour effectuer une requête ajax sur le serveur qui sollicite le script "script.php" ci-dessous.
  4. Valider le bon fonctionnement de l'application telle que préconisée par le cahier des charges.

Fichier "script.php" :

<?php
  $date=$_REQUEST["date"];
  $txt="Date retournee par le serveur : ".$date;
  echo $txt;
?>

La gestion de la requête ajax à partir de l'événement se fait à partir du code ci-dessous, à compléter.

<script>
$("*****").datepicker({
  onSelect : function(datechoisie) {
    var donnee={date : datechoisie};
    $.ajax({
      url : "*******",
      data : *******,
      complete : function(xhr,resultat) {
        var reponse = xhr.responseText;
        $("*******").html (*******);
      }
    });
  }
});
</script>

Mise en oeuvre de l'autocomplétion

Introduction

L'autocomplétion permet d'accompagner la saisie de l'utilisateur dans une boîte d'édition afin de lui proposer une série de mots ou chaînes de caractères pouvant correspondre à ce qu'il vient de frapper.

Dans le cadre du TP, il s'agit de valider le fait que chaque frappe occasionne une requête serveur. En temps normal, le serveur interrogerait une BDD afin de retourner la liste des chaînes de caractères pouvant correspondre à la saisie.

Dans le TP, deux chaînes de caractères constantes seront renvoyées par le serveur ainsi que le texte en cours de frappe, afin de valider le fonctionnement global.

Etude à réaliser :

  1. Se connecter sur le site de jQuery UI et se rendre dans le menu Widgets/Autocomplete.
  2. Cliquer sur View Source afin d'étudier le code jQuery UI de l'exemple.

Développement

  1. Soit le script sollicité à chaque frappe clavier pour assurer l'autocomplétion : 
    <?php
  $txtclient=$_REQUEST["texteclient"];
  echo "<li>Proposition 1</li>";
  echo "<li>Proposition 2</li>";
  echo "<li>".$txtclient."</li>";
?>
    Que fait ce script ? Sauvegarder le code dans un fichier php.
  2. Soit les lignes de code jQuery / jQuery UI permettant d'assurer l'autocompletion : 
    <script>
$("#saisie").autocomplete({
  source : function(requete, callback) {
    var donneeserveur={ texteclient : requete.term};
    $.ajax({
      url : "*****",
      data : *****,
      complete : function(xhr,resultat) {
        var reponse=*****;
        var propositions=[];
        $(reponse).filter("li").each(function() {
          propositions.push($(this).text());
        });
        callback(propositions);
      }
    });
  }
});
</script>
    Quel est l'id du champ d'édition (tag ) dans lequel sera assuré l'autocomplétion? Par quels moyen est récupérée la saisie en cours? A quoi sert le tableau propositions?
  3. Compléter et mettre en œuvre le code précédent (en s'appuyant sur ce qui a été déjà fait) afin d'assurer, avec le script du 1, l'autocomplétion du champ de saisie comme indiqué dans le cahier des charges.

Valider en visualisant notamment sous Firebug :