DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Editeurs / Editeur de fenêtres et de pages / Editeur de fenêtres
  • Présentation
  • Caractéristiques d'une fenêtre coulissante basse
  • Type de fenêtre
  • Les différents modes d'affichage
  • Comment proposer des fenêtres coulissantes basses (Bottom sheet) ?
  • Création des fenêtres internes
  • Définition de la fenêtre coulissante basse associée à une fenêtre
  • Programmation des fenêtres coulissantes basses
  • Afficher la fenêtre coulissante basse
  • Propriétés WLangage permettant de manipuler les fenêtres coulissantes basses
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
Les fenêtres coulissantes basses (également appelées "Bottom sheet") sont de plus en plus utilisées dans les applications mobiles.
Les caractéristiques d'utilisation de ce type de fenêtres sont les suivantes :
  • La fenêtre coulissante apparaît depuis le bas de l'écran.
  • La fenêtre coulissante peut être modale ou non.
  • La fenêtre coulissante possède 4 modes d'affichage : masqué, réduit, intermédiaire et étendu. Selon le mode utilisé, la fenêtre coulissante recouvre partiellement ou totalement la fenêtre précédente.
Un usage typique de ce type de fenêtre est l'affichage d'un menu avec lequel l'utilisateur peut interagir, ou encore l'affichage de données supplémentaires contextuelles à la fenêtre hôte.
Caractéristiques d'une fenêtre coulissante basse

Type de fenêtre

Deux types de fenêtres sont disponibles :
  • Fenêtre coulissante basse modale :
    Les fenêtres coulissantes basses modales permettent de proposer à l'utilisateur un ensemble de choix tout en bloquant l'interaction avec le reste de l'écran. Elles constituent une alternative aux menus et aux boîtes de dialogue en offrant un espace supplémentaire pour le contenu et les actions.
    La fenêtre hôte est grisée (effet de GFI).
    Si l'utilisateur clique en dehors de la fenêtre coulissante basse, cette dernière est entièrement masquée.
  • Fenêtre coulissante basse persistante :
    Les fenêtres coulissantes basses persistantes coexistent avec la fenêtre hôte en permettant de visualiser et d'interagir simultanément avec le contenu de la fenêtre hôte et celui de la fenêtre coulissante.

    Elles sont couramment utilisées :
    • pour proposer une fonctionnalité ou un contenu secondaire,
    • pour proposer des informations supplémentaires contextuelles au contenu affiché dans la fenêtre hôte.
Les différents modes d'affichage
Plusieurs modes d'affichage sont disponibles :
  • Masquée : La fenêtre coulissante basse est invisible à l'écran.
  • Affichage réduit : Seule la partie supérieure du contenu est visible en bas de l'écran de la fenêtre hôte.
  • Affichage intermédiaire : La plus grande partie du contenu est visible à l'écran. En général, la moitié de la fenêtre hôte est occupée.
  • Affichage étendu : La fenêtre coulissante basse occupe la totalité ou quasi-totalité de l'écran, masquant le contenu de la fenêtre hôte.
