Project

General

Profile

Personnalisation de l'interface publique » History » Version 22

Simon, 07/04/2012 01:35 PM

1 18 Simon
{{>toc}}
2 1 Simon
3 22 Simon
h1. Personnalisation de l'interface publique
4 1 Simon
5
6 17 Simon
7
8
h2. Les thèmes
9
10
11 20 Simon
Pour ajouter un thème, procéder en 3 étapes :
12
* Dupliquer le dossier _/templates/public/default/_ et renommer le (par exemple en _/templates/public/montheme/_ ).
13 17 Simon
* Rendez-vous sur l'interface d'administration, menu _configuration_. Dépliez l'onglet _look'n feel_. Votre nouveau thème apparaît et vous pouvez désormais le sélectionner.
14
* Modifiez les fichiers contenus dans _/templates/public/montheme/_ à votre convenance.
15 6 Anthony
16 1 Simon
17 2 Simon
18 17 Simon
h2. Les templates et l'override
19 1 Simon
20 17 Simon
21
Vous souhaitez modifier une page ou ajouter dynamiquement du contenu en créant vos propres fonctions, c'est possible. Tous les fichiers contenus dans _/public/dist/_ peuvent être réécris. 
22
23 6 Anthony
La logique de l'application est simple : Si l'utilisateur a défini son fichier alors celui-ci est prioritaire sur le fichier par défaut. 
24 1 Simon
25 17 Simon
Par exemple, pour la page d'accueil, linea21 charge par défaut le fichier _/public/dist/tpl_home.php_. Si vous souhaitez modifier ce fichier, copiez _tpl_home.php_ dans _/templates/public/montheme/_ et faites vos modifications. Rafraîchissez la page depuis votre navigateur, vous constaterez que les changements ont étés pris en compte.
26 1 Simon
27 11 Simon
Vous pouvez redéfinir de la même façon un fichier de l'application en utilisant un dossier d'override.
28 1 Simon
Attention, ce dossier doit contenir la même arborescence que le fichier d'origine.
29 8 Simon
Par exemple pour redéfinir le fichier de configuration de tinyMCE pour votre thème admin contenu dont le chemin est /lib/js/tinyMCE/jscripts/tiny_mce/config.js
30
recréer la même arborescence dans le répertoire de votre thème pour personnaliser ce fichier ce qui donnera : /templates/admin/montheme/override/lib/js/tinyMCE/jscripts/tiny_mce/config.js
31
32
33 1 Simon
34 17 Simon
h2. Le fichier _display.php_
35
36
37 8 Simon
Il est possible d'implémenter vos propres fonctions d'affichage, définir des traitements ou même re-définir les fonctions livrées avec l'application.
38
39
Prenons un exemple concret :
40
41
Je souhaite pouvoir utiliser ma propre fonction hello_world() dans le module d'actualités.
42
43
Je créer donc le fichier /templates/montheme/override/news/display.php avec le code suivant :
44 1 Simon
45 17 Simon
<pre>
46
<code class="php">
47 1 Simon
include_once('../news/display.php');
48
49
// no need if the default module file is included
50 8 Simon
// include_once(themePath('../news/' . SQL . '.inc.php'));
51
52
53 1 Simon
function hello_world() {
54
  return 'hello World !';
55
}
56
57 19 Simon
function DisplayOneNews($news_id) [
58 1 Simon
  echo hello_world();
59 8 Simon
  // la suite de mon traitement
60
}
61 17 Simon
</code></pre>
62 1 Simon
63 17 Simon
La première ligne de code me permet d'inclure les méthodes de base (sans avoir à les redéfinir - *version >= 1.4* ).
64
65 1 Simon
J'inclue le fichier SQL si je choisis de ne pas faire appel au fichier de référence du module. Dans le cas contraire (comme dans cet exemple), il est appelé automatiquement.
66
67 8 Simon
Je définis ma fonction hello_world() jusqu'alors inexistante.
68 1 Simon
69 17 Simon
Enfin, je re-définis la fonction DisplayOneNews() afin qu'elle réalise l'appel à ma fonction précédemment définie. Le "comportement de PHP concernant les fonctions conditionnelles":http://www.php.net/manual/fr/functions.user-defined.php va donner la priorité à la fonction définie par l'utilisateur.
70 1 Simon
71 8 Simon
72
73 17 Simon
h2. Ajout ou remplacement de texte existant
74
75
76 20 Simon
Uniquement en version >= 1.4
77
78 8 Simon
Il est possible d'ajouter ou modifier des textes existants. Vous pouvez le faire directement dans vos templates ou bien en changeant directement la valeur des fichiers de l'application. Mais cela n'est ni très propre ni évolutif!
79
80 1 Simon
2 méthodes s'offrent alors à vous. Chacune d'entre elles disposant d'avantages et inconvénients :
81 8 Simon
82 21 Simon
* la première consiste à créer un fichier dans le dossier _/languages/XX/_ (ou XX est le code de langue - par exemple _fr_ ). Les variables définies sont partagées par l'interface d'administration et l'interface publique. Vos variables sont connus de l'application quelque soit le thème que vous utilisez. Vous devrez penser à sauvegarder ce fichier quand vous migrerez vers une nouvelle version de l'application.
83
* la seconde place les fichiers définis par l'utilisateur au sein du dossier template (par exemple _/templates/public/montheme/override/languages/fr_). Cela permet de donner des valeurs différentes aux variables selon l'interface (publique ou administration). Cela signifie aussi que vous ne retrouverez plus vos variables si vous changez de thème. L'avantage est que vos fichiers ne se mélangent pas à ceux de l'application, permettant ainsi une migration plus aisée.
84 1 Simon
85
Quelque soit la méthode utilisée (et notez que les deux peuvent être combinées), la règle de nommage des fichiers est unique : ils doivent être préfixé du caractère _ (underscore).
86
87 17 Simon
Je crée, par exemple, un fichier _/languages/fr/_myfile.php_ contenant :
88 1 Simon
89 17 Simon
<pre>
90
<code class="php">
91 1 Simon
_def('news', 'widget_meteo', 'Voir la météo');
92 8 Simon
_def('menu_alt', 'search_here', 'terme de recherche');
93 17 Simon
</code></pre>
94 8 Simon
95 17 Simon
Première ligne, j'ajoute une variable jusque là inexistante. L'appel de la fonction *_t('news', 'widget_meteo')* m'affichera "_Voir la météo_".
96 8 Simon
97 17 Simon
La ligne 2 redéfinit une valeur existante. L'appel de *_t('menu_alt', 'search_here')* ne me renverra plus la valeur "_Votre recherche ici..._" (par défaut) mais "_terme de recherche_".
98 8 Simon
99
En cas de mise à jour de l'application, copier-coller les fichiers utilisateurs afin de restaurer vos valeurs.
100
101
Par ailleurs, afin de vous laisser organiser votre application, il est possible de créer autant de fichiers que vous le souhaitez afin de mieux les différencier :
102
103
104 1 Simon
<pre>
105 8 Simon
/languages/fr/_input_news.php
106 1 Simon
/languages/fr/_input_project.php
107 7 Simon
/languages/fr/_input_workshop.php
108 8 Simon
[...]
109 20 Simon
</pre>
110 8 Simon
111 3 Simon
112 8 Simon
113 17 Simon
h2. Editeurs WYSIWYG
114 8 Simon
115 1 Simon
116 17 Simon
Dans l'interface d'administration, vous pouvez remplacer les champs de saisie simples par un Editeur WYSIWYG de votre choix parmis "CKEditor":http://ckeditor.com/, "Tiny MCE":http://tinymce.moxiecode.com/ et "FckEditor":http://www.fckeditor.net/.
117
118
Pour activer l'édition WYSIWYG depuis le module de configuration de l'interface d'administration, remplacez la valeur de la constante *RICH_TEXT_EDITOR* (par défaut à cke) par *cke*, *fck*,*tinymce* ou *0* (désactivé).
119
120 13 Simon
Par défaut, un interface simple est proposée pour chacun de ces éditeurs. Référez vous à leur documentation respective pour paramétrer votre éditeur en fonction de vos besoins.
121 3 Simon
122 17 Simon
* http://ckeditor.com/
123
* http://tinymce.moxiecode.com/
124
* http://www.fckeditor.net/
125 3 Simon
126 17 Simon
Les fichiers de configuration se trouvent dans _/lib/js/_ :
127
* pour CKeditor : _/lib/js/ckeditor/config.js_
128
* pour tinyMCE : _/lib/js/tinymce/jscripts/tiny_mce/config.js_ (voir le tutoriel de "configuration [[TinyMCE]]":http://dev.linea21.com/wiki/tinymce réalisé par "Eribar":http://dev.linea21.com/wiki/user/eribar)
129 1 Simon
* pour FCKeditor : _/lib/js/fckeditor/fckconfig.js_
130
131
Référez-vous au système "d'override":http://dev.linea21.com/wiki/Personnalisation%20de%20l%27interface#Lestemplatesetloverride afin d'assurer la pérennité de votre configuration personnelle.
132
133 17 Simon
Si aucun éditeur WYSIWYG n'est activé, le système autorisera seulement les balises HTML contenu dans la constante ALLOWABLE_TAGS.