En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de Cookies pour réaliser des statistiques de visites.

09 54 46 51 10

du lundi au vendredi de 08h à 19h

Classe: View


Classes permettant de générer du code HTML.


createForm

Permets de créer une instance de la classe Form.

Valeur de retour

Une instance de la classe Form.

Exemple

{% set form = view.createForm({ redirectUrl: page.url ~ '?didSend=1', emailFieldName: 'mail', sendCopy: true }) %}

createField

Permets de créer une instance de la classe Field.

Il y a peu d'intérêt à instancier la classe Field. On préfèrera en générale appeler renderFormGroup directement depuis la classe View ou depuis la classe Form.

Valeur de retour

Une instance de la classe Field.


renderFormGroup

Permets de générer un champ avec son label. Le champ sera généré avec la fonction renderInput. Toutes les options de renderInput peuvent donc être utilisées.

En interne, renderFormGroup est appelé sur une nouvelle instance de la classe Field.

Arguments

  • options : La liste des options est disponible dans la définition de la classe Field.

Valeur de retour

Le code HTML permettant d'afficher le champ.

Exemple

{{ view.renderFormGroup({ name: 'mail', title: 'Mail', format: 'text', labelSize: 3, inputSize: 8 }) }}

renderInput

Permets de générer un champ.

En interne, renderInput est appelé sur une nouvelle instance de la classe Field.

Arguments

  • options: La liste des options est disponible dans la définition de la classe Field.

Valeur de retour

Le code HTML permettant d'afficher le champ.

Exemple

{{ view.renderInput({ name: 'mail', format: 'text', labelSize: 3, inputSize: 8 }) }}

renderFormToken

Permets la génération d'un jeton ayant pour but de prévenir les failles de type CSRF.

Valeur de retour

Une balise input de type hidden ayant le token comme valeur.

Exemple

{{ view.renderFormToken() }}

createToken

Permets la génération d'un jeton ayant pour but de prévenir les failles de type CSRF.

Valeur de retour

Le jeton au format texte.

Exemple

{% set deleteUrl = page.urlForAction('fileDelete', file.id, view.createToken()) %}

renderImage

Permets de générer le code HTML pour afficher une image.

La fonction générera, si besoin, plusieurs versions de l’image pour s’adapter à tous les types d’appareils, qu’ils soient retina ou pas :

  • mobile
  • tablette
  • ordinateur portable
  • ordinateur avec écran large

Une image peut ainsi être disponible dans 10 tailles différentes.

Si plus d’une version est générée, l’image sera affichée via une balise picture. GestiXi intègre un polyfill pour les navigateurs ne supportant pas cette balise. L’utilisation de la balise picture permet au navigateur de choisir l’image la plus adaptée à la taille de l’écran du client.

Les propriétés scale et align fonctionnent grâce au plug-in JavaScript image-scale. Par défaut toutes les images avec la classe scalesont prises en charge par le plug-in.

Pour éviter aux images de « flasher » lorsqu’elles sont déjà chargées dans le cache du navigateur, mais que le DOM n’est pas encore chargé, l’opacité des images est définie à 0 si :

  • La propriété scale est définie
  • La propriété align est définie
  • La classe contient le mot scale
  • L’option scale est définie à true

L’opacité sera définie à 1 par le plug-in imageScale.

Arguments

  • src : L’URL de l’image à afficher
  • alt : Le titre de l’image
  • opt : Un tableau contenant des paramètres additionnels :
    • width : La largeur à laquelle redimensionner l’image
    • height : La hauteur à laquelle redimensionner l’image
    • className : La classe à ajouter à la balise HTML de l’image
    • scale : Mise à l’échelle de l’image. Valeurs possibles :
    • fill - agrandir ou comprimer l’image pour remplir le conteneur
    • best-fill - Adapte le coté le plus court de l’image à la taille du conteneur tout en maintenant le ratio
    • best-fit - Adapte le coté le plus long de l’image à la taille du conteneur tout en maintenant le ratio
    • best-fit-down - Idem à best-fit, mais n’agrandit pas l’image si elle est plus petite que le conteneur
    • none - Aucune mise à l’échelle
    • align (Defaut: center): Alignement de l’image dans le conteneur. Valeur possible :
    • left
    • right
    • center
    • top
    • bottom
    • top-left
    • top-right
    • bottom-left
    • bottom-right
    • addSize (Defaut: false): Ajoute height et width aux propiétés de la balise img

