DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Editeurs / Editeur de fenêtres et de pages / Editeur de fenêtres
  • Présentation
  • Mise en place
  • Créer un nouvel agencement pour une fenêtre WINDEV Mobile
  • Créer un nouvel agencement pour une fenêtre WINDEV
  • Créer un nouvel agencement pour une fenêtre interne
  • Manipulations des agencements
  • Gestion des champs dans les agencements
  • Menu contextuel des champs spécifique aux agencements
  • Cas particulier de l'Action Bar
  • Menu contextuel des agencements
  • Comparaison de fenêtres avec agencements
  • Gestion des agencements en exécution
  • Fonctionnement par défaut
  • Programmation
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
L'agencement permet de définir plusieurs vues d'une fenêtre dans un même projet sans dupliquer cette fenêtre.
Dans une application WINDEV ou WINDEV Mobile, il est ainsi par exemple possible de définir :
  • une vue spécifique pour le mode portrait,
  • une vue spécifique pour le mode paysage,
  • une vue spécifique au téléphone,
  • une vue spécifique à la tablette,
  • ...
En exécution, il est possible de :
Cette page d'aide présente :
Remarque : Il est également possible de créer des agencements dans les projets WEBDEV pour créer des sites "mobile friendly". Pour plus de détails, consultez Agencements WEBDEV.
Mise en place
Universal Windows 10 AppAndroidiPhone/iPad

Créer un nouvel agencement pour une fenêtre WINDEV Mobile

Pour créer un nouvel agencement pour une fenêtre :
  1. Ouvrez la fenêtre concernée sous l'éditeur.
  2. Sous le volet "Fenêtre", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez l'option "Ajouter des agencements".
    Ajouter des agencements
  3. L'assistant d'ajout d'un agencement se lance. Passez si nécessaire l'étape de présentation.
  4. L'assistant propose de gérer les différences entre le téléphone et la tablette.
    Différences tablette/téléphone
    Il est possible de :
    • Choisir uniquement la plateforme en cours (téléphone uniquement ou tablette uniquement).
    • Créer des agencements (car la disposition des champs est différente sur la tablette et sur le téléphone).
    • Utiliser uniquement les ancrages (car les ancrages suffisent pour repositionner les champs dans la fenêtre suivant sa taille).
  5. Passez à l'étape suivante de l'assistant.
  6. L'assistant propose de gérer l'orientation Portrait/Paysage de l'application.
    Portrait/Paysage
    Il est possible de :
    • Créer des agencements (car la disposition des champs est différente sur la tablette et sur le téléphone).
    • Utiliser uniquement les ancrages (car les ancrages suffisent pour repositionner les champs dans la fenêtre suivant son orientation).
  7. Passez à l'étape suivante de l'assistant.
  8. L'assistant propose d'utiliser une présentation différente pour chaque plateforme utilisée (par exemple, une présentation sous iOS et une présentation sous Android).
    Système d'exploitation
  9. Sélectionnez l'option voulue et passez à l'étape suivante de l'assistant.
  10. Terminez l'assistant.
  11. Si nécessaire les différents agencements sont créés.
    Agencements
  12. L'éditeur affiche sur la droite les différents agencements disponibles pour la fenêtre. Un double-clic sur la pastille de l'agencement voulu permet de l'afficher sous l'éditeur pour le modifier.
Astuce :
  • La création d'un agencement se base sur la plateforme d'édition en cours. Il est plus rapide de se placer sur l'agencement le plus proche graphiquement pour limiter les modifications.
  • Pour personnaliser les champs des différents agencements, il est recommandé de commencer par l'agencement le plus grand et le plus complet puis de créer les autres agencements en réduisant ou en masquant des éléments.
WINDEV

Créer un nouvel agencement pour une fenêtre WINDEV

