Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
wiki:application:moduledesigner_page_widget [2018/04/13 14:48]
r.toma
wiki:application:moduledesigner_page_widget [2018/04/23 10:49] (Version actuelle)
r.toma
Ligne 4: Ligne 4:
  
 <​lead>​ <​lead>​
-Il est possible de personnaliser l'​apparence et les propriétés des éléments d'une [[wiki:​application:​modulepage#​Pages|page]] ou d'une [[wiki:​application:​architecture#​Widgets|widget]],​ d'​ajouter de nouvelles widgets à une page ou de nouveaux contrôles à une widget, de définir des mises en pages différentes selon les [[wiki:​application:​designparams|paramètres de l'​application]]... Ces modifications sont possibles grâce au [[wiki:​application:​moduledesigner|Mode Design]].+Il est possible de personnaliser l'​apparence et les propriétés des éléments d'une [[wiki:​application:​modulepage#​Pages|page]] ​{{fa>​external-link?​20&​color=#​008cba}} ​ou d'une [[wiki:​application:​architecture#​Widgets|widget]] ​{{fa>​external-link?​20&​color=#​008cba}}, d'​ajouter de nouvelles widgets à une page ou de nouveaux contrôles à une widget, de définir des mises en pages différentes selon les [[wiki:​application:​designparams|paramètres de l'​application]] ​{{fa>​external-link?​20&​color=#​008cba}}... Ces modifications sont possibles grâce au [[wiki:​application:​moduledesigner|Mode Design]] ​{{fa>​external-link?​20&​color=#​008cba}}.
 </​lead>​ </​lead>​
  
Ligne 33: Ligne 33:
 </​WRAP>​ </​WRAP>​
 <​WRAP>​ <​WRAP>​
-Dans la [[wiki:​application:​moduledesigner#​fenetre_de_design|fenêtre de design]], la sélection du **type de page** permet de choisir la page à personnaliser.\\ \\ Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec le nouveau type de page sélectionné.+Dans la [[wiki:​application:​moduledesigner#​fenetre_de_design|fenêtre de design]] ​{{fa>​external-link?​14&​color=#​008cba}}, la sélection du **type de page** permet de choisir la page à personnaliser.\\ \\ Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec le nouveau type de page sélectionné.
 </​WRAP>​ </​WRAP>​
 </​WRAP>​ </​WRAP>​
Ligne 52: Ligne 52:
 </​WRAP>​ </​WRAP>​
 <​WRAP>​ <​WRAP>​
-Dans la [[wiki:​application:​moduledesigner#​fenetre_de_design|fenêtre de design]], la sélection de la [[wiki:​application:​designparams#​notion_de_langue|langue]] permet de choisir la langue pour laquelle la page sera personnalisée.\\ \\ Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec la page de la langue sélectionnée.+Dans la [[wiki:​application:​moduledesigner#​fenetre_de_design|fenêtre de design]] ​{{fa>​external-link?​14&​color=#​008cba}}, la sélection de la [[wiki:​application:​designparams#​notion_de_langue|langue]] ​{{fa>​external-link?​14&​color=#​008cba}} ​permet de choisir la langue pour laquelle la page sera personnalisée.\\ \\ Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec la page de la langue sélectionnée.
 </​WRAP>​ </​WRAP>​
 </​WRAP>​ </​WRAP>​
 <callout type="​info"​ title="​Valeur par défaut"​ icon="​true">​ <callout type="​info"​ title="​Valeur par défaut"​ icon="​true">​
-Lorsque la **langue** est modifiée, si aucune page n'​existe dans la nouvelle langue sélectionnée,​ la page de la [[wiki:​application:​designparams#​valeurs_par_defaut|langue par défaut]] est chargée. Les modifications seront enregistrées dans la langue sélectionnée.+Lorsque la **langue** est modifiée, si aucune page n'​existe dans la nouvelle langue sélectionnée,​ la page de la [[wiki:​application:​designparams#​valeurs_par_defaut|langue par défaut]] ​{{fa>​external-link?​14&​color=#​008cba}} ​est chargée. Les modifications seront enregistrées dans la langue sélectionnée.
 </​callout>​ </​callout>​
  
Ligne 74: Ligne 74:
 </​WRAP>​ </​WRAP>​
 <​WRAP>​ <​WRAP>​
-Dans la [[wiki:​application:​moduledesigner#​fenetre_de_design|fenêtre de design]], la sélection du [[wiki:​application:​designparams#​notion_de_theme|thème]] permet de choisir le type de périphérique pour lequel la page est personnalisée.\\ \\ Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec la page du thème sélectionné.+Dans la [[wiki:​application:​moduledesigner#​fenetre_de_design|fenêtre de design]] ​{{fa>​external-link?​14&​color=#​008cba}}, la sélection du [[wiki:​application:​designparams#​notion_de_theme|thème]] ​{{fa>​external-link?​14&​color=#​008cba}} ​permet de choisir le type de périphérique pour lequel la page est personnalisée.\\ \\ Lorsque cette valeur est modifiée, la fenêtre de design se recharge avec la page du thème sélectionné.
 </​WRAP>​ </​WRAP>​
 </​WRAP>​ </​WRAP>​
 <callout type="​info"​ title="​Valeur par défaut"​ icon="​true">​ <callout type="​info"​ title="​Valeur par défaut"​ icon="​true">​
-Lorsque le **thème** est modifié, si aucune page n'​existe dans le nouveau thème sélectionné,​ la page du [[wiki:​application:​designparams#​valeurs_par_defaut|thème par défaut]] est chargée. Les modifications seront enregistrées dans le thème sélectionné.+Lorsque le **thème** est modifié, si aucune page n'​existe dans le nouveau thème sélectionné,​ la page du [[wiki:​application:​designparams#​valeurs_par_defaut|thème par défaut]] ​{{fa>​external-link?​14&​color=#​008cba}} ​est chargée. Les modifications seront enregistrées dans le thème sélectionné.
 </​callout>​ </​callout>​
  
Ligne 97: Ligne 97:
  
 Il est possible d'​**ajouter des contrôles** dans les pages et dans les widgets : Il est possible d'​**ajouter des contrôles** dans les pages et dans les widgets :
-  * Pour les pages, les contrôles disponibles sont les [[wiki:​application:​modulepage#​zones_layoutcontrol|zones]] et les [[wiki:​application:​architecture#​widgets|widgets]]. Suivant le type de page sélectionné,​ les contrôles disponibles seront plus ou moins nombreux.\\ \\ +  * Pour les pages, les contrôles disponibles sont les [[wiki:​application:​modulepage#​zones_layoutcontrol|zones]] ​{{fa>​external-link?​14&​color=#​008cba}} ​et les [[wiki:​application:​architecture#​widgets|widgets]] ​{{fa>​external-link?​14&​color=#​008cba}}. Suivant le type de page sélectionné,​ les contrôles disponibles seront plus ou moins nombreux.\\ \\ 
-  * Pour les widgets, les contrôles disponibles sont les **champs supplémentaires (AddFields)**. Les champs supplémentaires correspondent à tous les éléments visuels de l'​application (grilles, boutons, cases à cocher, champs texte...).+  * Pour les widgets, les contrôles disponibles sont les [[wiki:​application:​catalogs#​Catalogue de champs supplémentaires|champs supplémentaires (AddFields)]]. Les champs supplémentaires correspondent à tous les éléments visuels de l'​application (grilles, boutons, cases à cocher, champs texte...).
  
-Pour ajouter un contrôle à l'​élément en cours de design (page ou widget), cliquer sur le bouton **ajouter** présent dans la zone des [[wiki:​application:​moduledesigner#​controles_instantiables|contrôles instantiables]].\\ \\+Pour ajouter un contrôle à l'​élément en cours de design (page ou widget), cliquer sur le bouton **ajouter** présent dans la zone des [[wiki:​application:​moduledesigner#​controles_instantiables|contrôles instantiables]] ​{{fa>​external-link?​14&​color=#​008cba}}.\\ \\
  
 <WRAP group> <WRAP group>
Ligne 114: Ligne 114:
 </​WRAP>​ </​WRAP>​
 <​WRAP>​ <​WRAP>​
-Une fenêtre apparait à l'​écran dans laquelle le nom du nouveau contrôle doit être renseigné. Valider le nouveau nom, le contrôle nouvellement instantié apparaît dans la liste des [[wiki:​application:​moduledesigner#​controles_disponibles|contrôles disponibles]]. Cette liste regroupe tous les contrôles de tous les design de l'​élément en cours, peu importe le thème ou la langue sélectionné,​ ce qui signifie qu'un contrôle créé dans un thème A se retrouvera dans la liste des contrôles disponibles du thème B.+Une fenêtre apparait à l'​écran dans laquelle le nom du nouveau contrôle doit être renseigné. Valider le nouveau nom, le contrôle nouvellement instantié apparaît dans la liste des [[wiki:​application:​moduledesigner#​controles_disponibles|contrôles disponibles]] ​{{fa>​external-link?​14&​color=#​008cba}}. Cette liste regroupe tous les contrôles de tous les design de l'​élément en cours, peu importe le thème ou la langue sélectionné,​ ce qui signifie qu'un contrôle créé dans un thème A se retrouvera dans la liste des contrôles disponibles du thème B.
 </​WRAP>​ </​WRAP>​
 </​WRAP>​ </​WRAP>​
  
-Pour ajouter le nouveau contrôle à la page / widget en cours de design, depuis la liste des **contrôles disponibles**,​ réaliser un **glisser-déposer** dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ou dans la zone de [[wiki:​application:​moduledesigner#​visualisation_du_design|visualisation du design]]. Relâcher le bouton de la souris à l'​endroit désiré. Le contrôle apparaît alors dans la zone de visualisation et dans l'​arborescence.\\ \\+Pour ajouter le nouveau contrôle à la page / widget en cours de design, depuis la liste des **contrôles disponibles**,​ réaliser un **glisser-déposer** dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​ou dans la zone de [[wiki:​application:​moduledesigner#​visualisation_du_design|visualisation du design]] ​{{fa>​external-link?​14&​color=#​008cba}}. Relâcher le bouton de la souris à l'​endroit désiré. Le contrôle apparaît alors dans la zone de visualisation et dans l'​arborescence.\\ \\
 <​thumbnail> ​ <​thumbnail> ​
 {{ :​wiki:​application:​design_move_control.png?​nolink }} {{ :​wiki:​application:​design_move_control.png?​nolink }}
Ligne 132: Ligne 132:
 </​jumbotron>​ </​jumbotron>​
 Il est possible de **supprimer les contrôles** présents dans la page / widget. Après avoir sélectionné le contrôle, la suppression se fait en deux temps :  Il est possible de **supprimer les contrôles** présents dans la page / widget. Après avoir sélectionné le contrôle, la suppression se fait en deux temps : 
-  * Pour retirer un élément de la page / widget, cliquer sur le bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_remove_control.png?​nolink}}">​**retirer un élément**</​tooltip>​. Le contrôle se retrouve alors dans la liste des [[wiki:​application:​moduledesigner#​controles_disponibles|contrôles disponibles]] et peut être replacé à tout moment dans la page / widget.\\ \\ +  * Pour retirer un élément de la page / widget, cliquer sur le bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_remove_control.png?​nolink}}">​**retirer un élément**</​tooltip>​. Le contrôle se retrouve alors dans la liste des [[wiki:​application:​moduledesigner#​controles_disponibles|contrôles disponibles]] ​{{fa>​external-link?​14&​color=#​008cba}} ​et peut être replacé à tout moment dans la page / widget.\\ \\ 
-  * Lorsque le contrôle se trouve dans la liste des [[wiki:​application:​moduledesigner#​controles_disponibles|contrôles disponibles]],​ il est possible de le supprimer définitivement en cliquant sur le bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_delete_control.png?​nolink}}">​**supprimer le contrôle**</​tooltip>​. Une <tooltip html="​true"​ title="​{{:​wiki:​application:​design_delete_confirmation.png?​nolink}}">​**fenêtre de confirmation**</​tooltip>​ apparaît demandant la confirmation de la suppression.+  * Lorsque le contrôle se trouve dans la liste des [[wiki:​application:​moduledesigner#​controles_disponibles|contrôles disponibles]] ​{{fa>​external-link?​14&​color=#​008cba}}, il est possible de le supprimer définitivement en cliquant sur le bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_delete_control.png?​nolink}}">​**supprimer le contrôle**</​tooltip>​. Une <tooltip html="​true"​ title="​{{:​wiki:​application:​design_delete_confirmation.png?​nolink}}">​**fenêtre de confirmation**</​tooltip>​ apparaît demandant la confirmation de la suppression.
  
 <callout type="​warning"​ title="​Suppression définitive"​ icon="​true">​ <callout type="​warning"​ title="​Suppression définitive"​ icon="​true">​
Ligne 142: Ligne 142:
 ==== Modifier les propriétés ==== ==== Modifier les propriétés ====
 </​jumbotron>​ </​jumbotron>​
-Les **propriétés** du contrôle sélectionné sont visibles dans la zone [[wiki:​application:​moduledesigner#​proprietes|propriétés]],​ suivant l'​élément sélectionné,​ les propriétés modifiables seront différentes.\\ \\ +Les **propriétés** du contrôle sélectionné sont visibles dans la zone [[wiki:​application:​moduledesigner#​proprietes|propriétés]] ​{{fa>​external-link?​14&​color=#​008cba}}, suivant l'​élément sélectionné,​ les propriétés modifiables seront différentes.\\ \\ 
-La modification des propriétés d'un élément permet de changer le **comportement** et le **rendu** de l'​élément dans la page. Les propriétés sont enregistrées en fonction des différents [[wiki:​application:​moduledesigner_page_widget#​Sélection des paramètres|paramètres]] sélectionnés dans la fenêtre de design, mais il existe un mécanisme de surcharge en fonction des groupes et des utilisateurs de l'​application.\\ \\ +La modification des propriétés d'un élément permet de changer le **comportement** et le **rendu** de l'​élément dans la page. Les propriétés sont enregistrées en fonction des différents [[wiki:​application:​moduledesigner_page_widget#​Sélection des paramètres|paramètres]] ​{{icon>​link?​14&​color=#​008cba&​rotate=90}} ​sélectionnés dans la fenêtre de design, mais il existe un mécanisme de surcharge en fonction des groupes et des utilisateurs de l'​application.\\ \\ 
-Si la propriété d'un élément est modifiée au niveau du [[wiki:​application:​designparams#​notion_de_groupe|groupe]] et que la même propriété du même élément n'a pas été modifiée au niveau de l'​[[wiki:​application:​designparams#​notion_d_utilisateur|utilisateur]],​ alors la propriété du groupe sera appliquée.\\+Si la propriété d'un élément est modifiée au niveau du [[wiki:​application:​designparams#​notion_de_groupe|groupe]] ​{{fa>​external-link?​14&​color=#​008cba}} ​et que la même propriété du même élément n'a pas été modifiée au niveau de l'​[[wiki:​application:​designparams#​notion_d_utilisateur|utilisateur]] ​{{fa>​external-link?​14&​color=#​008cba}}, alors la propriété du groupe sera appliquée.\\ \\
 L'​intérêt de ce mécanisme est de pouvoir personnaliser un rendu et un comportement pour un groupe, ainsi tous les utilisateurs du groupe concerné bénéficieront des modifications. L'​intérêt de ce mécanisme est de pouvoir personnaliser un rendu et un comportement pour un groupe, ainsi tous les utilisateurs du groupe concerné bénéficieront des modifications.
  
Ligne 155: Ligne 155:
 ==== Eléments secondaires ==== ==== Eléments secondaires ====
 </​jumbotron>​ </​jumbotron>​
-Outre les contrôles, il est possible d'​ajouter des **éléments secondaires** à partir de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] de l'​élément designé :+Outre les contrôles, il est possible d'​ajouter des **éléments secondaires** à partir de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​de l'​élément designé :
 \\ \\ \\ \\
 <panel type="​success"​ title="​Groupes">​ <panel type="​success"​ title="​Groupes">​
 <​panel-body>​ <​panel-body>​
-Les **groupes** permettent de créer des catégories pour les contrôles contenus dans la page / widget. Ils peuvent être imbriqués les uns dans les autres, afficher des légendes, un bouton plier/​déplier... L'​ajout d'un groupe se fait via le bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_group.png?​nolink}}">​**ajouter un groupe**</​tooltip>​ situé dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] de l'​élément designé.\\ \\+Les **groupes** permettent de créer des catégories pour les contrôles contenus dans la page / widget. Ils peuvent être imbriqués les uns dans les autres, afficher des légendes, un bouton plier/​déplier... L'​ajout d'un groupe se fait via le bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_group.png?​nolink}}">​**ajouter un groupe**</​tooltip>​ situé dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​de l'​élément designé.\\ \\
 <​thumbnail> ​ <​thumbnail> ​
 {{ :​wiki:​application:​group_appro.png?​nolink }} {{ :​wiki:​application:​group_appro.png?​nolink }}
Ligne 193: Ligne 193:
 </​WRAP>​ </​WRAP>​
 <​WRAP>​ <​WRAP>​
-L'​**espace vide** permet de modifier l'​espace entre deux éléments. Il est accessible via le sous-menu du bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_subelement.png?​nolink}}">​**ajouter un élément secondaire**</​tooltip>​ présent au niveau de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] de l'​élément designé.\\ \\ +L'​**espace vide** permet de modifier l'​espace entre deux éléments. Il est accessible via le sous-menu du bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_subelement.png?​nolink}}">​**ajouter un élément secondaire**</​tooltip>​ présent au niveau de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​de l'​élément designé.\\ \\ 
-La **légende** est un texte simple que l'on peut disposer à l'​intérieur d'une page / widget. Elle peut être ajoutée via le sous-menu du bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_subelement.png?​nolink}}">​**ajouter un élément secondaire**</​tooltip>​ présent au niveau de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] de l'​élément designé.\\ \\ +La **légende** est un texte simple que l'on peut disposer à l'​intérieur d'une page / widget. Elle peut être ajoutée via le sous-menu du bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_subelement.png?​nolink}}">​**ajouter un élément secondaire**</​tooltip>​ présent au niveau de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​de l'​élément designé.\\ \\ 
-Le **séparateur** représente une barre fixe horizontale ou verticale permettant de créer une séparation entre les éléments d'une page / widget. Il peut être ajouté via le sous-menu du bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_subelement.png?​nolink}}">​**ajouter un élément secondaire**</​tooltip>​ présent au niveau de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] de l'​élément designé.\\ \\ +Le **séparateur** représente une barre fixe horizontale ou verticale permettant de créer une séparation entre les éléments d'une page / widget. Il peut être ajouté via le sous-menu du bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_subelement.png?​nolink}}">​**ajouter un élément secondaire**</​tooltip>​ présent au niveau de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​de l'​élément designé.\\ \\ 
-Le **splitter** est une barre horizontale ou verticale, séparant les éléments d'une page / widget, et qui donne la possibilité de réduire / agrandir les zones qu'il délimite. Il peut être ajouté via le sous-menu du bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_subelement.png?​nolink}}">​**ajouter un élément secondaire**</​tooltip>​ présent au niveau de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] de l'​élément designé.+Le **splitter** est une barre horizontale ou verticale, séparant les éléments d'une page / widget, et qui donne la possibilité de réduire / agrandir les zones qu'il délimite. Il peut être ajouté via le sous-menu du bouton <tooltip html="​true"​ title="​{{:​wiki:​application:​design_add_subelement.png?​nolink}}">​**ajouter un élément secondaire**</​tooltip>​ présent au niveau de l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​de l'​élément designé.
 </​WRAP>​ </​WRAP>​
 </​WRAP>​ </​WRAP>​
Ligne 216: Ligne 216:
 </​WRAP>​ </​WRAP>​
 <​WRAP>​ <​WRAP>​
-Il est possible de modifier le **positionnement** des contrôles dans la page / widget. Pour déplacer un contrôle, réaliser un **glisser-déposer** depuis l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ou la zone de [[wiki:​application:​moduledesigner#​visualisation_du_design|visualisation du design]] jusqu'​à l'​endroit désiré.\\ \\ +Il est possible de modifier le **positionnement** des contrôles dans la page / widget. Pour déplacer un contrôle, réaliser un **glisser-déposer** depuis l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​ou la zone de [[wiki:​application:​moduledesigner#​visualisation_du_design|visualisation du design]] ​{{fa>​external-link?​14&​color=#​008cba}} ​jusqu'​à l'​endroit désiré.\\ \\ 
-Les contrôles peuvent également être **réalignés** à l'​intérieur de l'​élément designé. Pour réaliser cette action, faire un clic droit sur le contrôle dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ou la zone de [[wiki:​application:​moduledesigner#​visualisation_du_design|visualisation du design]]. Dans le sous-menu, positionner la souris sur **Alignement Horizontal** ou **Alignement Vertical** puis choisir l'​alignement désiré.+Les contrôles peuvent également être **réalignés** à l'​intérieur de l'​élément designé. Pour réaliser cette action, faire un clic droit sur le contrôle dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​ou la zone de [[wiki:​application:​moduledesigner#​visualisation_du_design|visualisation du design]] ​{{fa>​external-link?​14&​color=#​008cba}}. Dans le sous-menu, positionner la souris sur **Alignement Horizontal** ou **Alignement Vertical** puis choisir l'​alignement désiré.
 </​WRAP>​ </​WRAP>​
 </​WRAP>​ </​WRAP>​
 <callout type="​info"​ title="​Menu élément"​ icon="​true">​ <callout type="​info"​ title="​Menu élément"​ icon="​true">​
-Lors du clic droit sur un élément dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ou la zone de [[wiki:​application:​moduledesigner#​visualisation_du_design|visualisation du design]], les actions contenues dans le sous-menu dépendent du type de l'​élément sélectionné.+Lors du clic droit sur un élément dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​ou la zone de [[wiki:​application:​moduledesigner#​visualisation_du_design|visualisation du design]] ​{{fa>​external-link?​14&​color=#​008cba}}, les actions contenues dans le sous-menu dépendent du type de l'​élément sélectionné.
 </​callout>​ </​callout>​
  
Ligne 239: Ligne 239:
 </​WRAP>​ </​WRAP>​
 <​WRAP>​ <​WRAP>​
-A l'​intérieur des pages et des widgets, des [[wiki:​application:​moduledesigner#​moduledesigner_template|templates]] peuvent être insérés. Les templates ne peuvent être ajoutés que sur des [[wiki:​application:​moduledesigner_page_widget|groupes]] ​existant.\\ \\ Pour ajouter un template, faire un clic droit sur le groupe, puis dans le sous-menu sélectionner ​ l'​élément **Insérer un template**.+A l'​intérieur des pages et des widgets, des [[wiki:​application:​moduledesigner#​moduledesigner_template|templates]] ​{{fa>​external-link?​14&​color=#​008cba}} ​peuvent être insérés. Les templates ne peuvent être ajoutés que sur des [[wiki:​application:​moduledesigner_page_widget#Eléments secondaires|groupes]] ​{{icon>​link?​14&​color=#​008cba&​rotate=90}} existants.\\ \\ Pour ajouter un template, faire un clic droit sur le groupe, puis dans le sous-menu sélectionner ​ l'​élément **Insérer un template**.
 </​WRAP>​ </​WRAP>​
 </​WRAP>​ </​WRAP>​
-Dans la nouvelle fenêtre, sélectionner le template à ajouter et valider. Le template est alors visible dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] de l'​élément désigné.\\ \\+Dans la nouvelle fenêtre, sélectionner le template à ajouter et valider. Le template est alors visible dans l'​[[wiki:​application:​moduledesigner#​arborescence|arborescence]] ​{{fa>​external-link?​14&​color=#​008cba}} ​de l'​élément désigné.\\ \\
 <​thumbnail> ​ <​thumbnail> ​
 {{ :​wiki:​application:​design_templatelist.png?​nolink }} {{ :​wiki:​application:​design_templatelist.png?​nolink }}
Ligne 252: Ligne 252:
 </​thumbnail>​ </​thumbnail>​
 <callout type="​info"​ title="​Types de template"​ icon="​true">​ <callout type="​info"​ title="​Types de template"​ icon="​true">​
-Il exsite ​deux types de template différents : les templates de page et les template de groupe. Les templates de page ont la particularité de pouvoir contenir, en plus des groupes, des [[wiki:​application:​modulepage#​zones_layoutcontrol|zones]].+Il existe ​deux types de template différents : les templates de page et les template de groupe. Les templates de page ont la particularité de pouvoir contenir, en plus des groupes, des [[wiki:​application:​modulepage#​zones_layoutcontrol|zones]] ​{{fa>​external-link?​14&​color=#​008cba}}.
 </​callout>​ </​callout>​
  
Ligne 271: Ligne 271:
 <​WRAP>​ <​WRAP>​
 **Cloner** à partir d'un thème revient à appliquer les **contrôles**,​ les **alignements** et les **propriétés**,​ contenus dans le design du thème choisi, dans le thème actuellement défini dans la fenêtre de design.\\ \\ **Cloner** à partir d'un thème revient à appliquer les **contrôles**,​ les **alignements** et les **propriétés**,​ contenus dans le design du thème choisi, dans le thème actuellement défini dans la fenêtre de design.\\ \\
-Pour cloner à partir d'un thème, cliquer sur le bouton **Cloner à partir d'un thème** situé dans la [[wiki:​application:​moduledesigner#​zone_d_actions|zone d'​actions]] de la fenêtre de design. Dans la liste déroulante,​ sélectionner le thème à partir duquel les éléments et leurs propriétés seront copiés. La fenêtre de design se recharge après application des modification.+Pour cloner à partir d'un thème, cliquer sur le bouton **Cloner à partir d'un thème** situé dans la [[wiki:​application:​moduledesigner#​zone_d_actions|zone d'​actions]] ​{{fa>​external-link?​14&​color=#​008cba}} ​de la fenêtre de design. Dans la liste déroulante,​ sélectionner le thème à partir duquel les éléments et leurs propriétés seront copiés. La fenêtre de design se recharge après application des modifications.
 </​WRAP>​ </​WRAP>​
 </​WRAP>​ </​WRAP>​
 +
 +===== Références =====
 +  * [[wiki:​application:​menus|Menus]]
 +  * [[wiki:​application:​modulepage|Module Manager - Page Manager - Page]]
 +  * [[wiki:​application:​moduledesigner|Mode Design]]
 +  * [[wiki:​application:​designparams|Paramètres de personnalisation]]
 +  * [[wiki:​application:​architecture|Architecture de l'​application]]
 +  * [[wiki:​application:​catalogs|Présentation des catalogues]]
 +
 +===== A voir =====
 +  * [[wiki:​application:​menudesigner|Personnalisation des menus]]
 +  * [[wiki:​application:​widgetsquickcustomize|Widgets - Quick Customize]]
 +  * [[wiki:​application:​styleeditor|Editeur de styles]]