Valeur de retour

Le code HTML permettant d’afficher l’image.

Exemple

{{ view.renderImage(image.url, image.title, "auto", "auto", "scale", "best-fill", "center") }}

renderAlertPane

Permets de générer une boite de dialogue modal.

Arguments

  • options : Un objet contenant les données à afficher :
    • id : L'id de la boite de dialogue
    • title : Le titre de la boite de dialogue
    • description : Le message de la boite de dialogue
    • buttons : Un tableau d'objet (2 au maximum) :
    • title : Le titre du bouton
    • url : L'URL de redirection lors d'un clic sur le bouton. Ne pas définir d'URL pour fermer la fenêtre.

Valeur de retour

Le code HTML permettant d'afficher la boite de dialogue.

Exemple

<a data-toggle="modal" data-target="#delete-file">Supprimer</a>

{{ view.renderAlertPane({ 'id': 'delete-file', 'title': 'Supprimer un fichier ?', 'description': 'Voulez-vous vraiment supprimer ce fichier ?', 'buttons': [{ 'title': 'Supprimer', 'url': deleteUrl },{ 'title': 'Annuler' }],  }) }}

getMenuPagesFor

Renvoi les pages d'un menu.

Arguments

  • menuType : Le type du menu. Options possible :
    • menu
    • footer

Valeur de retour

Un tableau de Page.

Pour la page en cours d'affichage, la classe active sera ajouté à la propriété className de la page, et la propriété isActiveMenu sera définie à true.

Exemple

{% set menuItems = element.getMenuPagesFor(1) %}

{% for menuItem in menuItems %}
  {% if menuItem.menuItems %}
    <li class="menu-item-{{ menuItem.id }} gx-nav-item {{ menuItem.classNames }}">
      <h4>{{ menuItem.title }}</h4>
        <ul class="gx-sub-nav-item">
          {% for subMenuItem in menuItem.menuItems %}
            <li class="menu-item-{{ subMenuItem.id }} gx-nav-sub-item">
              <a href= "{{ subMenuItem.url }}">{{ subMenuItem.title }}</a>
            </li>
          {% endfor %}
        </ul>
    </li>
{% endfor %}

renderPlusOneButton

Permet l'affichage d'un bouton Google plus un. Le SDK Google sera automatiquement attaché à la page.

Arguments

  • url : L'url de la page
  • size : La taille du bouton. Valeur possible :
    • small
    • medium
    • tall
  • annotation (default: 'inline')

Valeur de retour

Le code HTML du bouton.


renderTwitterShareButton

Permets l'affichage d'un bouton Twitter share. Le SDK Twitter sera automatiquement attaché à la page.

Arguments

  • url : L'url de la page
  • text : Le texte du tweet
  • via : Un nom de l'utilisateur Twitter
  • count : Pour afficher le nombre de partages. Valeur possible :
    • none
    • horizontal
    • vertical
  • related
  • hashtags
  • buttonLarge

Valeur de retour

Le code HTML du bouton.


renderFacebookLikeButton

Permets l'affichage d'un bouton Facebook like. Le SDK Facebook sera automatiquement attaché à la page.

Arguments

  • url : L'url de la page
  • type (Defaut: 'button_count') : Le type du bouton.
  • send (Defaut: false)
  • width (Defaut: 50) : La largeur maximum du bouton.
  • showFaces (Defaut: false)
  • send (Defaut: false)
  • colorScheme (Defaut: null)
  • verb (Defaut: null)

Valeur de retour

Le code HTML du bouton.


renderFacebookComments

Permets l'affichage du plug-in de commentaire de Facebook. Le SDK Facebook sera automatiquement attaché à la page.

Arguments

  • url : L'url de la page

Valeur de retour

Le code HTML du bloc de commentaire.


renderDisqusComments

Permets l'affichage du plug-in de commentaire de Disqus. Le SDK Disqus sera automatiquement attaché à la page.

Valeur de retour

Le code HTML du bloc de commentaire.