Pour créer un nouvel agencement pour une fenêtre :
  1. Ouvrez la fenêtre concernée sous l'éditeur.
  2. Sous le volet "Fenêtre", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez l'option "Ajouter des agencements".
  3. Si le projet WINDEV ne contient pas de plateforme mobile, la fenêtre de création d'un agencement s'affiche. Cliquez sur "Ajouter" pour ajouter un nouvel agencement.
  4. Si le projet WINDEV contient au moins une plateforme mobile, l'assistant d'ajout d'un agencement se lance. Passez si nécessaire l'étape de présentation.
    1. L'assistant propose de gérer les différences entre le téléphone et la tablette.
      Il est possible de :
      • Choisir uniquement la plateforme en cours (téléphone uniquement ou tablette uniquement).
      • Créer des agencements (car la disposition des champs est différente sur la tablette et sur le téléphone).
      • Utiliser uniquement les ancrages (car les ancrages suffisent pour repositionner les champs dans la fenêtre suivant sa taille).
    2. Passez à l'étape suivante de l'assistant.
    3. L'assistant propose de gérer l'orientation Portrait/Paysage de l'application.
      Il est possible de :
      • Créer des agencements (car la disposition des champs est différente sur la tablette et sur le téléphone).
      • Utiliser uniquement les ancrages (car les ancrages suffisent pour repositionner les champs dans la fenêtre suivant son orientation).
    4. Passez à l'étape suivante de l'assistant.
    5. L'assistant propose d'utiliser une présentation différente pour chaque plateforme utilisée (par exemple, une présentation sous iOS et une présentation sous Android).
    6. Sélectionnez l'option voulue et passez à l'étape suivante de l'assistant.
    7. Terminez l'assistant.
  5. L'éditeur affiche sur la droite les différents agencements disponibles pour la fenêtre. Un double-clic sur la pastille de l'agencement voulu permet de l'afficher sous l'éditeur pour le modifier.
WINDEVWINDEV Mobile

Créer un nouvel agencement pour une fenêtre interne

En mobile, de nombreuses fonctionnalités utilisent des fenêtres internes : fenêtre de détail dans une table, rendez-vous dans un champ Planning, ...
L'utilisation des agencements sur les fenêtres internes permet principalement de proposer une interface pour le mode portrait et le mode paysage.
Pour créer un nouvel agencement pour une fenêtre interne :
  1. Ouvrez la fenêtre interne concernée sous l'éditeur.
  2. Sous le volet "Fenêtre", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez l'option "Ajouter des agencements".
  3. La fenêtre d'ajout d'agencements apparaît.
    Cliquez sur "Créer" pour ajouter un nouvel agencement.
  4. Validez la fenêtre.
  5. L'éditeur affiche sur la droite les différents agencements disponibles pour la fenêtre interne.
    • Un double-clic sur la pastille de l'agencement voulu permet de l'afficher sous l'éditeur pour le modifier.
    • L'option "Description" du menu contextuel de la barre de titre de l'agencement permet de définir les paramètres de l'agencement.
Manipulations des agencements

Gestion des champs dans les agencements

Par défaut, la dissociation automatique est activée () :
  • Un champ créé dans un agencement est créé dans tous les agencements, avec les mêmes caractéristiques (taille, position, etc.).
  • Un champ déplacé (ou redimensionné) dans un agencement est déplacé (ou redimensionné) uniquement dans l'agencement en cours.
  • La dissociation automatique est activée par défaut pour tous les champs. Lorsque ce mode est activé, toute modification de taille ou de position effectuée sur un champ d'une des fenêtres spécifiques de l'agencement ne sera pas reportée sur les autres.
Pour qu'une modification de champ (position ou taille) soit reportée dans tous les agencements, il est possible d'enlever la dissociation automatique () : la prochaine modification de taille ou de position sera effectuée sur tous les agencements. Un triangle rouge peut apparaître lors de la sélection d'un champ. Il indique que le champ est dissocié, et que sa modification affectera uniquement l'agencement en cours.
Conseil : Des toast apparaissent régulièrement pour vous informer de l'influence des modification du champ dans les autres agencements en fonction de l'activation ou non de la dissociation automatique et / ou des options de dissociation du champ.

Menu contextuel des champs spécifique aux agencements

Le menu contextuel "Agencements" des champs permet également de gérer la dissociation ou non des caractéristiques du champ.
Ces options sont les suivantes :
  • Dissocier la position : Si cette option est sélectionnée, la position du champ sera modifiée uniquement sur l'agencement en cours. Si cette option n'est pas sélectionnée, la position du champ sera modifiée sur tous les agencements.
  • Dissocier la taille : Si cette option est sélectionnée, la taille du champ sera modifiée uniquement sur l'agencement en cours. Si cette option n'est pas sélectionnée, la taille du champ sera modifiée sur tous les agencements.
  • Dissocier l'ancrage : Si cette option est sélectionnée, l'ancrage du champ sera modifié uniquement sur l'agencement en cours. Si cette option n'est pas sélectionnée, l'ancrage du champ sera modifié sur tous les agencements.
  • Dissocier la police : permet de dissocier la police dans un ou plusieurs agencements. Il est par exemple possible d'utiliser une police spécifique pour Android et une autre police pour iOS. Il est également possible de spécifier la taille de la police par agencement.
