4.5.4 getTemplates

La méthode getTemplates permet de modifier les templates utilisés lors de la génération du document et des attributs.

Cette méthode retourne un tableau de templates mustache.

4.5.4.1 gérer les modèles

La méthode getTemplates retourne un array à plusieurs niveaux. Le premier niveau est

body

pour définir le template du corps du document.

Le template est alors défini par une des clés suivantes :

file

Le template utilisé est identifié par un fichier le contenant.

Le chemin de ce fichier est relatif au répertoire d'installation de Dynacase.

content
Le template utilisé est directement indiqué sous la forme d'une chaîne de caractères.

Lorsque les clés file et content sont toutes deux non vides, la clé content ets utilisée et la clé file est ignorée.

sections

pour définir le template d'une section du document.

Dans ce cas, sections est un tableau à 2 niveaux.

  1. Le premier niveau est le nom de la section

  2. Le second niveau est une des clés suivantes :

    file

    Le template utilisé est identifié par un fichier le contenant.

    Le chemin de ce fichier est relatif au répertoire d'installation de Dynacase.

    content
    Le template utilisé est directement indiqué sous la forme d'une chaîne de caractères.

    Lorsque les clés file et content sont toutes deux non vides, la clé content ets utilisée et la clé file est ignorée.

Les modèles sont parsés côté client et côté serveur, et plusieurs clés sont utilisables.

4.5.4.2 Corps du document : body

Le corps du document est constitué de 4 sections :

  1. L'entête
  2. Le menu
  3. Le contenu
  4. Le pied

Son template par défaut est le suivant :

{{> header}}
 
{{> menu}}
 
{{> content}}
 
{{> footer}}

Cette définition peut être modifiée au moyen de la clé body du tableau de templates pour ajouter des éléments HTML entre les sections ou tout simplement pour supprimer une ou plusieurs sections.

Exemple : Insérer un titre entre chaque section.

class MyRenderConfigCustom extends \Dcp\Ui\DefaultView
{
    public function getTemplates(\Doc $document = null) {
        $templates=parent::getTemplates($document);
        $templates["body"]["file"]="MY/customDocument.mustache";
        return $templates;
    }
}

Fichier MY/customDocument.mustache :

<h1>Pre Header</h1>
{{> header}}
<h1>Post Header</h1>
 
{{> menu}}
<h1>Post Menu</h1>
 
{{> content}}
<h1>Post Content</h1>
 
{{> footer}}
<h1>Post Footer</h1>

Le pied de page, de par sa css, est toujours affiché en bas du document. Pour afficher des éléments plus bas que le pied de page, il faut modifier la css (classe dcpDocument__footer).

Chacune des sections peut être personnalisée au moyen d'un modèle de section.

4.5.4.3 Sections

Les sections peuvent être modifiées au moyen de la clé sections du tableau de templates.

4.5.4.3.1 Entête du document : header

L'entête du document est la section header de la catégorie sections.

Le template par défaut de la section header est le suivant (version simplifiée) :

<header class="dcpDocument__header">
    <img class="dcpDocument__header__icon" src="{{document.properties.icon}}" alt="Document icon"/>
    <a class="dcpDocument__header__title" href="api/v1/documents/{{document.properties.id}}.html">{{document.properties.title}}</a>
    <div class="dcpDocument__header__family">{{document.properties.family.title}}</div>
</header>

Le template complet comporte des éléments plus spécifiques qui sont fonction du mode de rendu et aussi du fait d'afficher une révision passée ou non. Dans tous les cas, les trois éléments indiqués sont présent.

Exemple : Afficher uniquement le titre.

class MyRenderConfigCustom extends \Dcp\Ui\DefaultView
{
    public function getTemplates(\Doc $document = null) {
        $templates=parent::getTemplates($document);
        $templates["sections"]["header"]["file"]="MY/customHead.mustache";
        return $templates;
    }
}

Fichier MY/customHead.mustache :

<h1>{{document.properties.title}}</h1>

Cela donnera la structure suivante :

