Définition : un composant est une brique fonctionnelle qui permet de créer un contenu HTML dans une page web, exemple une section, un titre, un paragraphe, une image, etc. Un composant est  personalisable avec les feuilles de style CSS et réagit aux évènements HTML. comme les clics, le chargement, etc. 

Diaango propose une liste exhaustive de composants pour créer rapidement les pages de votre site internet :

1. Les conteneurs : destinés à contenir des sous composants afin de structurer le layout et le design.
2. Les composants simples : ce sont des composants basiques tels que les titres, les textes, etc.
3. Les grilles : ce sont des composants qui permettent de créer rapidement des structures de grille responsive.
4. Les composants listes :  ce sont des composants qui permettent de créer des listes dynamiques. 
5. Les composants formulaires :  ce sont des composants qui permettent aux utilisateurs de saisir et d'envoyé des informations à votre système. 
6. Les composants utilitaires :  ce sont des composants standards utilisés couramment dans le design web, par exemple les modals, collapse, les menu latérals, etc. 
7. Les composants commerce :  ce sont des composants standards prêt à l'emploi utilisés couramment dans le design site ecommerce, par exemple les paniers, passerels de paiement, calendriers de réservation, etc. 

Les propriétes d'un composant :

Un composant est caractérisé par un ensemble de propriétés spécifiques utilisées pour le personnaliser. Ci-dessous l'ensemble des attributs génériques et transverses à tous les composants : 

1. Nom : un nom pour un usage interne, sert à identifier le composant facilement.
2. Titre : un titre localisé et multilingue.
3. Description : une description localisé et multilingue.
4. Nom : un nom pour un usage interne, sert à identifier le composant facilement.
5. Code : un code unique permet d'identifier un composant, par exemple "menu-principal" .
6. ID : un identifiant numérique unique pour l'identification en base de données, il est généré automatiquement.
7. Actif : permet d'activer ou de désactiver un composant. Un composant inactif ne sera pas affiché dans la page.
8. Titre : une description simple du composant.
9. Description : une desctription détaillée d'un composant.
10. Position : ordre d'apparition d'un composant dans un groupe.
11. Statut:  état du composant, peute être actif, désactivé, ou supprimé. Si un composant est inactif, il ne sera pas affiché, s'il est marqué "supprimé" il est également inaccésible et pourra être définitivement supprimé du système.
12. Classe CSS : répresente une classe de style CSS.
13. Style et CSS : réference un objet qui définit les propriétés de feuille de style CSS.
14. Petit écran : indique que ce composant sera afficher uniquement  sur les pétits écrans dont la résolution est nférieur ou égale à 420 pixels.
15. Moyen écran : indique que ce composant sera afficher uniquement sur les écrans moyens dont la résolution est inférieur ou égale à 720 pixels.
16. Large écran : indique que ce composant sera afficher uniquement sur des écrans larges dont la résolution est supérieur à 720 pixels.
17. Sous composants : Valable uniquement pour les composants de type conteneur et correspond à la liste des sous composants dans le conteneur.
18. Gestionnaire d'évènements : permet d'ajouter des traitements javascripts pour les gérer les évènements HTML.
19. Modèles de données : permet d'ajouter des modèles de données qui seront utilisés pour afficher des informations dynamiques dans ce composant. Avec les modèles de données on peut créer des composants personnalisés avec données provenant d'un autre système d'information via des APIs 
20. Restrictions : permet de définir des restrictions sur un composant pour créer des contenus localisés et alternatifs en fonction de certains critères.
21. Data Binding : permet de définir de créer des données dynamiques en références à des attributs existants, le databing permet d'appliquer des fonctions de transformation pour par exemple formatter une devise, tronquer une chaine de caracteres, etc. Consulter la rubrique databing pour plus d'informations.

Les propriétés avancées :

1. Ajustable : indique qu'on définir les dimensions de ce composant en ajustant le composant manuellement (avec la souris).
2. Editable : indique qu'on peut éditer le texte dans le composant.
3. Propriétaire : définit le propriétaire de cette ressource par défaut correspond à l'utilisateur ayant créer ce composant, le propriété detient tous les droits d'accès à une ressource.
4. Cachable : permet mettre le composant en cache pour accèlèrer l'affichage de celui-ci et optimiser les performances du site. La première fois que ce composant sera chargé, le système va le garder en mémoire pour un chargement rapide pour les prochaines fois.  Cette propriété ne possède que deux valeurs possibles, soit true (vrai) ou false(faux).
5. TTL : Time to Live permet d'indiquer le temps en millisondes que durera la mise en cache de ce composant, à l'expiration de ce temps imparti le composant sera regénèrer à nouveau est remis en cache. Consulter la gestion du cache cms pour plus d'informations
6. Image aperçu : correspond à une image illustrative du composant, il est utilisé notamment dans le marketplace.

Positionnement du composant : 

Chaque composant possede un numéro de positionnement qui définit l'ordre de son emplacement dans un conteneur receipient. Les composants avec le même numéro de position sont affichés aléatoirement. Il faut definir cette position pour être sure de l'emplacement d'un composant.

Restrictions sur un composant : 

Lorsque vous ne souhaitez pas voir un composant être affichés, vous le désactivé en modifiant son statut ou définir des restrictions.  Les restrictions permettent de conditionner l'affichage d'un composant dans une page.  Ils existent plusieurs types de restrisctions:

1. Les restrction temporels
2. Les restrictions lié au navigateur et user agent
3. Les restrictions d'utilisateurs et groupes d'utilisateurs
4. Les restrictions d'authentification
5. Les restrictions de pages
6. Les restrictions pour site internet
7. Les restrictions en fonction de la géolocalisation.

Pour en savoir d'avantage, nous vous recommendons de lire la rubrique  "les restrictions avec diaango"

Mise en cache 

Diaango integre un cache cms pour optimer le chargement des composants complexes, vous pouvez parametrer la mise en cache de vos composants en définissant les valeurs pour les propriétés :

• TTL : Time to Live, qui correspond au temps de mise en cache avant qu'il soit regénerer. 
• Cachable : valeur possible, vrai ou faux (true et false).

  Pour l'optimisation 

Menus d'édition du composant : 

Pour éditer le composant cliquer sur le composant, vous verrez apparaitre le menu contextuel et un menu latérale droite.

Le menu contextuel permet d'éffectuer des opérations d'éditions rapides: 

1. Modifier les propriétés de styles comme par exemple :la taille du texte, la couleur du texte, l'alignement, etc.
2. Editer les propriétés du composant. 
3. Dupliquer le composant.  
4. Copier le style CSS pour l'appliquer sur un autre élément. 
5. Recharger le composant. 
6. Synchroniser le composant. 
7. Ouvrir les parametres d'édition dans le menu latéral de droite.
8. Supprimer le composant de son conteneur.
9. Supprimer définitivement le composant du système.

Note: pour aller plus loin, consulter la rubrique éditeur de contenu

Résumé :

Dans cet article nous avons abordons les aspects important pour comprendre les composants CMS version diaango. La différence entre composant simple et conteneur, les propriétés communes à tous les composants. Mais aussi comment utiliser le cache et  définir les restrictions