aller au contenu
12/12/2016

DynamicComponent

Les DynamicComponent sont des fichiers properties et le plus souvent un fichier jsp associé (ou des fichiers HTML seul).  Le fichier properties défini l'ensemble des champs, chaque champs à un mode de rendu par défault, si ce mode ne convient pas il est possible de le réécrire.

Structure fichier "properties"

le fichier commence toujours par la description du composant en général, avec au minium son nom.  Il est possible d'y définir une référence vers le fichier jsp.   Ensuite les différents champs peuvent être défini en "dot notation".  Le paramètre "order" défini l'ordre.

component.type=article
component.label=article
component.css-class=article
component.renderer=components/article.jsp

field.full.type=boolean
field.full.label=full size
field.full.order=100

field.title.type=text
field.title.label=title
field.title.order=200

Les types de champs

  • h1..h6 : un titre de niveau 1 à 6
  • text : un simple text.
  • large-text : un texte plus grand
  • wysiwyg-text : un texte avec mise en forme.
    • editor-complexity : permet de définir le niveau d'option pour le wysiwyg (middle,high,soft,normal)
  • file : static resource
  • image : une image (option image.filter)
    • image.filter : filtre à appliquer à l'image (défini dans image-config.properties)
    • image.label : boolean qui dit s'il faut afficher le label ou non
  • boolean : valeur vraie/fausse, en édition une case à cocher (exemple: full pour prévenir qu'un évènement est plein)
  • open-list : une liste ouverte, c'est à dire qu'il va proposer une liste avec le contenu du site, mais il sera toujours possible d'ajouter un élément.
  • open-multi-list : comme l'open list, mais il est possible de sélectionner plusieurs éléments.
  • external-link : lien externe. (URL: l'url, title:label du lien)
  • internal-link : lien vers une page du site. (link, linkLabel)
  • list-one : liste de sélection simple
    • list : référence vers la liste
    • .first-empty : true=première élément vide
  • size.small : permet de définir la taille sous laquelle le contenu sera marqué comme 'small'
  • size.large : permet de définir la taille au-delà de laquelle le contenu sera marqué comme 'large'
  • number : un nombre (.min et .max pour les limites de valeur)
    • search.asrange : true la rechercher se fait d'un minium à un maximum
  • default.label-displayed : valeur du champs s'il n'est pas défini

 

  • field.#name#.prefix: à mettre avant le champs
  • field.#name#.suffix : à mettre après le champs
  • field.#name#.init-value : valeur initiale du champs
  • field.#name#.search : sera utilisé dans la recherche
  • field.#name#.needed : champs obligatoire
  • field.#name#.min-size : taille minimum du champs
  • field.#name#.max-size : taille maximum du champs
  • field.#name#.width-edit : largeur du champs (en édition) 1-12
  • field.#name#.css-class : class css autours du champs
  • field.#name#.tag : tag autours du champs
  • field.#name#.label-displayed: affiche ou nom le label du champs
  • field.#name#.displayed : affiche ou nom le champs (champs meta)
  • field.#name#.unity : unité pour le champs
  • field.#name#.wrapped : utilise ou non le wrapper par défault (si non il faut mettre l'edit wrapper dans la jsp)

Liste

Il est possible de créer des listes :

format : list.[name].path = chemin vers la page dont les enfants sont la liste (name=key, title=value)

ou

format :

list.[name].1.key = #valeur#
list.[name].1 = #label#
list.[name].1.[lg] = #label#

 

Faire référence à une resource dans le renderer :

Exemple :

<img src="${info.rootTemplateURL}/img/facebook.png" />

Integration JSTL

  • [field].viewXHTMLCode : rendu par default du champs
  • [field].value : valeur RAW du champs
  • containerId : id du composant contenu les champs

Intégrer directement des fichiers HTML

Il est possible de créer uniquement un fichier HTML.  Dans ce fichier HTML il est possible d'ajouter des champs avec le format suivant :

${field.#type#.#name#.#data#}

Les champs seront alors créer automatiquement.

Exemple :

<div class="card">
    <span class="price">${field.text.title.XHTMLValue}</span>
    <div class="card-header">
        <h1>€
          <span class="price">${field.number.price.XHTMLValue}</span>
          <span class="h6 text-muted ml-2">${field.text.unity.XHTMLValue}</span>
        </h1>
    </div>
    <div class="card-body pt-0">
        ${field.wysiwyg-text.body.XHTMLValue}
        <a type="button" class="btn btn-outline-secondary" href="${field.internal-link.link.link}">
             ${field.internal-link.link.linkLabel}
        </a>
    </div>
</div>

Special JSTL variable

  • previewAttributes : id and class for previous component edition (if component.wrapped=false in the component definition)
  • previewCSS : css class for preview edition
  • previewID : id for preview edition
  • nextSame, previousSame : boolean if the component before and afther is the same.