<html>
    <head>...</head>
    <body>
        <div class="document">
            <div class="dcpDocument">
                <h1>Mon document</h1>
                <nav class="dcpDocument__menu">...</nav>
                <section class="dcpDocument__body">...</section>
                <footer class="dcpDocument__footer"/>
            </div>
        </div>
    </body>
</html>

4.5.4.3.2 Menu du document : menu

La barre de menu du document est la section menu de la catégorie sections.

Par défaut :

<nav class="dcpDocument__menu"></nav>

Le menu, défini par ::getMenu(), est construit dans l'objet de la classe css dcpDocument__menu.

La barre de menu peut être déplacée dans n'importe quelle autre section.

Exemple : mettre le menu dans le footer du document

class MyRenderConfigCustom extends \Dcp\Ui\DefaultView
{
     public function getTemplates(\Doc $document = null) {
            $templates=parent::getTemplates($document);
            $templates["sections"]["footer"]["content"]=
                '<footer class="dcpDocument__footer"><div class="dcpDocument__menu"/></footer>';
            $templates["sections"]["menu"]["content"]='';
            return $templates;
        }
}

Cela donnera la structure suivante :

<html>
    <head>...</head>
    <body>
        <div class="document">
            <div class="dcpDocument">
                <header class="dcpDocument__header">...</header>
                <!-- plus de menu ici -->
                <section class="dcpDocument__body">...</section>
                <footer class="dcpDocument__footer"><div class="dcpDocument__menu">...</div></footer>
            </div>
        </div>
    </body>
</html>

La barre de menu a un comportement spécifique lorsqu'elle est contenue dans un élément de type nav. Ce comportement implique que le menu passe en position fixed en haut du document lorsque le header n'est plus visible.

4.5.4.3.3 Contenu du document : content

Le contenu du document est la section content de la catégorie sections.

Par défaut :

<section class="dcpDocument__body"/>

Le contenu par défaut du document est construit par le widget dans la section identifiée par la classe css dcpDocument__body. Si celle-ci n'est pas présente, il est nécessaire alors d'indiquer les attributs à afficher explicitement en utilisant les variables mustache.

Exemple : Affichage uniquement du contenu de l'onglet my_tabinformation.

class MyRenderConfigCustom extends \Dcp\Ui\DefaultView
{
    public function getTemplates(\Doc $document = null) {
        $templates=parent::getTemplates($document);
        $templates["sections"]["content"]["file"]="MY/customContent.mustache";
        return $templates;
    }
}

Fichier "MY/customContent.mustache"

<div class="container-fluid">
<h1>Voici :  {{document.properties.title}}</h1>
{{{document.attributes.my_tabinformation.htmlContent}}}
</div>

Cela donnera la structure suivante :

<html>
    <head>...</head>
    <body>
        <div class="document">
            <div class="dcpDocument">
                <header class="dcpDocument__header">...</header>
                <nav class="dcpDocument__menu">...</nav>
                <div class="container-fluid">
                    <h1>Voici :  Mon document</h1>
                    <div class="dcpCustomTemplate--content" data-attrid="my_tabinformation">
                        <div class="dcpTab__content" data-attrid="my_tabinformation" ">
                            ...
                        </div>
                     </div> 
                 </div>
                <footer class="dcpDocument__footer"/>
            </div>
        </div>
    </body>
</html>

4.5.4.3.4 Pied du document : footer

Le bas du document est la section footer de la catégorie sections.

Par défaut :

<footer class="dcpDocument__footer"/>

La classe dcpDocument__footer fixe le pied de document en bas de la page pour être toujours visible.

Les règles pour le footer par défaut sont :

.dcpDocument__footer {
    background-color: #f2f2f2;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
}

Exemple : Afficher un copyright.

class MyRenderConfigCustom extends \Dcp\Ui\DefaultView
{
    public function getTemplates(\Doc $document = null) {
        $templates=parent::getTemplates($document);
        $templates["sections"]["footer"]["content"]='
            <footer class="dcpDocument__footer">
                 <strong>All right reserved &copy;</strong>
            </footer>
        ';
        return $templates;
    }
}

Cela donnera la structure suivante :