L'utilisateur peut passer d'un mode d'affichage à l'autre en effectuant un déplacement avec le doigt sur le fond de la fenêtre coulissante basse.
Affichage réduit
Affichage intermédiaire
Affichage étendu
Comment proposer des fenêtres coulissantes basses (Bottom sheet) ?
Pour proposer des fenêtres coulissantes basses, les différentes étapes sont les suivantes :
  1. Création de fenêtres internes. Ces fenêtres internes seront les fenêtres coulissantes.
  2. Définition des fenêtres coulissantes à afficher dans la fenêtre de description de la fenêtre de base.
  3. Définition du mode d'affichage des fenêtres coulissantes :
    • soit par gesture (fonctionnement par défaut : un glisser vers le haut permet d'afficher la fenêtre coulissante basse).
    • soit par programmation.

Création des fenêtres internes

Les fenêtres coulissantes sont des fenêtres internes.
Cette fenêtre interne a les caractéristiques suivantes :
  • La fonction Ferme utilisée dans la fenêtre coulissante basse ou dans la fenêtre principale fermera les deux fenêtres.
  • Les champs de la fenêtre coulissante basse sont accessibles via la fenêtre principale, grâce au mot-clé MaFenêtreCoulissanteBasse :
    // Change la couleur d'un libellé dans la fenêtre coulissante basse
    MaFenêtreCoulissanteBasse.LIB_Libellé.Couleur = RougeClair
  • Aspect de la fenêtre coulissante :
    Pour prendre en compte la couleur et le cadre de la fenêtre coulissante définis par la fenêtre interne, décochez l'option "Aspect système (arrondis, ombre,...)".
  • Pour afficher des informations plus ou moins détaillées dans les différents modes d'affichage de la fenêtre coulissante basse, il est conseillé de définir plusieurs agencements dans la fenêtre interne, chaque agencement correspondant à un mode d'affichage de la fenêtre interne.

Définition de la fenêtre coulissante basse associée à une fenêtre

Pour définir les fenêtres coulissantes associées à une fenêtre :
  1. Affichez l'onglet "Détail" de la fenêtre de description de la fenêtre principale.
  2. Sélectionnez la fenêtre interne à afficher en tant que fenêtre coulissante basse :
    • Dans la zone "Fenêtre coulissante basse (bottom sheet)", indiquez :
      • la fenêtre interne à afficher.
        En déroulant la liste, les différentes fenêtres internes de l'application sont proposées.
      • l'aspect de la fenêtre interne.
        Si l'option "Aspect système (arrondis, ombre,...)" est cochée, le style de la fenêtre coulissante est similaire aux applications systèmes. Si cette option est décochée, il est possible d'avoir un cadre personnalisé intégré directement dans la fenêtre interne.
      • si la fenêtre coulissante est modale ou non modale. Si la fenêtre coulissante est non modale, il est possible d'autoriser ou non la fermeture de la fenêtre. Dans ce cas, l'utilisateur pourra lui-même masquer la totalité de la fenêtre.
      • les différentes hauteurs de la fenêtre coulissante basse :
        • Hauteur étendue : Hauteur maximale de la fenêtre coulissante basse.
        • Hauteur intermédiaire : Hauteur de l'affichage intermédiaire.
        • Hauteur réduite : Hauteur minimale affichée.
      Ces différentes hauteurs peuvent être exprimées en pourcentage de la hauteur de l'écran, en pixels, ou correspondre à une option prédéfinie.
      Si le mode d'affichage ne doit pas être disponible, la hauteur peut correspondre à 0 ou à l'option pré-définie "Mode désactivé". Les ancrages définis dans la fenêtre interne seront appliqués.
  3. Validez.
Programmation des fenêtres coulissantes basses

Afficher la fenêtre coulissante basse

Pour que la fenêtre coulissante basse soit utilisable, il faut tout d'abord qu'elle soit visible.
La fenêtre coulissante basse peut être visible :
  • soit par défaut, selon les options définies dans la fenêtre de description de la fenêtre hôte.
  • soit par programmation avec la fonction FenCoulissanteVisible.
La fonction FenCoulissanteVisible permet également de spécifier le mode d'affichage de la fenêtre coulissante basse.

Propriétés WLangage permettant de manipuler les fenêtres coulissantes basses

Le mot-clé MaFenêtreCoulissanteBasse permet de manipuler la fenêtre coulissante basse associée à la fenêtre en cours.
Les propriétés suivantes permettent de manipuler les caractéristiques de cette fenêtre coulissante basse :
CoinArrondiLa propriété CoinArrondi permet de savoir et de définir si la fenêtre coulissante basse associée à la fenêtre en cours possède des coins arrondis.
FenêtreInterneLa propriété FenêtreInterne permet de connaître et modifier la fenêtre interne contenue dans la fenêtre coulissante basse associée à la fenêtre en cours.
HauteurÉtendueLa propriété HauteurEtendue permet de connaître et de définir la hauteur "étendue" de la fenêtre coulissante basse associée à la fenêtre en cours.
HauteurIntermédiaireLa propriété HauteurIntermédiaire permet de connaître et de définir la hauteur "intermédiaire" de la fenêtre coulissante basse associée à la fenêtre en cours.
HauteurRéduiteLa propriété HauteurRéduite permet de connaître et de définir la hauteur "réduite" de la fenêtre coulissante basse associée à la fenêtre en cours.
MasquableLa propriété Masquable permet de savoir et de définir si l'utilisateur peut fermer au doigt la fenêtre coulissante basse associée à la fenêtre en cours.
ModaleLa propriété Modale permet de savoir et de définir si la fenêtre coulissante basse associée à la fenêtre en cours est modale ou non.
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 21/02/2024

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