PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Mise en place
  • Créer un nouvel agencement
  • Créer un nouvel agencement pour une fenêtre
  • Créer un nouvel agencement pour une fenêtre
  • Créer un nouvel agencement pour une fenêtre interne
  • Manipulations des agencements
  • Gestion des champs dans les agencements
  • Cas particulier de l'Action Bar
  • Caractéristiques 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
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.
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 :
Versions 20 et supérieures
WINDEV MobileUniversal Windows 10 App Cette fonctionnalité est désormais disponible pour les applications Windows Phone.
Nouveauté 20
WINDEV MobileUniversal Windows 10 App Cette fonctionnalité est désormais disponible pour les applications Windows Phone.
WINDEV MobileUniversal Windows 10 App Cette fonctionnalité est désormais disponible pour les applications Windows Phone.
Versions 21 et supérieures
WINDEVWINDEV MobileUniversal Windows 10 App Cette fonction est désormais disponible en mode Universal Windows 10 App.
Nouveauté 21
WINDEVWINDEV MobileUniversal Windows 10 App Cette fonction est désormais disponible en mode Universal Windows 10 App.
WINDEVWINDEV MobileUniversal Windows 10 App Cette fonction est désormais disponible en mode Universal Windows 10 App.
Mise en place

Créer un nouvel agencement

Pour créer un nouvel agencement :
  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. Dans la fenêtre qui s'affiche, sélectionnez la plateforme et l'orientation du nouvel agencement à créer.
    Remarques :
    • Si votre projet est développé pour une seule plateforme (par exemple Android), vous pouvez créer un agencement pour un des modèles de téléphone ou de tablette disponibles.
    • Si votre projet est multi-plateforme (par exemple Android et iOS), vous pouvez créer un agencement spécifique pour chaque plateforme. Pour plus de détails sur les projets multi-plateforme, consultez Configuration de projet.
  4. Validez.
  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.
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 MobileAndroidiPhone/iPadUniversal Windows 10 App

Créer un nouvel agencement pour une fenêtre

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. 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.
    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.
    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).
  9. Sélectionnez l'option voulue et passez à l'étape suivante de l'assistant.
  10. Validez l'assistant.
  11. Si nécessaire les différents agencements sont créés.
  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.
Versions 22 et supérieures
WINDEV

Créer un nouvel agencement pour une fenêtre

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. Validez 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.
Nouveauté 22
WINDEV

Créer un nouvel agencement pour une fenêtre

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. Validez 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.
WINDEV

Créer un nouvel agencement pour une fenêtre

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. Validez 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.
Versions 22 et supérieures

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 "Ajouter" 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.
Nouveauté 22

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 "Ajouter" 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.

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 "Ajouter" 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 :
  • Un champ créé dans un agencement est créé dans tous les agencements.
  • Un champ est positionné au même endroit dans tous les agencements. Il possède les mêmes propriétés de largeur et de hauteur.
  • Un champ déplacé dans un agencement est déplacé dans tous les agencements.
Pour qu'un champ ait des propriétés et une position spécifiques selon les agencements, il est nécessaire de le dissocier. Plusieurs options sont possibles.
Pour manipuler un champ indépendamment sur les différents agencements :
  1. Sélectionnez le champ.
  2. Affichez le menu contextuel (clic droit).
  3. Dans le menu "Agencements", les différentes possibilités apparaissent :
    • Dissocier la position : permet de modifier la position du champ sur un ou plusieurs agencements.
    • Dissocier la taille : permet de modifier la taille du champ sur un ou plusieurs agencements.
    • Dissocier l'ancrage : permet de dissocier l'ancrage dans un ou plusieurs agencements.
    • Versions 20 et supérieures
      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.
      Nouveauté 20
      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.
      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.
    • Rendre invisible dans cet agencement : permet de rendre visible ou invisible le champ dans un ou plusieurs agencements.
Remarques :
  • Ce menu contextuel est disponible pour une sélection de champs.
  • Il est également possible d'utiliser l'icône située dans la barre de titre de l'agencement en cours d'édition. Un clic sur cette icône permet de dissocier automatiquement la taille et/ou la position du champ sélectionné à la première modification (effectuée à la souris ou au clavier).
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.

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.

Caractéristiques 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. 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.
  • Supprimer l'agencement sélectionné.
  • Versions 21 et supérieures
    Rafraîchir automatiquement : Permet de rafraîchir l'agencement dès qu'une modification est effectuée dans la fenêtre.
    Nouveauté 21
    Rafraîchir automatiquement : Permet de rafraîchir l'agencement dès qu'une modification est effectuée dans la fenêtre.
    Rafraîchir automatiquement : Permet de rafraîchir l'agencement dès qu'une modification est effectuée dans la fenêtre.
  • Versions 21 et supérieures
    Rafraîchir cet agencement : Permet de rafraîchir immédiatement l'agencement.
    Nouveauté 21
    Rafraîchir cet agencement : Permet de rafraîchir immédiatement l'agencement.
    Rafraîchir cet agencement : Permet de rafraîchir immédiatement l'agencement.
  • Versions 21 et supérieures
    Tout rafraîchir : Permet de rafraîchir immédiatement tous les agencements.
    Nouveauté 21
    Tout rafraîchir : Permet de rafraîchir immédiatement tous les agencements.
    Tout rafraîchir : Permet de rafraîchir immédiatement tous les agencements.

Comparaison de fenêtres avec agencements

WINDEV Mobile permet de comparer deux projets, deux éléments d'un projet, ... 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 de la plateforme, de l'orientation et de la taille de l'écran.
L'agencement est automatiquement modifié lorsque l'appareil passe du mode portrait au mode paysage.
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 (sous l'éditeur).
L'agencement est automatiquement modifié lorsque l'appareil passe du mode portrait au mode paysage.
Pour chaque plateforme, 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) :
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é.
  • 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).
  • Orientation de la fenêtre.
  • Plateforme d'édition.
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 maximisée mobile, 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.
  • Si la fenêtre est une fenêtre non maximisée mobile, les critères pris en compte sont : le système, l'orientation et la taille de la plateforme.

Programmation

Il est possible :
  • de forcer l'agencement à utiliser grâce à la fonction FenChangeAgencement. Cette fonction attend en paramètre le numéro de l'agencement à utiliser. Ce numéro est indiqué dans la barre de titre de l'agencement.
  • Versions 20 et supérieures
    de connaître l'agencement en cours grâce à la fonction FenAgencementEnCours.
    Nouveauté 20
    de connaître l'agencement en cours grâce à la fonction FenAgencementEnCours.
    de connaître l'agencement en cours grâce à la fonction FenAgencementEnCours.
Version minimum requise
  • Version 19
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire