Faculté I&C, Claude Petitpierre, André Maurer 1 JSON Templates json.org (fin de la page: json-template.js)

Présentation au sujet: "Faculté I&C, Claude Petitpierre, André Maurer 1 JSON Templates json.org (fin de la page: json-template.js)"— Transcription de la présentation:

1 Faculté I&C, Claude Petitpierre, André Maurer 1 JSON Templates json.org http://json.org (fin de la page: json-template.js) http://code.google.com/p/json-template/wiki/Reference http://json-template.googlecode.com/svn/trunk/doc/Intro ducing-JSON-Template.html http://json.org http://code.google.com/p/json-template/wiki/Reference http://json-template.googlecode.com/svn/trunk/doc/Intro ducing-JSON-Template.html

2 Faculté I&C, Claude Petitpierre, André Maurer 2 Principe du générateur par squelette

3 Faculté I&C, Claude Petitpierre, André Maurer 3 Création d'une table ( principe ) Nom de l'élève Matiere Nom 5.5 Répéter 2 x Répéter 2 x (3 x) Répéter 3 x (avec des paramètres différents)

4 Faculté I&C, Claude Petitpierre, André Maurer 4 Génération de la page ( seulement l'en-tête ) Titre {.repeated section entete} {matiere} {.end} Nom 5.5 jsontemplate.js { entete: [ {matiere: "physique"}, {matiere: "histoire"}, {matiere: "grec"} ] } Fichier complet avec remplacements Template Clés

5 Faculté I&C, Claude Petitpierre, André Maurer 5 Répétitions récursives Eleve {matiere} {nom} {n} {.repeated section col} {.end} {.repeated section ligne} {.repeated section note} {.end} {.end}

6 Faculté I&C, Claude Petitpierre, André Maurer 6 {Eleve} {.repeated section col} {matiere} {.end} {.repeated section ligne} {nom} {.repeated section note} {nb} {.end} {.end} Clés { Eleve:"Nom de l'élève", col:[ { matiere:"Epreuve 1"}, {matiere:"Epreuve 2"}, {matiere:"Epreuve 3"}], ligne:[ { nom:"Hans", note:[{nb:4},{nb:5},{nb:6} ] }, { nom:"Moritz", note:[{nb:5},{nb:5},{nb:4} ] } ] } Template

7 Faculté I&C, Claude Petitpierre, André Maurer 7 x = y = try { t = jsontemplate.Template( x ); s = t.expand( y ) } catch (e) { alert(e.message) } Compilation ( sur la page ou avant le chargement ) template clés

8 Faculté I&C, Claude Petitpierre, André Maurer 8 Commandes principales template {.section sName} {.end} {.section soName} {.or}... {#si soName pas défini} {.end} {.repeated section rName} {a} {.end} {.section a.b} {.end} objet { sName: "xxx", soName: "yyy", rName: [ {a:1}, {a:2} ] a: {b: "xx"} } # commentaire

9 Faculté I&C, Claude Petitpierre, André Maurer 9 Curseur template {.section rsName} {@} {.end} {.section rsName} {.repeated section @} {name} {.end} @ représente le nom du niveau englobant. Ce signe est appelé ici curseur. Si le nom de la section n'apparaît pas parmi les clés, elle n'est simplement pas générée. S'il n'y avait pas de section dans l'exemple 1 et pas de définition de rsName une erreur serait produite. objet { // exemple 1 rsName: "zzz" } { // exemple 2 rsName: [ {name:"vv"}, {name: "w"} ] }

10 Faculté I&C, Claude Petitpierre, André Maurer 10 Autres commandes {.meta-left} {.meta-right} // mettre un espace après ces instructions // sinon, elles ne provoquent pas de retour de ligne remplace les { remplace les }

11 Faculté I&C, Claude Petitpierre, André Maurer 11 Quelques exemples d'utilisations Structure pour un didacticiel

12 Faculté I&C, Claude Petitpierre, André Maurer 12 Calcul de moyenne dans le premier exemple ( première manière ) var keys = { Eleve:"Nom de l'élève", col:[ {matiere:"Epreuve 1"}, {matiere:"Epreuve 2"}, {matiere:"Epreuve 3"}, {matiere:"moyenne"}], ligne:[ {nom:"Hans", notes: [ {nb:4}, {nb:5}, {nb:6} ] }, {nom:"Moritz", notes: [ {nb:5}, {nb:5}, {nb:4} ] } ] } for (var i=0; i<keys.ligne.length;i++) { // calcul sur l'objet terminé var m = 0 for (var j=0; j<keys.ligne[i].notes.length;j++) { m += keys.ligne[i].notes[j].nb } keys.ligne[i].moyenne = new Number(m / keys.ligne[i].notes.length).toFixed(2) }

13 Faculté I&C, Claude Petitpierre, André Maurer 13 Calcul de moyenne dans l'objet function f() { // retourne {note: [ {nb:4}, {nb:5}, {nb:6} ], moyenne: 5 } var o = {note:[]} var v = 0 for (var i=0; i<arguments.length;i++) { o.note[i] = {nb:arguments[i]} v += arguments[i] } o.moyenne = new Number(v/arguments.length).toFixed(2) return o } var keys = {Eleve:"Nom de l'élève", col:[ {matiere:"Epreuve 1"}, {matiere:"Epreuve 2"}, {matiere:"Epreuve 3"}, {matiere:"moyenne"}], ligne:[ {nom:"Hans", notes: f(4,5,6) }, {nom:"Moritz", notes: f(5,5,4) } ] }

14 Faculté I&C, Claude Petitpierre, André Maurer 14 Pages avec des liens 1) Page d'essai {version} Accueil Précédent Suivant Comment construire des pages avec des liens sur la précédente et la suivante. Utile pour un didacticiel.

15 Faculté I&C, Claude Petitpierre, André Maurer 15 Créations de plusieurs pages avec liens ( template ) {index}) Page d'essai (version {version}) Accueil {.section precedent} Précédent {.end}{.section suivant} Suivant {.end}

16 Faculté I&C, Claude Petitpierre, André Maurer 16 Créations de plusieurs pages avec liens ( clés ) var i = 0 function index() { // index dynamique i++ return i } var keys = [ // clés crées dynamiquement, un objet par page {index:index(), titre:("Page"+i), suivant: i+1)}}, {index:index(), titre:("Page"+i), precedent: i-1)}, suivant: i+1)}, {index:index(), titre:("Page"+i), precedent: i-1)}, suivant: i+1)}, {index:index(), titre:("Page"+i), precedent: i-1)} ] var d = new Date() for (var i=0; i<keys.length;i++) { // Retouche des clés keys[i].version = d.getDate()+"."+(d.getMonth()+1)+"."+(d.getYear()+1900) }

17 Faculté I&C, Claude Petitpierre, André Maurer 17 Créations de plusieurs pages avec liens ( génération des fichiers ) try { for (var j=0; j<keys.length;i++) { t = jsontemplate.Template(inputTemplate); s = t.expand( keys [j]) File.write(location+"Pages/Page"+j+".html"], s) } } catch (e) {... }

18 Faculté I&C, Claude Petitpierre, André Maurer 18 Table de base de données ( Préparation en ligne )

19 Faculté I&C, Claude Petitpierre, André Maurer 19 Gestion de la query var s try { var q try { q = database.query("select * from membres") } catch (e) { alert(e+"\n"+database.readyQuery) } var t = jsontemplate.Template(inputTemplate); s = t.expand( {liste:q} ) // la réponse de la query est // compatible avec json-template ! } catch (e) { alert(e.message) } document.getElementById('voir').innerHTML = s

20 Faculté I&C, Claude Petitpierre, André Maurer 20 Template pour une table de BD var inputTemplate = ' \n' +' Prénom Nom No postal ' +'{.repeated section liste}' +' \n' +' {prenom} \n' +' {nom} \n' +' {.section no_postal}{@}{.end} \n' +' \n' +'{.end}' +' \n' // si no_postal n'existe pas toujours