Différences

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

--- wiki:application:moduledesigner [2018/04/11 15:44]
r.toma créée
+++ wiki:application:moduledesigner [2018/04/23 10:31] (Version actuelle)
r.toma
@@ Ligne 13: / Ligne 13: @@
 Le **mode design** est accessible depuis :
-  * Le [[wiki:application:menus#Menu Principal|menu principal]] (initialement dans la catégorie **Paramétrages**).\\ \\
+  * Le [[wiki:application:menus#Menu Principal|menu principal]] {{fa>external-link?14&color=#008cba}} (initialement dans la catégorie **Paramétrages**).\\ \\
-  * Un raccourcis d'une [[wiki:application:menus#Barres de navigations personnalisées|navigation personnalisée]], s'il a été paramétré.\\ \\
+  * Un raccourcis d'une [[wiki:application:menus#Barres de navigations personnalisées|navigation personnalisée]] {{fa>external-link?14&color=#008cba}}, s'il a été paramétré.\\ \\
-  * Un clic sur le bouton <tooltip html="true" title="{{:wiki:application:widget_parambtn.png?nolink}}">**Designer le type de page**</tooltip> du [[wiki:application:modulepage#Page Manager|Page Manager]].
+  * Un clic sur le bouton <tooltip html="true" title="{{:wiki:application:widget_parambtn.png?nolink}}">**Designer le type de page**</tooltip> du [[wiki:application:modulepage#Page Manager|Page Manager]] {{fa>external-link?14&color=#008cba}}.
 <callout type="info" icon="true" title="Ouverture via le Page Manager">
@@ Ligne 28: / Ligne 28: @@
 ===== Fenêtre de Design =====
 </jumbotron>
-La **fenêtre de design** regroupe les éléments permettant la **personnalisation des pages**, la gestion de **templates** et de **formulaires**...\\ \\
+La **fenêtre de design** regroupe les éléments permettant la [[wiki:application:moduledesigner_page_widget|personnalisation des pages]] {{fa>external-link?14&color=#008cba}}, la gestion de [[wiki:application:moduledesigner_template|templates]] {{fa>external-link?14&color=#008cba}} et de [[wiki:application:moduledesigner_form|formulaires]]...\\ \\
 <thumbnail>
@@ Ligne 42: / Ligne 42: @@
 <WRAP group>
 <WRAP half column>
-<btn type="warning">A</btn> [[:wiki:application:moduledesigner#Zone d'actions|Zone d'actions]] : regroupe les actions réalisables.\\ \\
+<btn type="warning">A</btn> [[:wiki:application:moduledesigner#Zone d'actions|Zone d'actions]] {{icon>link?14&color=#008cba&rotate=90}} : regroupe les actions réalisables.\\ \\
 <btn type="warning">B</btn> **Chemin d'accès de l'élément** : chemin d'accès de l'élément en cours de design.\\ \\
-<btn type="warning">C</btn> [[:wiki:application:moduledesigner#Contrôles disponibles|Contrôles disponibles]] : liste des contrôles créés et non positionnés dans l'élément en cours de design.\\ \\
+<btn type="warning">C</btn> [[:wiki:application:moduledesigner#Contrôles disponibles|Contrôles disponibles]] {{icon>link?14&color=#008cba&rotate=90}} : liste des contrôles créés et non positionnés dans l'élément en cours de design.\\ \\
-<btn type="warning">D</btn> [[:wiki:application:moduledesigner#Contrôles instantiables|Contrôles instantiables]] : liste des contrôles qu'il est possible de créer pour l'élément en cours de design.
+<btn type="warning">D</btn> [[:wiki:application:moduledesigner#Contrôles instantiables|Contrôles instantiables]] {{icon>link?14&color=#008cba&rotate=90}} : liste des contrôles qu'il est possible de créer pour l'élément en cours de design.
 </WRAP>
 <WRAP half column>
-<btn type="warning">E</btn> [[:wiki:application:moduledesigner#Arborescence|Arborescence de l'élément]] : liste des éléments présents dans l'élément en cours de design.\\ \\
+<btn type="warning">E</btn> [[:wiki:application:moduledesigner#Arborescence|Arborescence de l'élément]] {{icon>link?14&color=#008cba&rotate=90}} : liste des éléments présents dans l'élément en cours de design.\\ \\
-<btn type="warning">F</btn> [[:wiki:application:moduledesigner#Visualisation du design|Elément en cours de design]].\\ \\
+<btn type="warning">F</btn> [[:wiki:application:moduledesigner#Visualisation du design|Elément en cours de design]] {{icon>link?14&color=#008cba&rotate=90}}.\\ \\
-<btn type="warning">G</btn> [[:wiki:application:moduledesigner#Propriétés|Propriétés]] : liste des propriétés de l'élément sélectionné.\\ \\
+<btn type="warning">G</btn> [[:wiki:application:moduledesigner#Propriétés|Propriétés]] {{icon>link?14&color=#008cba&rotate=90}} : liste des propriétés de l'élément sélectionné.\\ \\
 <btn type="warning">H</btn> **Bouton Reset** : permet de remettre les propriétés par défaut pour l'élément sélectionné.
 </WRAP>
@@ Ligne 74: / Ligne 74: @@
 <WRAP half column>
 <btn type="warning">A</btn> **Type de page** : liste des types de page disponibles (la sélection correspond au type de page en cours de design).\\ \\
-<btn type="warning">B</btn> **Langue** : liste des langues disponibles (la sélection correpond à la langue choisie pour le design en cours).\\ \\
+<btn type="warning">B</btn> [[wiki:application:designparams#notion_de_langue|Langue]] {{fa>external-link?14&color=#008cba}} : liste des langues disponibles (la sélection correpond à la langue choisie pour le design en cours).\\ \\
-<btn type="warning">C</btn> **Changer le thème** : liste des thèmes disponibles.\\ \\
+<btn type="warning">C</btn> **Changer le [[wiki:application:designparams#notion_de_theme|thème]]** {{fa>external-link?14&color=#008cba}} : liste des thèmes disponibles.\\ \\
 <btn type="warning">D</btn> **Cloner à partir d'un thème** : permet d'appliquer le design d'un thème sur le thème en cours.\\ \\
-<btn type="warning">E</btn> **Menu des templates** : permet de gérer le design des template.\\ \\
+<btn type="warning">E</btn> **Menu des [[wiki:application:moduledesigner_template|templates]]** {{fa>external-link?14&color=#008cba}} : permet de gérer le design des templates.\\ \\
-<btn type="warning">F</btn> **Fenêtres de paramètres** : permet de gérer le design des formulaires.\\ \\
+<btn type="warning">F</btn> [[wiki:application:moduledesigner_form|Fenêtres de paramètres]] {{fa>external-link?14&color=#008cba}} : permet de gérer le design des formulaires.\\ \\
 <btn type="warning">G</btn> **Sauvegarder** : sauvegarde les modifications.\\ \\
 <btn type="warning">H</btn> **Retour** : permet de revenir à l'élément précédent.
@@ Ligne 84: / Ligne 84: @@
 <WRAP half column>
 <btn type="warning">I</btn> **Modifier** : permet de rentrer en design sur l'élément sélectionné.\\ \\
-<btn type="warning">J</btn> **Largeur de la zone de design** : largeur du container de l'élément designé.\\ \\
+<btn type="warning">J</btn> **Largeur de la zone de design** : largeur du conteneur de l'élément designé.\\ \\
-<btn type="warning">K</btn> **Hauteur de la zone de design** : hauteur du container de l'élément designé.\\ \\
+<btn type="warning">K</btn> **Hauteur de la zone de design** : hauteur du conteneur de l'élément designé.\\ \\
 <btn type="warning">L</btn> **Thème sélectionné** : thème en cours pour l'élément designé.\\ \\
 <btn type="warning">M</btn> **Skin sélectionnée** : skin en cours pour l'élément designé.\\ \\
-<btn type="warning">N</btn> **Groupe** : groupe d'utilisateur pour lequel l'élément est designé.\\ \\
+<btn type="warning">N</btn> [[wiki:application:designparams#notion_de_groupe|Groupe]] {{fa>external-link?14&color=#008cba}} : groupe d'utilisateur pour lequel l'élément est designé.\\ \\
-<btn type="warning">O</btn> **Utilisateur** : utilisateur pour lequel l'élément est designé.\\ \\
+<btn type="warning">O</btn> [[wiki:application:designparams#notion_d_utilisateur|Utilisateur]] {{fa>external-link?14&color=#008cba}} : utilisateur pour lequel l'élément est designé.\\ \\
-<btn type="warning">P</btn> **Paramètres** : ouvre la fenêtre de paramètres du mode design.
+<btn type="warning">P</btn> [[wiki:application:moduledesigner#parametres|Paramètres]] {{icon>link?14&color=#008cba&rotate=90}} : ouvre la fenêtre de paramètres du mode design.
 </WRAP>
 </WRAP>
@@ Ligne 118: / Ligne 118: @@
 <btn type="warning">D</btn> **Aide** : affiche une <tooltip html="true" title="{{:wiki:application:designer_controldesc.png?nolink}}">**description du contrôle**</tooltip>.
 </well>
-Lorsqu'un nouveau type de contrôle est ajouté, une fenêtre apparait dans lequel le nom du contrôle peut être renseigner. Une fois que le nom est renseigné, le nouveau contrôle apparait dans la liste des [[:wiki:application:moduledesigner#Contrôles disponibles|contrôles disponibles]].
+Lorsqu'un nouveau type de contrôle est ajouté, une fenêtre apparait dans lequel le nom du contrôle peut être renseigné. Une fois que le nom est renseigné, le nouveau contrôle apparait dans la liste des [[:wiki:application:moduledesigner#Contrôles disponibles|contrôles disponibles]] {{icon>link?14&color=#008cba&rotate=90}}.
 </WRAP>
 </WRAP>
@@ Ligne 149: / Ligne 149: @@
 </WRAP>
 <callout type="warning" title="Partage des contrôles" icon="true">
-La liste des **contrôles** disponibles est commune entre les différents thèmes de l'élément designé. Si un contrôle disponible est supprimé pour un thème, il sera indisponible dans tous les autres thèmes.
+La liste des **contrôles disponibles** est commune entre les différents thèmes de l'élément designé. Si un contrôle disponible est supprimé pour un thème, il sera indisponible dans tous les autres thèmes.
 </callout>
@@ Ligne 169: / Ligne 169: @@
 L'**arborescence de l'élément** représente la structure qui constitue l'élément en cours de design. Cette structure est composée de **groupes** imbriquables et d'**items** contenant les **contrôles**. Elle contient également des **éléments annexes** tels que des séparateurs, des légendes...
 <well>
-<btn type="warning">A</btn> **Boutons déplacer vers le haut/bas** : déplace l'élément sélectionné dans la liste dans la direction choisie.\\ \\
+<btn type="warning">A</btn> **Boutons déplacer vers le haut/bas** : déplace l'élément sélectionné dans la direction choisie.\\ \\
 <btn type="warning">B</btn> **Ajouter un groupe** : ajoute un groupe dans l'arborescence.\\ \\
 <btn type="warning">C</btn> **Ajouter un élément annexe** : permet d'ajouter des séparateurs, des légendes...\\ \\
@@ Ligne 178: / Ligne 178: @@
 </WRAP>
 <callout type="info" title="Modification de l'arborescence" icon="true">
-Toutes les modifications effectuées dans l'arborescence de l'élément sont instantanément répertcutées dans l'[[:wiki:application:moduledesigner#Visualisation du design|élément en cours de design]].
+Toutes les modifications effectuées dans l'arborescence de l'élément sont instantanément répercutées dans l'[[:wiki:application:moduledesigner#Visualisation du design|élément en cours de design]] {{icon>link?14&color=#008cba&rotate=90}}.
 </callout>
@@ Ligne 198: / Ligne 198: @@
 La liste des **propriétés** de l'élément sélectionné est affichée dans la partie droite (initialement) de la fenêtre du Mode Design.
 <well>
-<btn type="warning">A</btn> **Nom de l'élément sélectionné** : nom de l'élément sélectionné dans l'[[:wiki:application:moduledesigner#Arborescence|arborescence de l'élément]].\\ \\
+<btn type="warning">A</btn> **Nom de l'élément sélectionné** : nom de l'élément sélectionné dans l'[[:wiki:application:moduledesigner#Arborescence|arborescence de l'élément]] {{icon>link?14&color=#008cba&rotate=90}}.\\ \\
 <btn type="warning">B</btn> **Catégorie** : catégorie de la propriété.\\ \\
 <btn type="warning">C</btn> **Nom de la propriété**.\\ \\
@@ Ligne 209: / Ligne 209: @@
 </callout>
 <callout type="info" title="Modification d'une propriété" icon="true">
-La plupart du temps, la **modification** d'une propriété d'un élément aura un impact visuel sur l'[[:wiki:application:moduledesigner#Visualisation du design|élément en cours de design]]. Néanmoins, certaines propriétés ne modifient pas directement l'aspect de l'élément en question.
+La plupart du temps, la **modification** d'une propriété d'un élément aura un impact visuel sur l'[[:wiki:application:moduledesigner#Visualisation du design|élément en cours de design]] {{icon>link?14&color=#008cba&rotate=90}}. Néanmoins, certaines propriétés ne modifient pas directement l'aspect de l'élément en question.
 </callout>
@@ Ligne 215: / Ligne 215: @@
 ==== Visualisation du design ====
 </jumbotron>
-Les **contrôles** et les modifications apportées aux **propriétés** sont visibles dans la zone de **visualisation du design**. Cette zone est également interactive, les éléments peuvent être **sélectionnés**, **réorganisés** et **redimensionnés**.\\ \\
+Les **contrôles** et les modifications apportées aux **propriétés** sont visibles dans la zone de **visualisation du design**. Cette zone est également interactive, les éléments peuvent y être **sélectionnés**, **réorganisés** et **redimensionnés**.\\ \\
 <thumbnail>
 {{ :wiki:application:designer_element.png?nolink }}
@@ Ligne 229: / Ligne 229: @@
 </well>
 <callout type="info" title="Actions dans la zone de visualisation" icon="true">
-Les actions, telle que la sélection d'un élément, dans la zone de visualisation du design provoquent un raffraîchissement des informations dans l'[[:wiki:application:moduledesigner#Arborescence|arborescence de l'élément]] et sur les [[:wiki:application:moduledesigner#Propriétés|propriétés]] affichées.
+Les actions, telle que la sélection d'un élément, dans la zone de visualisation du design provoquent un raffraîchissement des informations dans l'[[:wiki:application:moduledesigner#Arborescence|arborescence de l'élément]] {{icon>link?14&color=#008cba&rotate=90}} et sur les [[:wiki:application:moduledesigner#Propriétés|propriétés]] {{icon>link?14&color=#008cba&rotate=90}} affichées.
 </callout>
@@ Ligne 235: / Ligne 235: @@
 ===== Navigation =====
 </jumbotron>
-Le mode design permet de personnaliser des éléments comme les [[wiki:application:modulepage#Pages|pages]], les [[wiki:application:architecture#Widgets|widgets]], les templates... Lorsqu'un élément, par exemple une page, contient d'autres éléments personnalisables, il est possible de rentrer en design sur ces éléments.
+Le mode design permet de personnaliser des éléments comme les [[wiki:application:modulepage#Pages|pages]] {{fa>external-link?14&color=#008cba}}, les [[wiki:application:architecture#Widgets|widgets]] {{fa>external-link?14&color=#008cba}}, les [[wiki:application:moduledesigner_template|templates]] {{fa>external-link?14&color=#008cba}}... Lorsqu'un élément, par exemple une page, contient d'autres éléments personnalisables, il est possible de rentrer en design sur ces éléments.
 Pour **entrer en design** et modifier un **élément** contenu dans l'élément actuellement en cours de design, il existe plusieurs solutions :
-  * Effectuer un **double clic** sur l'élément visé dans la [[:wiki:application:moduledesigner#Visualisation du design|zone de visualisation du design]].
+  * Effectuer un **double clic** sur l'élément visé dans la [[:wiki:application:moduledesigner#Visualisation du design|zone de visualisation du design]] {{icon>link?14&color=#008cba&rotate=90}}.
-  * Effectuer un **double clic** sur l'élément visé dans l'[[:wiki:application:moduledesigner#Arborescence|arborescence de l'élément]].
+  * Effectuer un **double clic** sur l'élément visé dans l'[[:wiki:application:moduledesigner#Arborescence|arborescence de l'élément]] {{icon>link?14&color=#008cba&rotate=90}}.
-  * Sélectionner l'élément visé dans l'[[:wiki:application:moduledesigner#Arborescence|arborescence de l'élément]], puis cliquer sur le bouton <tooltip html="true" title="{{:wiki:application:designer_bntcustomize.png?nolink}}">**Modifier**</tooltip> de la [[:wiki:application:moduledesigner#Zone d'actions|zone d'actions]].
+  * Sélectionner l'élément visé dans l'[[:wiki:application:moduledesigner#Arborescence|arborescence de l'élément]] {{icon>link?14&color=#008cba&rotate=90}}, puis cliquer sur le bouton <tooltip html="true" title="{{:wiki:application:designer_bntcustomize.png?nolink}}">**Modifier**</tooltip> de la [[:wiki:application:moduledesigner#Zone d'actions|zone d'actions]] {{icon>link?14&color=#008cba&rotate=90}}.
 L'environnement se recharge et reflète alors les informations du nouvel élément designé. Ce mécanisme peut être appliqué à nouveau sur le nouvel élément designé, s'il contient lui même des éléments personnalisables.
-Pour revenir à l'élément précédent, il suffit de cliquer sur le bouton <tooltip html="true" title="{{:wiki:application:designer_btnback.png?nolink}}">**Retour**</tooltip> de la [[:wiki:application:moduledesigner#Zone d'actions|zone d'actions]].
+Pour revenir à l'élément précédent, il suffit de cliquer sur le bouton <tooltip html="true" title="{{:wiki:application:designer_btnback.png?nolink}}">**Retour**</tooltip> de la [[:wiki:application:moduledesigner#Zone d'actions|zone d'actions]] {{icon>link?14&color=#008cba&rotate=90}}.
 <callout type="info" title="Revenir à un élément" icon="true">
@@ Ligne 249: / Ligne 249: @@
 {{:wiki:application:designer_path.png?nolink}}
 </thumbnail>
-Pour revenir à un élément en particulier, cliquer sur le nom de l'élément dans la zone contenant le **chemin d'accès de l'élément**, située sous la [[:wiki:application:moduledesigner#Zone d'actions|zone d'actions]].
+Pour revenir à un élément en particulier, cliquer sur le nom de l'élément dans la zone contenant le **chemin d'accès de l'élément**, située sous la [[:wiki:application:moduledesigner#Zone d'actions|zone d'actions]] {{icon>link?14&color=#008cba&rotate=90}}.
 </callout>
@@ Ligne 256: / Ligne 256: @@
 </jumbotron>
-Le mode design peut être **paramétré** dans le but de réaliser un design pour un **groupe d'utilisateur** et / ou un **utilisateur** en particulier. Cela implique que des utilisateurs, ayant des rôles différents dans l'application, peuvent avoir des pages différentes pour un même module (exemple : les tableaux de bord). D'autres paramètres tels que la **langue** ou la **skin** peuvent aussi être modifiés.\\ \\
+Le mode design peut être **paramétré** dans le but de réaliser un design pour un [[wiki:application:designparams#notion_de_groupe|groupe d'utilisateur]] {{fa>external-link?14&color=#008cba}} et / ou un [[wiki:application:designparams#notion_d_utilisateur|utilisateur]] {{fa>external-link?14&color=#008cba}} en particulier. Cela implique que des utilisateurs, ayant des rôles différents dans l'application, peuvent avoir des pages différentes pour un même module (exemple : les tableaux de bord). D'autres paramètres tels que la [[wiki:application:designparams#notion_de_langue|langue]] {{fa>external-link?14&color=#008cba}} ou la **skin** peuvent aussi être modifiés.\\ \\
-Pour accéder à la fenêtre de paramétrage, cliquer le bouton <tooltip html="true" title="{{:wiki:application:designer_settings.png?nolink}}">**Paramètres**</tooltip> situé dans la [[:wiki:application:moduledesigner#Zone d'actions|zone d'actions]].\\ \\
+Pour accéder à la fenêtre de paramétrage, cliquer le bouton <tooltip html="true" title="{{:wiki:application:designer_settings.png?nolink}}">**Paramètres**</tooltip> situé dans la [[:wiki:application:moduledesigner#Zone d'actions|zone d'actions]] {{icon>link?14&color=#008cba&rotate=90}}.\\ \\
 <thumbnail>
@@ Ligne 274: / Ligne 274: @@
 <btn type="warning">B</btn> **Thème par défaut** : thème par défaut de l'application.\\ \\
 <btn type="warning">C</btn> **Skin par défaut** : skin par défaut de l'application.\\ \\
-<btn type="warning">D</btn> **Dossier des préférences**.\\ \\
+<btn type="warning">D</btn> **Emplacement des préférences**.\\ \\
-<btn type="warning">E</btn> **Dossier des catalogues**.
+<btn type="warning">E</btn> **Emplacement des catalogues**.
 </WRAP>
 <WRAP half column>
-<btn type="warning">F</btn> **Dossier des images**.\\ \\
+<btn type="warning">F</btn> **Emplacement des images**.\\ \\
-<btn type="warning">G</btn> **Dossier des styles**.\\ \\
+<btn type="warning">G</btn> **Emplacement des styles**.\\ \\
 <btn type="warning">H</btn> **Groupe** : groupe pour lequel le design est réalisé.\\ \\
 <btn type="warning">I</btn> **Utilisateur** : utilisateur pour lequel le design est réalisé.\\ \\
@@ Ligne 289: / Ligne 289: @@
 Pour paramétrer le design pour un utilsateur, il faut en amont sélectionner le groupe dans lequel se trouve l'utilisateur dans la fenêtre de paramétrage.
 </callout>
+===== Références =====
+  * [[wiki:application:menus|Menus]]
+  * [[wiki:application:modulepage|Module Manager - Page Manager - Page]]
+  * [[wiki:application:moduledesigner_page_widget|Personnalisation des pages / widgets]]
+  * [[wiki:application:moduledesigner_template|Templates]]
+  * [[wiki:application:architecture|Architecture de l'application]]
+  * [[wiki:application:designparams|Paramètres de personnalisation]]
+===== A voir =====
+  * [[wiki:application:menudesigner|Personnalisation des menus]]
+  * [[wiki:application:widgetsquickcustomize|Widgets - Quick Customize]]
+  * [[wiki:application:styleeditor|Editeur de styles]]