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

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

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)

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

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}

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

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

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

Faculté I&C, Claude Petitpierre, André Maurer 9 Curseur template {.section rsName} {.end} {.section rsName} {.repeated {name} 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"} ] }

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 }

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

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) }

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) } ] }

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.

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}

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) }

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) {... }

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

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

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 \n' +' \n' +'{.end}' +' \n' // si no_postal n'existe pas toujours