Mode Design

Le mode design permet de personnaliser la structure et les propriétés des différents éléments d'un type de page, d'un template ou d'un formulaire.

Accéder au Mode Design

Le mode design est accessible depuis :

Le menu principal (initialement dans la catégorie Paramétrages).

Un raccourcis d'une navigation personnalisée , s'il a été paramétré.

Un clic sur le bouton Designer le type de page du Page Manager .

L'ouverture du Mode Design via le page manager lance le design sur le type de page de la page actuellement sélectionnée dans le page manager. L'accès au mode design nécessite des droits administrateurs.

Fenêtre de Design

La fenêtre de design regroupe les éléments permettant la personnalisation des pages , la gestion de templates et de formulaires...

Fenêtre du Mode Design

A Zone d'actions : regroupe les actions réalisables. B Chemin d'accès de l'élément : chemin d'accès de l'élément en cours de design. C Contrôles disponibles : liste des contrôles créés et non positionnés dans l'élément en cours de design. D Contrôles instantiables : liste des contrôles qu'il est possible de créer pour l'élément en cours de design.	E Arborescence de l'élément : liste des éléments présents dans l'élément en cours de design. F Elément en cours de design . G Propriétés : liste des propriétés de l'élément sélectionné. H Bouton Reset : permet de remettre les propriétés par défaut pour l'élément sélectionné.

Zone d'actions

La zone d'actions regroupe les actions principales de la fenêtre du mode design.

Zone d'actions du Mode Design

A Type de page : liste des types de page disponibles (la sélection correspond au type de page en cours de design). B Langue : liste des langues disponibles (la sélection correpond à la langue choisie pour le design en cours). C Changer le thème : liste des thèmes disponibles. D Cloner à partir d'un thème : permet d'appliquer le design d'un thème sur le thème en cours. E Menu des templates : permet de gérer le design des template. F Fenêtres de paramètres : permet de gérer le design des formulaires. G Sauvegarder : sauvegarde les modifications. H Retour : permet de revenir à l'élément précédent.	I Modifier : permet de rentrer en design sur l'élément sélectionné. J Largeur de la zone de design : largeur du container de l'élément designé. K Hauteur de la zone de design : hauteur du container de l'élément designé. L Thème sélectionné : thème en cours pour l'élément designé. M Skin sélectionnée : skin en cours pour l'élément designé. N Groupe : groupe d'utilisateur pour lequel l'élément est designé. O Utilisateur : utilisateur pour lequel l'élément est designé. P Paramètres : ouvre la fenêtre de paramètres du mode design.

Contrôles instantiables

Liste des contrôles instantiables

La liste des contrôles instantiables regroupe les types de contrôles qu'il est possible d'ajouter à l'élément en cours de design.
A Zone de recherche : permet de rechercher un élément dans la liste par son type.
B Type du contrôle.
C Bouton ajouter : permet d'ajouter un contrôle du type sélectionné.
D Aide : affiche une description du contrôle. 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 contrôles disponibles .

Le nom d'un contrôle doit être unique dans la page.

Contrôles disponibles

Liste des contrôles disponibles

La liste des contrôles disponibles regroupe les contrôles créés et qui ne sont pas encore ajoutés à l'élément en cours de design.
A Glyph : image représentant le type du contrôle.
B Nom : nom donné au contrôle lors de sa création.
C Bouton Supprimer : permet de supprimer un contrôle.

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.

Arborescence

Arborescence de l'élément

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... A Boutons déplacer vers le haut/bas : déplace l'élément sélectionné dans la liste dans la direction choisie.
B Ajouter un groupe : ajoute un groupe dans l'arborescence.
C Ajouter un élément annexe : permet d'ajouter des séparateurs, des légendes...
D Supprimer un élément : retire l'élément de l'arborescence.
E Structure : représente la structure de l'élément designé.

Toutes les modifications effectuées dans l'arborescence de l'élément sont instantanément répertcutées dans l'élément en cours de design .

Propriétés

Propriétés de l'élément sélectionné

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. A Nom de l'élément sélectionné : nom de l'élément sélectionné dans l'arborescence de l'élément .
B Catégorie : catégorie de la propriété.
C Nom de la propriété.
D Valeur de la propriété.

Pour afficher une description de la propriété, placer le curseur de la souris sur le nom de la propriété, une bulle d'aide apparaît contenant une description. La plupart du temps, la modification d'une propriété d'un élément aura un impact visuel sur l'élément en cours de design . Néanmoins, certaines propriétés ne modifient pas directement l'aspect de l'élément en question.

Visualisation du design

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.

Zone de visualisation du design A Elément non sélectionné.
B Elément sélectionné : l'élément sélectionné est coloré en bleu.

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'arborescence de l'élément et sur les propriétés affichées.

Navigation

Le mode design permet de personnaliser des éléments comme les pages , les 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.

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 zone de visualisation du design .

Effectuer un double clic sur l'élément visé dans l'arborescence de l'élément .

Sélectionner l'élément visé dans l'arborescence de l'élément , puis cliquer sur le bouton Modifier de la zone d'actions .

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 Retour de la 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 zone d'actions .

Paramètres

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.

Pour accéder à la fenêtre de paramétrage, cliquer le bouton Paramètres situé dans la zone d'actions .

Fenêtre de paramétrage du mode design

A Langue par défaut : langue par défaut de l'application. B Thème par défaut : thème par défaut de l'application. C Skin par défaut : skin par défaut de l'application. D Dossier des préférences. E Dossier des catalogues.	F Dossier des images. G Dossier des styles. H Groupe : groupe pour lequel le design est réalisé. I Utilisateur : utilisateur pour lequel le design est réalisé. J Skin : skin utilisée pour le design (détermine les images et les styles disponibles).

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.

Tracedump:

newBaseSize: 16pt
newBaseSizeInPt: 16