Outils pour utilisateurs

Outils du site

Traductions de cette page?:

fr:tutorial:tutorial03

Comment créer et modifier vos propres templates ?

Si le premier Tutoriel explique les bases de la création de template, ce tutorial a pour vocation à expliquer l'organisation des fichiers lors de la création et la modification de template.

Répertoire des Templates

Les fichiers json des templates sont tous stockés dans le répertoire src/js/templates/. Le vôtre devrait y être placé également. Des sous-répertoires sont possibles.

Créez votre fichier, par exemple montemplate.json. Vous pouvez démarrer de zéro (suivez le guide), ou copier un template existant qui vous servira de base (un bon point de départ, à mon avis).

Référencer votre template

Un unique fichier référence l'ensemble des templates qui sont affichés dans Geckos : src/js/templates/load-templates.js.

Sous Windows, vous pouvez utiliser le script generate-requirejs-template.vbs pour générer ce fichier, une fois votre json créé. Le fichier load-template.js sera créé avec l'ensemble des templates présents dans le répertoire.

Modifier le fichier à la main reste possible. Il est très simple :

load-templates.js
define([
'json!templates/templates01.json',
'json!templates/montemplate.json'
],
 function(
tpl1, tpl2)
 { return { load: function() {
var list = [ ];
list.push(tpl1);
list.push(tpl2);
return list;
 
} }; });

Quand vous ne souhaitez afficher que quelques templates (ceux sur lesquels vous travaillez), il est plus simple de le modifier manuellement. Dans l'exemple ci-dessus, on n'affiche que deux templates dans Geckos.

Si vous ne référencez pas votre template dans ce fichier, il n'apparaîtra jamais dans l'interface utilisateur.

Fichiers de Ressources

Plusieurs templates utilisent des fichiers de ressource externes. Il est possible de les inclure dans le fichier template via les DataURL, mais des fichiers externes sont plus faciles à maintenir et utiliser lors du développement d'un template.

Les fichiers externes d'un template seront plus faciles à retrouver s'ils sont tous regroupés dans un même répertoire. Créez un sous-répertoire montemplate dans le répertoire src/js/templates. Vous y placerez vos images par exemple.

Lorsque vous référencerez ces fichiers dans vos templates, le point de référence sera toujours le répertoire src. Voici à quoi cela ressemblera dans le template :

"path": "./js/templates/montemplate/monfichier.png"

À nouveau, regarder et analyser des templates existants vous permettra de découvrir de nombreux trucs et astuces !

fr/tutorial/tutorial03.txt · Dernière modification: 2017/11/12 14:52 par Nicolas Ronvel