Templates : Paramétrage avancé
Préambule
Les templates permettent de personnaliser l'affichage du portail Kentika. Elles peuvent être choisies aisément, puis modifiées pour coller parfaitement à la charte graphique définie.
Seront présentées ici des notions avancées concernant le fonctionnement des templates dans Kentika.
Edition de valeur libre
Il a été vu précédemment que les variables peuvent être modifiées dans la limite de leur type. Il est possible de modifier une valeur librement en double-cliquant sur la ligne de la variable, dans la liste des variables :

Un double clic dans la zone en rouge ouvre la saisie libre pour la variable CNT_large_title2_text_color
Attention : La majorité des variables sont insérées telles quelles dans les feuilles de style, mais certaines sont recalculées avant d'être insérées. Une valeur non compatible avec la variable peut générer des erreurs sur le portail.
Attention : Même pour les variables insérées telles quelles, il peut être nécessaire d'avoir des connaissances en CSS pour obtenir un résultat satisfaisant.
Attention : En modification libre, la valeur entière doit être saisie, y compris par exemple l'unité.
Le mode de saisie libre peut être utilisé pour saisir des valeurs en utilisant une unité différente de celle définie par défaut, ou d'utiliser les héritages de variables (voir plus bas).
Quoi qu'il arrive, il est impossible de faire des dégâts durables sur la base depuis les templates. Si une modification défigure votre portail, vous pouvez toujours changer de template ou revenir à votre template de base pour retrouver un affichage correct. C'est pourquoi il est conseillé de créer une template de test avant de faire des modifications.
Variables automatiques
Certaines variables peuvent prendre pour valeur "Auto". Ces variables sont alors calculées automatiquement par Kentika lors de la génération des feuilles de style.
Attention : Seules les variables listées ci-dessous peuvent prendre la valeur "Auto" et être calculées par Kentika. Si la valeur "Auto" est assignée aux autres variables, cela produira probablement une erreur dans la feuille de style (sauf si la valeur "auto" est une valeur acceptée pour l'attribut CSS auquel elle s'applique).
- Head_image_url (Bandeau) : Image du bandeau. Si automatique, va chercher l'image définie dans Préférences > Serveur Web.
- Main_context_color (Globales thème) : Couleur d'espace. Si automatique, va chercher celle définie pour l'espace courant dans Préférences > Serveur Web. (Change donc par espace.)
- Page_width (Page) : Largeur de page. Si automatique, prend la largeur de l'image du bandeau (entre 600 et 1500px).
- Head_image_height (En-tête - Positionnement) : Hauteur du bandeau. Si automatique, prend la hauteur de l'image du bandeau
- Main_menu_gradient_bottom_color et Main_menu_gradient_top_color (Supermenu) : Couleurs du dégradé du supermenu. Si l'une des deux valeurs est mise à "auto" et que l'autre hérite de main_context_color (voir héritage ci-dessous), elle est calculée automatiquement par rapport à la couleur d'espace pour obtenir un dégradé vers une couleur plus sombre.
- Tabs_gradient_bottom_color et Tabs_gradient_top_color (Onglets) : Couleur des onglets. Même comportement que ci-dessus.
- Tabs_gradient_hover_bottom_color et Tabs_gradient_hover_top_color (Onglets) : Couleur des onglets au survol. Même comportement que ci-dessus.
Héritage des variables
Dans Kentika, il est possible de faire hériter certaines variables de la valeur d'autres variables. Cela permet de limiter la quantité de variables à modifier pour changer le style global du portail.
Exemple : Par défaut, la variable large_title_bg_color (fond des titres de haut de page) hérite de la variable main_site_color, qui hérite elle-même de la variable main_context_color, qui correspond à la couleur de l'espace courant.
Si l'espace courant est rouge, alors main_site_color et large_title_bg_color seront également rouge. Si je change ma couleur d'espace en vert, main_context_color sera vert, main_site_color sera également vert, et mes titres apparaîtront sur fond vert.
Si je veux garder ma couleur d'espace (onglet et barre de menu) en vert, mais que je préférais mes titres sur fond rouge, je peux mettre large_title_bg_color à rouge.
Enfin, si je veux n'avoir que mon onglet et ma barre de menu en vert, et donner un thème rouge à ma page, je peux changer main_site_color à rouge. Mes titres, et les autres variables héritant de main_site_color (les têtes de colonnes des tableaux, par exemple) seront alors rouge.
Pour qu'une variable hérite de la valeur d'une autre variable, il faut passer par le mode d'édition libre (double clic sur la variable), et lui donner la valeur "==CODE_VARIABLE", où "CODE_VARIABLE" est le code de la variable dont on doit hériter.
Si je veux que mes liens héritent de la couleur d'espace, il faut donner à la variable CNT_main_link_color la valeur "==main_context_color". Les liens prendront alors la couleur de l'espace où l'on se trouve.