<html>
    <head>...</head>
    <body>
        <div class="document">
            <div class="dcpDocument">
                <header class="dcpDocument__header">...</header>
                <nav class="dcpDocument__menu">...</nav>
                <section class="dcpDocument__body">...</section>
                <footer class="dcpDocument__footer">
                     <strong>All right reserved &copy;</strong>
                </footer>
            </div>
        </div>
    </body>
</html>

4.5.4.4 Variables des templates

Il est possible d'utiliser des variables liées au document dans les templates.

4.5.4.4.1 Variables client

Les variables sur les propriétés et les attributs du document sont utilisables dans les templates :

4.5.4.4.1.1 Propriétés

Clef Définition
{{document.properties.id}} Identifiant du document
{{document.properties.name}} Nom logique du document
{{document.properties.initid}} Identifiant de la lignée du document
{{document.properties.icon}} Url de l'icône du document
{{document.properties.title}} Titre du document
{{document.properties.family.title}} Titre de la famille du document
{{document.properties.family.id}} Identifiant de la famille du document
{{document.properties.family.icon}} Icône de la famille du document
{{document.properties.isReadMode}} (booléen) Indique si le rendu de document est en mode consultation
{{document.properties.isWriteMode}} (booléen) Indique si le rendu de document est en mode modification

4.5.4.4.1.2 Attributs

Clef Définition
{{document.attributes.attrid.label}} Libellé de l'attribut "attrid"
{{document.attributes.attrid.attributeValue.value}} Valeur brute
{{document.attributes.attrid.attributeValue.displayValue}} valeur affichable
{{document.attributes.attrid.attributeValue.specialProperty}} Autres propriétés (Voir formatCollection)
{{{document.attributes.attrid.htmlContent}}} Contenu (HTML) formaté de la valeur (Attention aux triple accolades : {{{…}}})
{{{document.attributes.attrid.htmlView}}} Contenu (HTML) formaté de la valeur avec le libellé (non applicable au type tab ni aux attributs contenu dans un tableau) (Attention aux triple accolades : {{{…}}})

Exemple : Remplacement de l'entête

<h1>Voici le document : "{{document.properties.title}}"</h1>
{{> menu}}
{{> content}}
{{> footer}}

Exemple : Affichage du cadre my_firstframe

{{>header}}
{{> menu}}
<h1>Voici un cadre</h1>
{{{document.attributes.my_firstframe.htmlView}}}
 
{{> footer}}

Ces variables sont remplacées sur le client lors du rendu du document.

4.5.4.4.2 Variables serveur

Le template est aussi analysé par le serveur. Les variables notées entre double crochets sont des variables qui sont remplacées par le contrôleur avant d'être envoyé sur le client.

Les clefs disponibles côté serveur sont celles gérées par le contrôleur.

L'ensemble des clefs ne sont pas les mêmes que celle côté client. En particulier, les clefs de rendu HTML (htmlContent, htmlView) ne sont pas disponibles.

Exemple : Remplacement de l'entête côté serveur

<h1>[[#i18n]]my::This my document[[/i18n]] : "[[document.properties.title]]"</h1>
{{> menu}}
{{> content}}
{{> footer}}
Source : server/renderConfig/methods/getTemplates.md Dynacase Platform 3.2 | Document User Interface Manuel de référence, version 1.0 édition 2, © Labs <labs@anakeen.com>
×
Publié sous licence CC (http://creativecommons.org/licenses/by-nc-sa/2.0/fr/) par Anakeen [www.anakeen.com]
Attribution Vous devez créditer l'Oeuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Oeuvre. Vous devez indiquer ces informations par tous les moyens possibles mais vous ne pouvez pas suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Oeuvre.
Pas d’Utilisation Commerciale Vous n'êtes pas autoriser à faire un usage commercial de cette Oeuvre, tout ou partie du matériel la composant.
Partage dans les Mêmes Conditions Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Oeuvre originale, vous devez diffuser l'Oeuvre modifiée dans les même conditions, c'est à dire avec la même licence avec laquelle l'Oeuvre originale a été diffusée.