Project

General

Profile

Personnalisation de l'interface publique » History » Version 14

Simon, 01/21/2011 11:36 AM

1 1 Simon
2
= Personnalisation de l'interface =
3
4
5
== Les thèmes ==
6
7 4 Simon
Pour ajouter un thème, procéder en 4 étapes :
8 12 Simon
 * dupliquer le dossier ''/templates/public/default/'' et renommer le (par exemple en ''/templates/public/montheme/'' ).
9 4 Simon
 * Editer le fichier de configuration /config/define_release.ini, chercher la variable globale '''THEME_LIST_PUBLIC''' et agréger la nouvelle valeur comme suit : "linea21|montheme". Le ''pipeline'' est le séparateur de thème.
10
 * 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.
11 12 Simon
 * Modifiez les fichiers contenus dans ''/templates/public/montheme/'' à votre convenance.
12 1 Simon
13
14 6 Anthony
== Les templates et l'override ==
15 2 Simon
16 5 Simon
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. 
17 1 Simon
18
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. 
19
20 11 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.
21 6 Anthony
22
Vous pouvez redéfinir de la même façon un fichier de l'application en utilisant un dossier d'override.
23
Attention, ce dossier doit contenir la même arborescence que le fichier d'origine.
24
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
25 11 Simon
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
26 1 Simon
27 8 Simon
28
== Le fichier ''display.php'' ==
29
30
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.
31
32
Prenons un exemple concret :
33
34
Je souhaite pouvoir utiliser ma propre fonction hello_world() dans le module d'actualités.
35
36
Je créer donc le fichier /templates/montheme/override/news/display.php avec le code suivant :
37
38
{{{
39
#!php
40
include_once('../news/display.php');
41
42
// no need if the default module file is included
43
// include_once(themePath('../news/' . SQL . '.inc.php'));
44
45
46
function hello_world() {
47
  return 'hello World !';
48
}
49
50
function DisplayOneNews($news_id) [
51
  echo hello_world();
52
  // la suite de mon traitement
53
}
54
}}}
55
56
La première ligne de code me permet d'inclure les méthodes de base (sans avoir à les redéfinir - '''version >= 1.4''' ).[[BR]]
57
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.
58
59
Je définis ma fonction hello_world() jusqu'alors inexistante.
60
61
Enfin, je re-définis la fonction !DisplayOneNews() afin qu'elle réalise l'appel à ma fonction précédemment définie. Le [http://www.php.net/manual/fr/functions.user-defined.php comportement de PHP concernant les fonctions conditionnelles] va donner la priorité à la fonction définie par l'utilisateur.
62
63
64
== Ajout ou remplacement de texte existant ==
65
'''
66
Uniquement en version >= 1.4'''
67
68
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!
69
70 14 Simon
2 méthodes s'offrent alors à vous. Chacune d'entre elles disposant d'avantages et inconvénients :
71
72
 - 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.
73
 - 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.
74
75
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).
76
77 8 Simon
Il est donc possible de définir autant de variables que vous le souhaitez en créant un fichier spécial dans le répertoire /languages/XX/ (ou XX est le code de langue - par exemple ''fr'' ).
78 1 Simon
79 14 Simon
Une seule et simple règle : afin d'être chargé par l'application, le fichier 
80 8 Simon
81 14 Simon
Je crée, par exemple, un fichier /languages/fr/_myfile.php contenant :
82 8 Simon
83
{{{
84
#!php
85
_def('news', 'widget_meteo', 'Voir la météo');
86
_def('menu_alt', 'search_here', 'terme de recherche');
87
}}}
88
89
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''".
90
91 10 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''".
92 8 Simon
93
En cas de mise à jour de l'application, copier-coller les fichiers utilisateurs afin de restaurer vos valeurs.
94
95
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 :
96
97
98
{{{
99
/languages/fr/_input_news.php
100
/languages/fr/_input_project.php
101
/languages/fr/_input_workshop.php
102
[...]
103
}}}
104
105
106 1 Simon
== Editeurs WYSIWYG ==
107 7 Simon
108 8 Simon
Dans l'interface d'administration, vous pouvez remplacer les champs de saisie simples par un Editeur WYSIWYG de votre choix parmis [http://ckeditor.com/ CKEditor], [http://tinymce.moxiecode.com/ Tiny MCE] et [http://www.fckeditor.net/ FckEditor].
109 1 Simon
110 8 Simon
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é).
111 3 Simon
112 8 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.
113
114
 * http://ckeditor.com/
115 1 Simon
 * http://tinymce.moxiecode.com/
116 3 Simon
 * http://www.fckeditor.net/
117
118
Les fichiers de configuration se trouvent dans ''/lib/js/'' :
119 8 Simon
 * pour CKeditor : ''/lib/js/ckeditor/config.js''
120 13 Simon
 * pour tinyMCE : ''/lib/js/tinymce/jscripts/tiny_mce/config.js'' (voir le tutoriel de [http://dev.linea21.com/wiki/tinymce configuration TinyMCE] réalisé par [http://dev.linea21.com/wiki/user/eribar Eribar])
121 3 Simon
 * pour FCKeditor : ''/lib/js/fckeditor/fckconfig.js''
122 1 Simon
123 9 Simon
Référez-vous au système [http://dev.linea21.com/wiki/Personnalisation%20de%20l%27interface#Lestemplatesetloverride d'override] afin d'assurer la pérennité de votre configuration personnelle.
124 8 Simon
125 3 Simon
Si aucun éditeur WYSIWYG n'est activé, le système autorisera seulement les balises HTML contenu dans la constante ALLOWABLE_TAGS.
126
127
128 8 Simon
'''Attention:''' le système de templates fournis nativement avec Linea21 n'est pas compatible à 100 % avec l'activation des éditeurs WYSIWYG. Si vous activez un éditeur WYSIWYG et vous souhaitez ajouter des images, préférez la prise en charge des images par l'éditeur lui-même.