aller au contenu
 
12/12/2016

Composant dynamique

Les DynamicComponent sont des fichiers properties et le plus souvent un fichier jsp associé (ou des fichiers HTML seul).  Le fichier properties définit l'ensemble des champs, chaque champ à un mode de rendu par défaut, 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éfinis en "dot notation".  Le paramètre "order" définit l'ordre.

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

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 texte.
  • large-text : un texte plus grand
  • date : a date (sortableDate, shortDate, mediumDate, fullDate, formatedDate, past, age)
    • format : the format of the date (sp. : dd MMMM yyyy '@'HH'H')
  • 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 (resourceUrl, previewUrl, alt, link, staticInfoBean)
  • image : une image (option image.filter, resourceUrl, previewUrl, alt, link, staticInfoBean))
    • 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: labbel 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
  • color : choix d'une couleur (liste de couleurs disponibles si définies dans le site)
  • default.label-displayed : valeur du champ s'il n'est pas défini

 

  • field.#name#.prefix: à mettre avant le champ
  • field.#name#.suffix : à mettre après le champ
  • field.#name#.init-value : valeur initiale du champ
  • field.#name#.search : sera utilisé dans la recherche
  • field.#name#.needed : champ obligatoire
  • field.#name#.min-size : taille minimum du champ
  • field.#name#.max-size : taille maximum du champ
  • field.#name#.width-edit : largeur du champ (en édition) 1-12
  • field.#name#.css-class : class css autours du champ
  • field.#name#.tag : tag autours du champ
  • field.#name#.label-displayed: affiche ou nom le label du champ
  • field.#name#.displayed : affiche ou nom le champ (champ meta)
  • field.#name#.unity : unité pour le champ
  • field.#name#.i18n: ne doit pas être traduit (seul la valeur dans la langue par default est prise en compte et copier dans les autres langues)
  • field.#name#.wrapped : utilise ou non le wrapper par défaut (sinon il faut mettre l'édit 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 ressource dans le renderer :

Exemple :

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

Integration JSTL

  • [field].viewXHTMLCode: rendu par défaut du champ
  • [field].Text: text (remove tag)
  • [field].html: html
  • [field].displayValue: prepared value
  • [field].value: valeur RAW du champ
  • 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éés 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.