Widgets Layout


Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png  Ces types de widgets appartiennent à la catégorie Layout de la bibliothèque des widgets. Ils permettent de définir les emplacements des widgets sur l'application.

Pour faciliter leur positionnement, l'écran est virtuellement découpé en lignes occupant au maximum 12 colonnes de taille égale. Suivant la taille du support graphique (moniteurs d'ordinateur, smartphones, tablettes, TV, ...), un widget peut occuper la totalité de ces 12 colonnes (pleine ligne) ou plusieurs widgets peuvent être affichés sur la même ligne.
         EVApps - widget Layout - Virtual Screen.png

Plusieurs modes sont disponibles pour prédéfinir les emplacements des widgets sur une ligne, la taille de chaque emplacement pouvant ensuite être réajustée manuellement.

Widget Type d'utilisation Design
Apps - Widget - Layout 12 icon.png Écran large Regroupement des 12 colonnes pour définir un emplacement unique
Apps - Widget - Layout 6 icon.png Création de 2 emplacements d'une largeur de 6 colonnes
Apps - Widget - Layout 4 icon.png Création de 3 emplacements d'une largeur de 4 colonnes
Apps - Widget - Layout 3 icon.png Création de 4 emplacements d'une largeur de 3 colonnes
Apps - Widget - Layout 2 icon.png Écran de smartphone Création de 6 emplacements d'une largeur de 2 colonnes

Note : Permet l'affichage des widgets les uns en dessous des autres

Remarques

Open url.png  voir Remarques générales sur les widgets

  • L'application peut occuper un nombre illimité de lignes.

Attention

  • Si vous supprimez une ligne, tous les widgets positionnés dessus sont automatiquement supprimés.

Best Practice big icon.pngBonnes pratiques

  • Créez un point de restauration via EVApps - GUI - History icon.png avant d'effectuer toute modification des propriétés et de la mise en page des widgets.

Procédure : Comment définir les emplacements des widgets

1. Dans le volet Objets, cliquez sur Apps - Add widget icon.png.

2. Cliquez-glissez l'un des widgets de la catégorie Layout Apps - Widget - Layout 12 icon.png, Apps - Widget - Layout 6 icon.png, Apps - Widget - Layout 4 icon.png, Apps - Widget - Layout 3 icon.png, Apps - Widget - Layout 2 icon.png vers le volet Conception.

  • S'il s'agit d'une nouvelle page, le volet Conception affiche la première ligne avec une zone comportant le libellé Drop a Layout Widget Here.
             EVApps - widget Layout - Procedure 1.png
  • Les emplacements disponibles sont affichés en vert, avec le libellé Drop Here.
             EVApps - widget Layout - Procedure 2.png
  • La ligne est fractionnée en autant d'emplacements de largeur égale qu'indiqué par le widget sélectionné.
             EVApps - widget Layout - Procedure 3.png

3. Vous pouvez définir des colonnes sous un emplacement.

Étape 1 Étape 2
EVApps - widget Layout - Procedure 4.png EVApps - widget Layout - Procedure 5.png

4. Vous pouvez modifier la disposition des emplacements positionnés dans le volet Conception :

  • Pour agrandir la largeur d'un emplacement, cliquez sur EVApps - GUI - Move right icon.png dans la barre d'outils de l'emplacement situé à sa droite.
Étape 1 Étape 2
EVApps - widget Layout - Procedure 6.png EVApps - widget Layout - Procedure 7.png
  • Pour réduire la largeur d'un emplacement, cliquez sur EVApps - GUI - Move left icon.png dans la barre d'outils de l'emplacement situé à sa gauche.
Étape 1 Étape 2
EVApps - widget Layout - Procedure 8.png EVApps - widget Layout - Procedure 9.png
  • Pour supprimer tous les emplacements situés sur une ligne, cliquez sur Apps - Delete icon.png dans la barre d'outils de celle-ci. Attention : Tous les widgets positionnés dans les emplacements de la ligne sont supprimés.
Étape 1 Étape 2
EVApps - widget Layout - Procedure 10.png EVApps - widget Layout - Procedure 11.png
  • Pour supprimer un emplacement, cliquez sur Apps - Delete icon.png dans la barre d'outils de celui-ci. Attention : Le widget positionné dans l'emplacement est supprimé.
Étape 1 Étape 2
EVApps - widget Layout - Procedure 12.png EVApps - widget Layout - Procedure 13.png
  • Pour déplacer une ligne, cliquez sur Cursor move icon.png dans la barre d'outils de celle-ci.
Étape 1 Étape 2 Étape 3
EVApps - widget Layout - Procedure 14.png EVApps - widget Layout - Procedure 15.png EVApps - widget Layout - Procedure 16.png
  • Pour fractionner un emplacement en 2, cliquez sur Apps - Plus icon.png dans la barre d'outils de celui-ci.
Étape 1 Étape 2
EVApps - widget Layout - Procedure 17.png EVApps - widget Layout - Procedure 18.png
Tags:
Modifié par Utilisateur inconnu le 2017/01/06 14:14
Créé par Administrator XWiki le 2014/09/02 11:43

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help
•  Service Bots

Powered by XWiki ©, EasyVista 2021