| Prochaine révision | Révision précédente |
| wiki:application:moduledesigner_template [2018/04/13 15:57] – créée r.toma | wiki:application:moduledesigner_template [2018/04/17 15:07] (Version actuelle) – ANALYS Informatique |
|---|
| |
| <jumbotron> | <jumbotron> |
| ====== Rappels sur la Navigation ====== | ===== Rappels sur la Navigation ===== |
| </jumbotron> | </jumbotron> |
| {{page>wiki:application:moduledesigner_page_widget#rappels_sur_la_navigation&noheader&nofooter&nodate&nouser}} | {{page>wiki:application:moduledesigner_page_widget#rappels_sur_la_navigation&noheader&nofooter&nodate&nouser}} |
| |
| <jumbotron> | <jumbotron> |
| ====== Types de template ====== | ===== Types de template ===== |
| </jumbotron> | </jumbotron> |
| Il existe deux types de template différents : les templates de page et les templates de groupe.\\ \\ | Il existe deux types de template différents : les templates de page et les templates de groupe.\\ \\ |
| Les **templates de groupes** sont uniquement composés de [[wiki:application:moduledesigner_page_widget#Eléments secondaires|groupes]]. Ces groupes peuvent être imbriqués les uns dans les autres et afficher différents éléments (titre, boutons...). | Les **templates de groupes** sont uniquement composés de [[wiki:application:moduledesigner_page_widget#Eléments secondaires|groupes et d'éléments secondaires]] {{fa>external-link?14&color=#008cba|groupes}}. Ces groupes peuvent être imbriqués les uns dans les autres et afficher différents éléments (titre, boutons...).\\ \\ |
| Les **templates de pages** sont composés de [[:wiki:application:moduledesigner_page_widget#Eléments secondaires|{{glyphicon>link?12|groupes}}]] et de [[wiki:application:modulepage#zones_layoutcontrol|zones]]. Les zones permettent de définir des blocs indépendants dans les pages. | Les **templates de pages** sont composés de [[wiki:application:moduledesigner_page_widget#Eléments secondaires|groupes]] {{fa>external-link?14&color=#008cba|groupes}} et de [[wiki:application:modulepage#zones_layoutcontrol|zones]] {{fa>external-link?14&color=#008cba|groupes}}. Les zones permettent de définir des blocs indépendants dans les pages. |
| |
| <jumbotron> | <jumbotron> |
| ====== Gestion des templates ====== | ===== Gestion des templates ===== |
| </jumbotron> | </jumbotron> |
| | |
| | <jumbotron> |
| | ==== Créer / Modifier un template ==== |
| | </jumbotron> |
| | |
| | <WRAP group> |
| | <WRAP column third> |
| | <thumbnail> |
| | {{ :wiki:application:template_addedit.png?nolink }} |
| | <caption> |
| | <TEXT align="center"> |
| | Créer / modifier un template |
| | </TEXT> |
| | </caption> |
| | </thumbnail> |
| | </WRAP> |
| | <WRAP> |
| | Pour **créer ou modifier un template**, dans la [[wiki:application:moduledesigner#fenetre_de_design|fenêtre de design]] {{fa>external-link?14&color=#008cba}}, cliquer sur le bouton **Menu des templates**. Dans le sous-menu, choisir l'action désirée. |
| | </WRAP> |
| | </WRAP> |
| | |
| | <jumbotron> |
| | ==== Ajouter des contrôles ==== |
| | </jumbotron> |
| | |
| | Il est possible d'**ajouter des contrôles** dans les templates : |
| | * Pour les **templates de groupes**, des groupes et des éléments secondaires peuvent être ajoutés en utilisant les fonctionnalités de l'[[wiki:application:moduledesigner#arborescence|arborescence]] {{fa>external-link?14&color=#008cba|groupes}} de l'élément désigné.\\ \\ |
| | * Pour les **templates de page**, en plus des groupes et des éléments secondaires, des zones peuvent être ajoutées à l'aide de la liste des [[wiki:application:moduledesigner#controles_instantiables|contrôles instantiables]] {{fa>external-link?14&color=#008cba|groupes}} et des [[wiki:application:moduledesigner#controles_disponibles|contrôles disponibles]] {{fa>external-link?14&color=#008cba|groupes}} (voir [[wiki:application:moduledesigner_page_widget#ajouter_des_controles|ajouter des contrôles]] {{fa>external-link?14&color=#008cba|groupes}}). |
| | |
| | <jumbotron> |
| | ==== Supprimer des contrôles ==== |
| | </jumbotron> |
| | |
| | Il est possible de **supprimer les contrôles** présents dans les templates. La suppression des groupes est immédiate et définitive. Dans le cas des zones, la suppression se fait en deux temps : |
| | * Pour retirer une zone du template, 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 le template.\\ \\ |
| | * 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"> |
| | Lorsque le contrôle est supprimé de la liste des contrôles disponibles, il est supprimé pour tous les **thèmes / langues** de l'élément designé et il ne peut plus être récupéré. |
| | </callout> |
| | |
| | <jumbotron> |
| | ==== Modifier les propriétés ==== |
| | </jumbotron> |
| | 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 le template. Pour les template, les propriétés sont enregistrées uniquement selon les paramètres de thème et de langue. Les paramètres de [[wiki:application:designparams#notion_de_groupe|groupe]] {{fa>external-link?14&color=#008cba}} et d'[[wiki:application:designparams#notion_d_utilisateur|utilisateur]] {{fa>external-link?14&color=#008cba}} ne sont pas pris en compte. |
| | |
| | <callout type="info" title="Reset" icon="true"> |
| | Le bouton <tooltip html="true" title="{{:wiki:application:design_reset.png?nolink}}">**Reset**</tooltip> permet de remettre les propriétés par défaut à l'élément sélectionné. |
| | </callout> |
| | |
| | <jumbotron> |
| | ==== Réorganiser les éléments ==== |
| | </jumbotron> |
| | <WRAP group> |
| | <WRAP column third> |
| | <thumbnail> |
| | {{ :wiki:application:design_alignments.png?nolink }} |
| | <caption> |
| | <TEXT align="center"> |
| | Modifier les alignements |
| | </TEXT> |
| | </caption> |
| | </thumbnail> |
| | </WRAP> |
| | <WRAP> |
| | Il est possible de modifier le **positionnement** des contrôles dans le template. 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]] {{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> |
| | <callout type="info" title="Menu élément" icon="true"> |
| | 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> |
| | |
| | ===== 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]] |
| | |
| | ===== A voir ===== |
| | * [[wiki:application:menudesigner|Personnalisation des menus]] |
| | * [[wiki:application:widgetsquickcustomize|Widgets - Quick Customize]] |
| | * [[wiki:application:styleeditor|Editeur de styles]] |