Remarque : Si le mode dissociation automatique n'est pas activé, lors de la désactivation d'une dissociation par le menu contextuel, la caractéristique pour l'agencement en cours est appliquée automatiquement pour tous les agencements.
Le menu contextuel "Agencements" des champs propose également d'autres options :
  • Rendre invisible dans cet agencement : Permet de rendre invisible le champ sélectionné dans l'agencement en cours.
  • Rendre visible dans tous les agencements : Permet de rendre le champ en cours visible dans tous les agencements.
Remarque : Ce menu contextuel est disponible pour une sélection de champs.
Limite : Pour les champs Graphes, il n'est pas possible de dissocier les propriétés du titre et de la légende entre plusieurs agencements.
AndroidiPhone/iPad

Cas particulier de l'Action Bar

Le champ Action Bar est disponible en Android et iOS.
Lors de la génération de l'application, le champ natif correspondant à la plateforme en cours sera automatiquement choisi.

Menu contextuel des agencements

Le menu contextuel des vignettes des agencements disponibles permet de gérer les agencements :
Il est possible de :
  • Visualiser la description de l'agencement et de la modifier. Pour plus de détails, consultez Paramètres de l'agencement.
  • Activer l'agencement, c'est-à-dire l'afficher pour le modifier.
  • Activer l'agencement en mode double vue : les deux agencements pourront être affichés et modifiés en parallèle.
  • Créer un nouvel agencement à partir de celui en cours.
  • Supprimer l'agencement sélectionné.
  • Afficher des vignettes proportionnelles.
  • Rafraîchir automatiquement : Permet de rafraîchir l'agencement dès qu'une modification est effectuée dans la fenêtre.
  • Rafraîchir cet agencement : Permet de rafraîchir immédiatement l'agencement.
  • Tout rafraîchir : Permet de rafraîchir immédiatement tous les agencements.

Comparaison de fenêtres avec agencements

WINDEV et WINDEV Mobile permettent de comparer deux projets, deux éléments d'un projet, etc. Pour plus de détails, consultez Comparateur de projets.
Lors de la comparaison de fenêtres contenant des agencements, les différences sur chaque agencement sont présentées.
Gestion des agencements en exécution

Fonctionnement par défaut

L'agencement initial est automatiquement choisi en fonction :
  • du système,
  • de l'orientation,
  • de la taille de la plateforme,
  • de la taille de la fenêtre ou de la page (sous l'éditeur).
WINDEV Mobile L'agencement est automatiquement modifié lorsque l'appareil passe du mode portrait au mode paysage.
Il est possible de définir les paramètres de l'agencement (option "Description" du menu contextuel de la barre de titre de l'agencement) pour chaque plateforme :
iPhone/iPad Attention, l'indication Téléphone / Tablette est uniquement prise en compte pour la taille de la fenêtre sous l'éditeur. Cette information n'est pas prise en compte en exécution.
Ces paramètres sont pris en compte pour déterminer le choix de l'agencement à l'exécution :
  • Taille minimale du matériel sur lequel l'agencement peut être lancé.
  • WINDEVAndroidiPhone/iPad Système d'exploitation. Si "Multi OS" est sélectionné, l'agencement pourra être lancé sur tous les OS. Il est possible de sélectionner des systèmes spécifiques (les systèmes proposés correspondent aux plateformes définies pour le projet).
  • AndroidiPhone/iPad Orientation de la fenêtre.
  • WINDEVAndroidiPhone/iPad Plateforme d'édition.
WINDEVAndroidiPhone/iPad Selon le type de la fenêtre exécutée, l'ordre des paramètres pris en compte varient. Ainsi :
  • Si la fenêtre est une fenêtre mobile (maximisée ou non), les critères pris en compte sont : le système, l'orientation et la taille de la plateforme.
  • Si la fenêtre est une fenêtre Windows, les critères pris en compte sont : le système. La fenêtre la plus grande est choisie. Si plusieurs ont la même taille, le choix est fait selon l'orientation.
iPhone/iPad L'indication de la taille de la plateforme n'est pas prise en compte en exécution (tablette/téléphone). L'agencement le plus grand est choisi.
Remarque : Si l'agencement choisi ne convient pas, il est possible de forcer l'utilisation d'un agencement par programmation.

Programmation

Il est possible :
  • de forcer l'agencement à utiliser (fonction FenChangeAgencement). Il suffit d'indiquer en paramètre le numéro de l'agencement à utiliser. Ce numéro est indiqué dans la barre de titre de l'agencement.
  • de connaître l'agencement en cours (fonction FenAgencementEnCours).
Version minimum requise
  • Version 19
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 18/09/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale