Cegid XRP Ultimate  |  I3   Actualisé le 06/10/2022
Ergonomie, menus, commandes, outils
Guide d'utilisation du "Mode design" dans l'interface utilisateur RIA

Présentation
Les fonctionnalités du "Mode design"
Barre d'outils du "Mode design"
Sauvegarde de la personnalisation faite avec le "Mode design"
Règles de définition des masques

Présentation
   Le "Mode design" permet aux utilisateurs de réorganiser les écrans de façon à adapter les transactions à leurs besoins (déplacer des composants graphiques, en supprimer, etc.).

   Cette commande s'applique sur la transaction active pour personnaliser l'écran du mode formulaire, celui du mode recherche ou celui du mode mosaïque.

   L'icône ou son raccourci réalise la même fonction.
Cette icône et ces touches sont une bascule permettant le passage en "Mode design" et l'annulation du "Mode design".

   En activant ce mode, le dessin de l'écran s'affiche sur une grille, une barre d'outils complémentaire apparaît également.

   

   Par exemple, pour la transaction GTVA en mode formulaire :

Les fonctionnalités du "Mode design"
   
La grille, dont les points sont placés tous les 5 pixels, permet un placement aisé des composants graphiques. L'icône enlève ou affiche cette grille.

   Possibilité de :

   - Déplacer des composants graphiques (champs - boutons - légendes).
Cliquer sur le composant pour le sélectionner et le déplacer à l'aide de la souris ou des touches "flèche".

   - Déplacer plusieurs composants graphiques à la fois.
Cliquer sur le premier composant, puis "Ctrl + Clic" pour sélectionner les autres, le dernier sélectionné apparaît en bleu foncé. Déplacer le groupe à l'aide de la souris ou des touches "flèche".
Un groupe de composants peut aussi être sélectionné avec la souris, cliquer sur un point de la grille et glisser pour englober les composants.
Un groupe de composants peut être ajouté à la sélection avec la souris ; en gardant la touche "Alt" appuyée, cliquer sur un point de la grille et glisser pour englober les composants complémentaires.
"Shift + Clic" permet de ne plus sélectionner un composant graphique dans un groupe.

   - Déplacer des composants graphiques entre formes principales et formes détails et vice versa.
L'ouverture d'une forme détail se fait via la liste présente dans la barre d'outils de la transaction.
Particularité pour ouvrir une "boîte de dialogue" correspondant par exemple à des cumuls, il faut utiliser les touches "Shift + Clic" sur le bouton ouvrant cette boîte.

   - Régler la dimension des composants graphiques (largeur, hauteur).
Sélectionner le composant, puis positionner le curseur de la souris sur le cadre bleu, apparaît alors une flèche à double sens, glisser jusqu'à la dimension voulue. Le réglage de la hauteur s'applique pour les images et les composants de type "texte".

   - Supprimer des composants graphiques.
Sélectionner le composant ou un groupe, puis touche "Suppr". Supprimer un champ supprime automatiquement sa désignation, la désignation d'un champ peut être supprimée seule. Attention : un champ obligatoire ne peut pas être supprimé.

   - Ajouter des composants graphiques. Icône
L'écran de "Personnalisation de la transaction" s'ouvre en affichant la liste des composants de la transaction, sélectionner celui à ajouter et glisser vers le masque de la transaction.

   - Définir l'ordre de déplacement dans le masque (tabulation). Icône pour ouvrir ou fermer les tabulations.
Un numéro d'ordre est attribué à chaque composant dans un carré bleu. Cliquer sur un carré bleu affecte le n°1, puis cliquer sur le suivant pour le n°2, etc.
"Ctrl + Clic" permet de mémoriser le numéro du composant pour ne pas avoir à numéroter tous les composants à partir du premier.

   - Contrôler l'alignement des composants.
"Alt + Clic" sur un composant permet d'afficher des traits d'alignement.
Exemple :

Barre d'outils du "Mode design"
   
Descriptif de la barre d'outils du mode design.

    enlève ou affiche la grille de placement des composants graphiques.

    règle automatiquement l'espace horizontal entre plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques

Avec l'icône, on obtient

    règle automatiquement l'espace vertical entre plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques

Avec l'icône, on obtient

    aligne automatiquement sur la gauche plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques (l'alignement se fait par rapport au dernier composant sélectionné)

Avec l'icône, on obtient

    aligne automatiquement sur la droite plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques (l'alignement se fait par rapport au dernier composant sélectionné)

Avec l'icône, on obtient

    aligne automatiquement vers le haut plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques (l'alignement se fait par rapport au dernier composant sélectionné)

Avec l'icône, on obtient

    aligne automatiquement vers le bas plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques (l'alignement se fait par rapport au dernier composant sélectionné)

Avec l'icône, on obtient

    uniformise automatiquement la hauteur de plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques (l'uniformisation se fait par rapport au dernier composant sélectionné)

Avec l'icône, on obtient

    uniformise automatiquement la largeur de plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques (l'uniformisation se fait par rapport au dernier composant sélectionné)

Avec l'icône, on obtient

    uniformise automatiquement la largeur et la hauteur de plusieurs composants graphiques sélectionnés dans un groupe.
Exemple :
Sélection des composants graphiques (l'uniformisation se fait par rapport au dernier composant sélectionné)

Avec l'icône, on obtient

    bascule gérant l'ouverture et la fermeture du mode tabulation. Ce mode permet de définir l'ordre de déplacement dans le masque.

   Exemple :

   

    permet l'ajout d'un composant graphique dans le masque.

      Accès direct aux informations sur un champ
   Le double clic sur un composant (champ, case à cocher, etc.) ouvre la personnalisation de la transaction et se positionne sur le champ sélectionné.

      Barre d'outils d'assistants
   Cette barre d'outils donne accès à des assistants de personnalisation qui permettent de faire simplement les actions les plus utilisées.

   Par exemple : ajouter un formulaire de saisie

   

   Les éléments affichés sont :
- une icône pour valider la personnalisation ;
- une icône pour permuter entre un menu simplifié et un menu avancé. Le choix du menu affiché est mémorisé et restitué lors des prochaines connexions ;
- le menu des assistants.

   Un assistant, comme par exemple celui pour ajouter une image, se présente ainsi :

   

Sauvegarde de la personnalisation faite avec le "Mode design"
   
Lorsque le dessin de l'écran est terminé, pour sauvegarder cette personnalisation : dans le menu "Transaction", commande "Personnalisation transaction", cliquez sur le bouton "Appliquer".

   La fenêtre suivante s'ouvre :

   Elle indique le nom de la transaction personnalisée, le nom de la personnalisation courante, le propriétaire de la personnalisation courante.

   A noter que la personnalisation QUALIAC n'est pas modifiable, il s'agit de celle livrée en standard.

   Pour créer une nouvelle personnalisation, cliquez sur le bouton "Créer". Ceci permet de saisir le nom de la personnalisation (saisie libre) et le propriétaire (utilisateur, profil ou *). Cliquez ensuite sur le bouton "Appliquer".

   Une personnalisation peut être modifiée en cliquant sur le bouton "Modifier".

   Le bouton "Annuler" annule la sauvegarde.

Règles de définition des masques
La personnalisation des masques écrans est libre, toutefois, des règles de présentation sont appliquées en standard et son préconisées pour les personnalisations.

Dimension maximale
Marge générale
Unité de positionnement des composants
Espacement à gauche et à droite
Placement du libellé
Espacement entre les champs
Cadre de regroupement
Alignement
Champs code + intitulé
Fourchettes
Largeur des champs "date", "période" et "heure"
Nombre de colonnes par grille

Dimension maximale
   La dimension maximale en pixels des masques est de : 1020 en largeur et 680 en hauteur.
Ces valeurs ont été calculées pour une résolution d'écran de 1024 x 768 en tenant compte de la barre d'outils du navigateur.

Marge générale
   La marge autour du masque est de 5 pixels.

   

Unité de positionnement des composants
   L'unité de positionnement des composants est de 5 pixels. En pratique tous les composants devront avoir une valeur multiple de 5 pour leur position en x et y.

Espacement à gauche et à droite
   Les champs ont automatiquement un espace de 10 pixels à gauche et à droite.
A gauche : cet espace est prévu pour afficher la marque du champ obligatoire (personnalisable).
A droite : cet espace est prévu pour afficher la flèche d'ouverture de la liste de valeurs (personnalisable).
Cet espace est pris en compte automatiquement par le designer.

   Champ ni obligatoire et sans liste de valeurs :
Champ avec marque obligatoire :
Champ obligatoire avec liste de valeurs :
Champ date non obligatoire :
Champ date obligatoire :
Exemple lorsque les champs sont collés (classe, numéro, sous-numéro d'une commande) :

   Cette règle ne s'applique pas aux composants suivants : champ intitulé, case à cocher, radio bouton, bouton, lien url, image, texte et groupe.

Placement du libellé
   L'espace entre le libellé et le champ est de 10 pixels, lorsqu'il est à gauche du champ :

   La position du libellé est de 20 pixels, lorsqu'il est au-dessus du champ :

   Ce dernier sera aligné par rapport à la zone de saisie et non par rapport à son encombrement :

   Même lorsque le champ est obligatoire :

Espacement entre les champs
   La position en hauteur entre les champs est de 25 pixels

   

Cadre de regroupement
   Dans un groupe, le premier composant du haut est positionné à 20 pixels en dessous du cadre :

   

   Le bas du cadre est à 5 pixels du dernier composant et à 5 pixels du groupe suivant :

   

Alignement
   Les composants sont alignés le plus souvent possible sur une même ligne :

   

   Pour un ensemble de composants d'une même colonne, les libellés sont alignés à droite alors que les champs sont alignés à gauche :

   

   Toujours dans une même colonne, il est préférable d'uniformiser le plus possible la largeur des champs quand cela est possible. Il n'est pas logique d'avoir un champ de 20 caractères de large alors que l'on peut en saisir qu'un :

   

   Il est important que la largeur des libellés cadrés à droite dans une même colonne soient de même largeur :

   

Champs code + intitulé
   L'espace entre le champ code et le champ intitulé est de 5 pixels. De cette façon, lorsque le champ code possède une liste de valeurs, les 2 champs sont alors collés :

   

Fourchettes
   Le champ de début est sur la même ligne que le champ de fin.
En colonne, les libellés, les champs de début et de fin sont alignés à droite :

   

   Lorsque la colonne des fourchettes est importante et qu'il y a beaucoup de disparité sur la largeur des champs, on peut prendre l'alignement ci-dessous :

   

Largeur des champs "date", "période" et "heure"
   Les champs "date" doivent avoir une largeur de 100 pixels.
Les champs "période" doivent avoir une largeur de 80 pixels.
Les champs "heure" doivent avoir une largeur de 65 pixels.

Nombre de colonnes par grille
   Pour obtenir un affichage efficace des grilles, il est préférable de ne pas dépasser 25 colonnes par grille.