Les liens prendront la couleur de l'espace courant
Note : Si au premier abord, il ne semble utile d'utiliser l'héritage que pour les variables automatiques, il est préférable de l'utiliser autant que possible. Cela permet de simplifier d'éventuels futurs changements de style graphique du portail.
Importer/Exporter les templates
Les templates Kentika sont enregistrées dans les maquettes. Il est donc possible de les exporter en se rendant dans "Fichier > Préférences > Ressources > Maquettes". Les templates sont identifiées par leur code, commençant par KDWL.

Export de la template "Nitrogen".
La template peut ensuite être réimportée en suivant la procédure d'import de kit.
Fonctionnement interne des templates
Les templates fonctionnent par un système de variables qui sont utilisées dans les feuilles de styles externes de Kentika.
Afin d'être traitées, ces feuilles de style doivent être des ressources Kentika dont le nom doit commencer par "file://$kent-css/". Les variables, elles, doivent avoir un nom commençant par "$$varKent_".
Lorsqu'un appel à ces feuilles de style est détecté, si elles n'ont pas encore été cachées, toutes les variables vont être remplacées par leur valeur. Cette opération est effectuée avant tout autre calcul éventuel de la page.
Il est donc possible d'utiliser les variables dans des formules 4D, puisqu'elles seront remplacées avant d'être exécutées.
Les variables et leurs valeurs sont stockées dans la template Generic. Cela correspond en fait à des ressources au format csv, dont le nom correspond impérativement au masque "File://$kent-variables@.csv". À chaque appel d'une page $kent-css non cachée, des tableaux contenant les valeurs de base des variables sont chargés, puis la maquette à utiliser est déterminée, et les variables présentes dans la maquette sont substituées dans les tableaux des variables.
Cela signifie que les templates ne contiennent que les variables qui diffèrent de la template générique.
Les variables calculées automatiquement sont alors calculées à ce moment, de même que les variables héritées.
Les pages $kent-css sont ensuite chargées, et les variables remplacées une par une par les valeurs trouvées dans les tableaux.
En résumé, seules les variables présentes dans les ressources "File://$kent-variables@.csv" sont remplacées par leurs valeurs.
Structure des ressources "File://$kent-variables@.csv"
Les fichiers contenant les variables génériques doivent respecter une structure particulière pour garantir un bon fonctionnement du système de templates.
Chaque variable doit se trouver sur une ligne différente.
Dans chaque fichier .csv, les variables sont classées par filtre A, B et C. En-tête de chaque catégorie de filtre se trouve la lettre de désignation du filtre entre crochets : [A]
Ensuite, chaque ligne doit être composée de 5 informations, séparés par des virgules, et entre guillemets :
"CODE","ZONE","DESCRIPTION","TYPE","VALEUR"
CODE : Code de la variable.
ZONE : Zone d'appartenance de la variable.
DESCRIPTION : Description de la variable.
TYPE : Type de la variable. Attention, ces types doivent être conformes aux types définis dans le code source de l'application (color, size, text ou img).
VALEUR : Valeur générique de la variable.
Powered by KENTIKA Atomic - © Kentika 2020 tous droits réservés - Mentions légales