jQuery, Template, Plugin, API, json – Utiliser un système de template jQuery pour consommer des json afin de valider des maquettes HTML
Une des choses les plus ennuyeuses si vous travaillez sur une API qui vous fournit essentiellement des flux JSON, c’est la difficulté à valider la pertinence des règles fonctionnelles concernant la génération de ces mêmes flux.
En clair, si le flux JSON est censé vous retourner les derniers articles publiés de la catégorie “Mobile” taggués “Android” et “Apple”, il vaut bien mieux pouvoir visualiser le rendu HTML beaucoup plus facile à valider d’un point de vue éditorial (on dit aussi métier) qu’un pauvre flux JSON. On ne peut valider souvent que ce que l’on voit, c’est humain !. C’est donc une approche plus UX oriented et donc plus agile.
Cette démarche est tout particulièrement intéressante pour les Graphistes/Intégrateurs/UX designers qui souhaitent faire valider une intégration de maquettes ou d’IHM. En effet, la dichotomie entre le contenu affiché (images, texte, lien…etc.) et le scénario utilisateurs ou l’expérience UX est parfaite. On peut donc faire évoluer ces deux éléments essentiels que sont le contenu et le design en parallèle et sans interférences (on dit plus communément des bugs)
C’est pour cette raison que dans cet article, on va s’intéresser aux template jQuery afin de résorber facilement cette difficulté.
Une raison aux choix de JQuery que PHP pour décoder du JSON :
- C’est client-side et non server-side. Vous n’êtes pas dans l’obligation de faire tourner le tout sur un serveur même en local pour générer vos rendus HTML comme pour PHP par exemple. On peut donc envoyer le tout au client/métier et lui faire valider par simple chargement dans un navigateur.
Vous pourriez rencontrer un problème lorsque vous essayez de lire le document JSON si vous ne mettez pas ce code sur un serveur. Pour des raisons de sécurité certains navigateurs tel que Google Chrome ne vous permettent pas de charger des fichiers externes sur les dossiers locaux. Si vous devez charger un fichier .json en local, le mieux est donc d’utiliser firefox, safari ou tout simplement charger le fichier appelant la source de données au format .json sur un serveur en local type WAMP, MAMP ou EASYPHP.
Dans la série des système de template, on publiera très prochainement un article sur un framework de template nommé mustache mais bon l’instant, on part avec le plus évident et le plus facile, à savoir jQuery et des plugins bien choisis.
On va utiliser pour cette démonstration bien évidemment deux ressources essentielles : jQuery et le plugin jQuery Templates.
- Le framework jquery-1.10.2.min.js
http://code.jquery.com/jquery-1.10.2.min.js - Le plugin jQuery : jQuery Templates Plugin 1.0.0pre
http://github.com/jquery/jquery-tmpl
Utiliser une source .json avec une template jQuery
ajax_1.html
Page dont la source est un fichier.json.ajax_if_2.html
Page dont la source est un fichier.jsonavec une conditionifsur l’affichage de l’image par défaut.
Chargement de ajax_1.html
Chargement de ajax_if_2.html
data.json pour ajax_if_2.html
La source de données au format .json dans le cas de ajax_if_2.html.
{ "books" : [ { "imgSrc":"cover1.jpg", "title":"Captain America", "description":"Stars and Stripes jusqu'au slip", "year":"2010", "number":"1" }, { "imgSrc":"cover2.jpg", "title":"Rescue", "description":"La vierge de fer", "year":"2011", "number":"2" }, { "imgSrc":"cover3.jpg", "title":"Hulk", "description":"Eco warrior", "year":"2012", "number":"3" } ] } |
ajax_1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Template</title>
<style type="text/css">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Styling
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
body {
font-family: Tahoma,Trebuchet,Arial,Verdana,"Bitstream Vera Sans",sans-serif;
font-size: 12px;
background-color: #fff;
padding: 10px;
margin: 5px 8px 13px 0;
width: 90%;
}
.book {
background:#efefef;
width:200px;
position: relative;
padding: 20px 20px 20px 20px;
margin: 0px 20px 0px 0px;
display: inline-block;
-webkit-box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);
}
.book img {
background-color: #F6F6F6;
border: 1px solid #CFCFCF;
padding: 12px;
}
.book h3 {
font-size:24px;
}
.book .description {
font-size: 14px;
text-align: left;
margin: 10px 0;
padding: 0;
}
</style>
</head>
<body>
<div id="output"> </div>
<script src="_static/js/jquery-1.10.2.min.js"></script>
<script src="_static/js/plugins.js"></script>
<script>
$(document).ready(
function(){
var PopulateBook = function(data){
console.log(data.books);
$("#catalogue").tmpl(data.books).appendTo( "#output" );
}
$.ajax({
type: 'get',
url: 'data.json',
success : PopulateBook,
dataType: "json"
}
)
}
);
</script>
<!-- end scripts -->
<script id="catalogue" type="text/x-jquery-tmpl">
<div class="book"><img src="${imgSrc}" />
<div class="details">
<div class="title">
<h3>${title}</h3>
</div>
<div class="description">
<strong>Description :</strong> ${description}
</div>
<div class="year">
<strong>Année :</strong> ${year}
</div>
<div class="number">
<strong>Numéro du magazine :</strong> ${number}
</div>
<div class="themes">
<ul>
{{each themes}}
<li>${$value}</li>
{{/each}}
</ul>
</div>
</div>
</div>
</script>
</body>
</html> |
data.json pour ajax_if_2.html
La source de données au format .json dans le cas de ajax_if_2.html.
{ "books" : [ { "imgSrc":"cover1.jpg", "title":"Captain America", "description":"Stars and Stripes jusqu'au slip", "year":"2010", "number":"1" }, { "imgSrc":"cover2.jpg", "title":"Rescue", "description":"La vierge de fer", "year":"2011", "number":"2" }, { "imgSrc":"", "title":"Hulk", "description":"Eco warrior", "year":"2012", "number":"3" } ] } |
ajax_if_2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Template</title>
<style type="text/css">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Styling
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
body {
font-family: Tahoma,Trebuchet,Arial,Verdana,"Bitstream Vera Sans",sans-serif;
font-size: 12px;
background-color: #fff;
padding: 10px;
margin: 5px 8px 13px 0;
width: 90%;
}
.book {
background:#efefef;
width:200px;
position: relative;
padding: 20px 20px 20px 20px;
margin: 0px 20px 0px 0px;
display: inline-block;
-webkit-box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);
}
.book img {
background-color: #F6F6F6;
border: 1px solid #CFCFCF;
padding: 12px;
}
.book h3 {
font-size:24px;
}
.book .description {
font-size: 14px;
text-align: left;
margin: 10px 0;
padding: 0;
}
</style>
</head>
<body>
<div id="output"> </div>
<script src="_static/js/jquery-1.10.2.min.js"></script>
<script src="_static/js/plugins.js"></script>
<script>
$(document).ready(
function(){
var PopulateBook = function(data){
console.log(data.books);
$("#catalogue").tmpl(data.books).appendTo( "#output" );
}
$.ajax({
type: 'get',
url: 'data.json',
success : PopulateBook,
dataType: "json"
}
)
}
);
</script>
<!-- end scripts -->
<script id="catalogue" type="text/x-jquery-tmpl">
<div class="book">
{{if imgSrc}}
<img src="${imgSrc}" />
{{else}}
<img src="default.jpg" />
{{/if}}
<div class="details">
<div class="title">
<h3>${title}</h3>
</div>
<div class="description">
<strong>Description :</strong> ${description}
</div>
<div class="year">
<strong>Année :</strong> ${year}
</div>
<div class="number">
<strong>Numéro du magazine :</strong> ${number}
</div>
</div>
</div>
</script>
</body>
</html> |
Conclusion : Il existe de nombreux avantages à utiliser un système de templates à l’aide de jQuery. Le premier d’évidence comme dans tout système de template est de séparer le contenu de l’UX, de l’expérience utilisateur (comportement des pages). On peut donc affiner, valider, de manière agile, les règles fonctionnelles par un grand nombre d’itérations rapides, le tout côté client/métier sans avoir à passer par une boucle de développement chronophage.
En savoir plus
- Convert JSON in JavaScript
http://coursesweb.net/javascript/convert-json-javascript - Comment traiter du JSON pour produire du HTML en Javascript ?
http://blog.touv.fr/2008/11/comment-traiter-du-json-pour-produire.html - How To Read JSON Using JQuery
http://webhole.net/2009/11/28/how-to-read-json-with-javascript/ - Le plugin jQuery : jQuery Templates Plugin 1.0.0pre
http://github.com/jquery/jquery-tmpl - Le framework jquery-1.10.2.min.js
http://code.jquery.com/jquery-1.10.2.min.js - jQuery
http://jquery.com/
