 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 05:44, 28 Sep 2016 par MichelBuffa
Accueil > Intranet Michel Buffa > Cours HTML5/NodeJS/Angular etc. Master 2 NTDP 2016-2017 > HTML5 : exercice fil rouge sur formulaire, tableau, persistence, drag'n'drop, Ajax
HTML5 : exercice fil rouge sur formulaire, tableau, persistence, drag'n'drop, AjaxDe $1Table des matières
Exercice fil rouge : un gestionnaire de contacts téléphoniquesPartie 1 : écriture d'une page de "template" pour la saisie et l'affichage de contacts dans un tableauObjectif : réaliser une page HTML structurée avec les nouvelles balises HTML5 pour servir de « template » à l'application: <header>, <footer>, <section>, <article>, <nav>, <aside>, révision sur les tables HTML avec <table><thead><th><tbody><tr><td>... Insister sur le fait que la spec recommande d'utiliser des <header><h1> si on vise les browsers récents, mais que si on vise les anciens, utiliser <Hn> à la place. Dans tous les cas ne pas se reposer sur la CSS par défaut. Travail à faire : Dans un répertoire dédié à l'exercice (e.g. exercice1), créer une page HTML nommée index.html utilisant les nouveaux éléments cités dans le cours :
Exemple de résultat que l'on désire obtenir:
Note pour les formateurs:
Sur l'exemple, la barre de navigation permet théoriquement de se déplacer vers les différents écrans de l'application. En réalité, la page d’accueil n'existe pas (le lien pointera sur une page inexistante ou surla même page). Cette barre correspond à une balise <nav>. Les libellés de cette barre sont encapsulés dans une liste d'items non-ordonnés (balises <ul> et <li>) La page contient une grande <section> et deux <article>, un pour le formulaire de saisie / modification à) venir, l'autre pour la présentation des contacts sous forme de tableau. N'oubliez pas la bonne pratique du cours qui dit que chaque "sectionning element" doit être immédiatement suivi d'un <header><h1>... Le second <article> contient donc un élément <table>. Sur la droit, la balise <aside> contiendra les dernières actions effectuées dans l'application, là encore sous forme de liste d'actions (balises <ul> et <li>). Le <footer> de l'application a été positionné de manière fixe, il doit être présent et visible même si on scrolle la page (voir "positions" en CSS). Partie 2 : ajout d'un formulaire permettant l'ajout de contactsObjectif : Appréhender les nouveaux éléments <input> de HTML5, quelques nouveaux attributs Travail à faire : Dans la partie correspondant au premier <article> de la page créée dans l'exercice 1, créer un formulaire permettant l'ajout de clients en utilisant les types de balise <input> appropriés. Ce formulaire apparaitra "à la demande" car on le mettra à l'intérieur d'éléments <summary><details>. Attention, ces éléments ne sont pas supportés par tous les navigateurs. Vous testerez avec Google Chrome ou Opera pour le moment. Cette limitation sera l'occasion de voir ensemble l'utilisation d'un "polyfill" (outils permettant la rétro-compatibilité). Contraintes à prendre en compte :
Il est recommandé d'utiliser des balises <label> pour le libellé des champs. Ainsi lorsque l'utilisateur cliquera sur le libellé, le focus sera automatiquement positionné sur le champ <input> correspondant. De même, il est recommandé d'utiliser une balise <fieldset> et <legend> pour la « décoration » du formulaire. Les libellés entourant le champ <input> de type range (i.e. 0 et 5) sont en dur dans la page. Voici un exemple de réalisation :
Partie 3 : Validation "statique" du formulaire + feedback CSSObjectif : appréhender la validation « statique » (i.e. sans JavaScript) et les règles CSS spécifiques aux champs <input> de HTML5... Travail à faire : On continue à tavailler à partir de l'exercice précédent.. On va rajouter quelques attributs sur les champs de saisie et ajouter des règles CSS pour avoir un "feedback visuel" lors de la saisie. Contraintes :
Exemple de résultat :
Note pour les formateurs :
Partie 4 : validation dynamique depuis les APIs de validation de formulaires de HTML5Objectif :nappréhender l'API JavaScript de validation des formulaires. Travail à faire : Implémenter les règles suivantes :
Plusieurs méthodes sont envisageables:
On pourra rajouter des ids aux champs de saisie, ou bien utiliser l'API du DOM au niveau du formulaire. En effet, l'objet DOM document.forms retourne un tableau de tous les éléments DOM correspondant aux balises <form> du document. Dans un objet DOM correspondant à la balise <form>, il est possible de pointer sur les éléments DOM correspondants aux balises <input> par leur nom. Par exemple, si une balise <input> possède un attribut name="nom", l'expression document.forms[0].nom retournera l’élément DOM correspondant. A vous de prendre la méthode que vous préférez. La propriété "valueAsDate" d'un élément DOM associé à une balise <input type="date"> de type date (e.g. le champ date de naissance) retourne la date saisie sous forme d'un objet de type Date. Deux objets de type Date ne nécessitent pas de traitement particulier pour être comparés : deux objets de type Date peuvent donc être comparés entre-eux avec les opérateurs <, >, ==, != ... La propriété "valueAsNumber" d'un élément DOM associé à une balise <input> de type range (e.g. Le champ Nombre d'enfants) retourne la valeur saisie sous forme d'une valeur de type number. On n'utilisera pas de polyfills ici, vous avez compris le principe lors des exemples vu dans la partie 2. Vous testerez donc cette partie avec un navigateur supportant <input type="date"> Toutefois si vous désirez investiguer, vous pourrez aller voir ce polyfill ou celui là. Exemple de résultat :
 Note pour les formateurs :
Partie 5 : Sauvegarde de contact dans le LocalStorageObjectif :utiliser l'API localStorage pour écrire des données. Travail à faire : Modifier l'application pour que le formulaire permette de stocker les données saisies dans le localStorage, sous la forme d'un tableau d'objet (des contacts) au format JSON. Chaque case du tableau contiendra les informations d'un contact. Le formulaire aura donc pour rôle d'ajouter un objet dans ce tableau lors de la validation du formulaire, puis de l'enregistrer dans le localStorage. L'ajout des données est fait dès que l'utilisateur valide les données du formulaire, c'est à dire au moment où l'élément DOM correspondant à la balise <form> lève l’événement submit. (form onsubmit=... par exemple). Avant de modifier l'exemple fil rouge, vous commencerez par étudier ce petit exemple qui montre comment écrire un tableau de données au format JSON : http://jsbin.com/nacoho/6/edit
Vous pouvez vérifier que la sauvegarde est correcte en ouvrant les devtools e Google Chrome par exemple (F12 ou cmd alt i sur mac), et en allant dans l'onglet "ressources":
Maintenant, en vous inspirant de ce petit exemple, modifiez le programme fil rouge pour que les données saisies dans le formulaire s'ajoutent à un tableau nommé "contacts" et que ce tableau soit sauvegardé au format JSON dans le localStorage. Vous veillerez à ce que lorsqu'on relance le programme le tableau précédemment sauvegardé soit restauré.  Vous veillerez à être capables d'ajouter des contacts : vérifiez bien que le tableau dans le localStorage "grandit". Fermez et ouvrez l'onglet de la page de votre application, les données doivent être persistantes. Pour les formateurs :
Partie 6 : lecture de contacts dans le localStorage et affichage dans le tableauObjectif : continuer avec localStorage, manipuler l'API du DOM de JavaScript, les tableaux... Travail à faire : cette fois-ci vous allez modifier votre code pour que le tableau de contacts lu sitôt la page chargée, soit affiché dans le tableau. Vous ferez également en sorte que lors de la saisie d'un nouveau contact, le tableau soit rafraichi.
Exemple de résultat :
Note pour les formateurs :
Partie 7 : suppression d'un client par drag'n'dropObjectif : premiers pas avec l'API HTML5 du Drag and drop.
Travail à faire :
Exemple de résultat :
Note pour les formateurs :
Partie 8 : ajout de quelques règles CSS3 (webfonts, arrondis, ombres, etc.)Objectif : appréhender quelques nouveautés de CSS3
travail à faire :
A partir d'une feuille de style dédiée à l'application, ajouter des règles pour :
Exemple de résultat :
Note pour les formateurs :
Partie 9 : jouer avec les transitions CSS3Objectif : apprendre à utiliser les transitions et animations HTML5
Travail à faire :
Note pour les formateurs :
Partie 10 : interface avec un Web Service REST via Xhr2 / JSONObjectif : appréhender la communication HTTP avec du JSON en s'appuyant sur l'API XHR2.
Important : pour cet exercice vous ne pourrez plus utiliser jsbin.com, il est impératif que l'application soit dans des fichiers car nous allons travailler avec un serveur nodeJS dédié.
Travail à faire :
L'application serveur gère les requêtes suivantes :
Code serveur, à faire exécuter par nodeJS ("node server.js") :
var http = require("http");
var URL = require("url");
var contacts = [];
var headers = {
"Content-Type" : "application/json",
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Headers" : "origin, content-type, accept",
"Access-Control-Allow-Methods" : "GET, POST"
};
http.createServer(function(request, response) {
var buffer = "";
request.on("data", function(chunk) {
buffer += chunk;
});
request.on("end", function() {
var data;
var pathname = URL.parse(request.url, true).pathname;
if (request.method == "GET" && pathname == "/contacts") {
response.writeHead(200, headers);
response.end(JSON.stringify(contacts));
} else if (request.method == "POST" && pathname == "/contacts/new") {
response.writeHead(200, headers);
try {
data = JSON.parse(buffer);
} catch (e) {
}
if (data) {
contacts.push(data);
response.end(JSON.stringify({}));
} else {
response.end(JSON.stringify({
error : true
}));
}
} else if (request.method == "OPTIONS") {
response.writeHead(200, headers);
response.end();
} else {
response.writeHead(403, headers);
response.end();
}
});
}).listen(8084);
Pour lancer le serveur, ouvrir une invite de commande, copier le code ci-dessus dans un fichier server.js, l'exécuter en tapant la commande "node server.js"
Note pour les formateurs :
Partie 11 : faire fonctionner l'application en mode offline, utilisation du cache HTML5Objectif : rendre l'application disponible en mode déconnecté. Travail à faire :
Note pour les formateurs :
Mots clés:
|
|||||||||
Powered by MindTouch Deki Open Source Edition v.8.08 |
Note pour les formateurs :
