PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

  • Présentation de l'Action Bar
  • Créer et paramétrer une Action Bar
  • Pour créer une fenêtre avec une Action Bar
  • Action Bar : aspect, titre et icône
  • Aspect de l'Action Bar
  • Titre et icône
  • Gestion du clic sur l'icône
  • Action Bar : Gestion du menu
  • Gestion du menu principal
  • Cas particulier : afficher une ou plusieurs options de menu directement dans l'Action Bar
  • Cas particulier : afficher un menu contextuel d'un champ dans l'Action Bar
  • Action Bar : Navigation par vues (ou volets)
  • Présentation
  • Ajout de vues dans une Action Bar
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 de l'Action Bar
Les "Action Bars" remplacent la barre de titre d'une fenêtre et permettent d'afficher plusieurs informations :
  • l'icône de l'application,
  • le titre de la fenêtre,
  • certaines options de menu,
  • le menu déroulant de votre fenêtre.
Remarques :
    Versions 19 et supérieures
    En version 19, la fenêtre de description des champs Action Bar a évolué. Pour plus de détails, consultez Description du champ Action Bar.
    Nouveauté 19
    En version 19, la fenêtre de description des champs Action Bar a évolué. Pour plus de détails, consultez Description du champ Action Bar.
    En version 19, la fenêtre de description des champs Action Bar a évolué. Pour plus de détails, consultez Description du champ Action Bar.
    Versions 21 et supérieures
    Universal Windows 10 App Le champ Action Bar est désormais disponible pour les applications en mode Universal Windows 10 App.
    Nouveauté 21
    Universal Windows 10 App Le champ Action Bar est désormais disponible pour les applications en mode Universal Windows 10 App.
    Universal Windows 10 App Le champ Action Bar est désormais disponible pour les applications en mode Universal Windows 10 App.
    Créer et paramétrer une Action Bar
    Par défaut, les fenêtres sont créées avec une Action Bar.
    Il est possible de configurer les barres utilisées dans la fenêtre :
    1. Affichez la fenêtre de description de la fenêtre (option "Description" du menu contextuel).
    2. Dans l'onglet "Style", indiquez le contenu de la barre du haut :
      Choix de la barre du haut
      • Plein écran : aucune barre n'est affichée,
      • Barre système seule : Seule la barre système sera affichée.
      • Barre système + Action Bar : La barre système et l'Action Bar seront affichées.
      • Action Bar seule : Seule l'Action Bar est affichée.
      • Barre système + Titre : La barre système et la barre de titre de la fenêtre sont affichées.
      • Titre seul : Seule la barre de titre de la fenêtre est affichée.

    Pour créer une fenêtre avec une Action Bar

    Pour créer une Action Bar dans une fenêtre, sélectionnez l'option "Insertion .. Action Bar (Android)".Pour créer une Action Bar dans une fenêtre, sous le volet "Fenêtre", dans le groupe "Barres et menus", déroulez "Autres barres" et cliquez sur "Action Bar (Android)".Pour créer une Action Bar dans une fenêtre, sous le volet "Fenêtre", dans le groupe "Barres et menus", déroulez "Autres barres" et cliquez sur "Action Bar".
    Remarques :
    • Pour mettre en place une "Action Bar" dans votre fenêtre, il est également possible d'effectuer les manipulations suivantes :
      1. Affichez la fenêtre de description de la fenêtre (option "Description" du menu contextuel).
      2. Dans l'onglet "Style", sélectionnez "Avec Action Bar".
      3. Validez. La barre de titre est remplacée par une Action Bar.
    • Pour supprimer une "Action Bar" dans votre fenêtre :
      1. Affichez la fenêtre de description de la fenêtre (option "Description" du menu contextuel).
      2. Dans l'onglet "Style", sélectionnez "Avec barre de titre" ou "Sans barre de titre".
      3. Validez.
    Action Bar : aspect, titre et icône

    Aspect de l'Action Bar

    L'onglet "Détail" de la fenêtre de description de l'Action Bar permet de définir son aspect. Il est possible de choisir :
    • la couleur de la police utilisée.
    • la couleur de fond utilisée.
    • l'image de fond de l'Action Bar. Le mode 9 images est disponible.

    Titre et icône

    L'Action Bar remplace la barre de titre de la fenêtre. Par défaut, l'Action Bar affiche le titre de la fenêtre courante et l'icône de l'application.
    Il est possible de modifier ces paramètres par programmation grâce aux propriétés suivantes :
    • Propriété ..Titre utilisée sur la fenêtre.
    • Propriété ..Image utilisée sur l'Action Bar.
      Si cette propriété correspond à chaîne vide (""), l’icône de l'application sera utilisée (cas par défaut).
      Attention, cette propriété n'est disponible qu'à partir de la version 4.0 d'Android (Ice cream sandwich, api level 14). Si elle est utilisée sur une version antérieure, cette propriété sera sans effet.

    Gestion du clic sur l'icône

    L'utilisateur peut cliquer sur l'icône affichée dans l'Action Bar d'une fenêtre. Le traitement "Clic sur l'icône" de l'Action Bar est associé à cette action.
    L'onglet "Détail" de la fenêtre de description de l'Action Bar permet de paramétrer l'action du clic sur l'icône. Il est possible de :
    • Exécuter le traitement de clic du champ : Le traitement "Clic sur l'icône" sera alors automatiquement exécuté.
    • Exécuter l'action de la touche 'back'  : Dans ce cas :
      • L'application exécutera l'événement "Clic sur l'icône".
      • L'application exécutera le traitement prédéfini permettant de retourner sur la fenêtre précédente. Ce traitement prédéfini ne sera pas exécuté si l'événement "Clic sur l'icône" renvoie Faux (cela permet par exemple de demander une confirmation à l'utilisateur).
      • Une flèche sera affichée dans le coin supérieur de l'icône pour symboliser la navigation.
        Remarques :
        • Si la fenêtre affichée est la seule fenêtre de l'application, aucune action par défaut ne sera exécutée. Seul l'événement "Clic sur l'icône" sera exécuté.
        • Si la fenêtre courante est fermée, son code de fermeture sera exécuté.
    • Revenir à la première fenêtre de l'application : Dans ce cas, l'application :
      • Exécutera l'événement "Clic sur l'icône".
      • Exécutera le traitement prédéfini : toutes les fenêtres encore ouvertes sont fermées à l'exception de la fenêtre principale (qui est réouverte si nécessaire). Ce traitement prédéfini ne sera pas exécuté si l'événement "Clic sur l'icône" retourne Faux (cela permet par exemple de demander une confirmation à l'utilisateur).
        Remarques :
        • Si la fenêtre principale est déjà affichée ou si l'application n'a pas de fenêtre principale, aucune action par défaut ne sera exécutée. Seul l'événement "Clic sur l'icône" sera exécuté.
        • Le code de fermeture des fenêtres fermées ne sera pas exécuté.
    • Versions 19 et supérieures
      Fenêtre coulissante gauche : Ouvre la fenêtre coulissante gauche : Dans ce cas, l'application :
      • Exécutera l'événement "Clic sur l'icône".
      • Exécutera le traitement prédéfini : la fenêtre coulissante gauche définie dans la fenêtre de description sera affichée avec l'effet indiqué.
        Pour plus de détails, consultez Fenêtre coulissante (Sliding menu).
      Nouveauté 19
      Fenêtre coulissante gauche : Ouvre la fenêtre coulissante gauche : Dans ce cas, l'application :
      • Exécutera l'événement "Clic sur l'icône".
      • Exécutera le traitement prédéfini : la fenêtre coulissante gauche définie dans la fenêtre de description sera affichée avec l'effet indiqué.
        Pour plus de détails, consultez Fenêtre coulissante (Sliding menu).
      Fenêtre coulissante gauche : Ouvre la fenêtre coulissante gauche : Dans ce cas, l'application :
      • Exécutera l'événement "Clic sur l'icône".
      • Exécutera le traitement prédéfini : la fenêtre coulissante gauche définie dans la fenêtre de description sera affichée avec l'effet indiqué.
        Pour plus de détails, consultez Fenêtre coulissante (Sliding menu).
    Action Bar : Gestion du menu

    Gestion du menu principal

    Dans une fenêtre n'utilisant pas d'Action Bar, le menu principal de l'application est affiché en bas de la fenêtre.
    Dans une fenêtre avec Action Bar, le menu principal est un menu déroulant, affiché à droite de l'Action Bar. En édition, un bouton avec trois traits est affiché. Ce bouton correspond au menu de l'Action Bar. Il permet d'afficher les différentes options du menu.
    Sous l'éditeur, un clic droit sur ce bouton (ou sur les options) permet d'afficher les différentes options de gestion des options de menu.
    En exécution, ce bouton permet d'afficher les options de premier niveau du menu. Si une option possède des sous-options, le clic sur l'option la remplacera par les sous-options. L'affichage ne sera pas réalisé en cascade.
    Rappel : Par convention, dans les applications Android, il est recommandé de n'avoir qu'un seul niveau d'options.
    Pour afficher un menu dans l'Action Bar :
    1. Affichez la fenêtre de description de l'Action Bar.
    2. Dans l'onglet "Détail", cochez l'option "Avec Menu".

    Cas particulier : afficher une ou plusieurs options de menu directement dans l'Action Bar

    En exécution, selon les matériels utilisés, la taille de l'Action Bar peut varier. Si l'Action Bar possède la place nécessaire, il peut être intéressant d'afficher une ou plusieurs options du menu déroulant directement dans l'Action Bar. Le système gère automatiquement les problèmes de place et de chevauchement.
    Pour afficher une option de menu directement dans l'Action Bar :
    1. Affichez la fenêtre de description de l'option de menu (option "Description" du menu contextuel).
    2. Dans l'onglet "IHM", cochez l'option "Déplacer cette option dans l'Action Bar si la place est disponible (affiché uniquement à l'exécution)".
    3. Validez.
    En exécution, les options seront affichées avant le menu déroulant (s'il contient encore des options).
    Par exemple :
    Menu déroulant
    Options dans l'Action Bar
    Remarque : Si l'option de menu est associée à une image, seule l'image sera affichée dans l'Action Bar.
    Versions 18 et supérieures

    Cas particulier : afficher un menu contextuel d'un champ dans l'Action Bar

    Un appui long sur un champ permet de faire apparaître le menu contextuel du champ. Ce menu contextuel peut être affiché directement dans l'Action Bar.
    Pour afficher un menu contextuel directement dans l'Action Bar :
    1. Editez le menu contextuel à afficher dans l'Action Bar : sous le volet "Fenêtre", dans le groupe "Barres et menus", déroulez "Menus contextuels" et sélectionnez le menu contextuel à éditer.
    2. Affichez la fenêtre de description du menu contextuel (option "Description du menu contextuel" du menu contextuel).
    3. Dans l'onglet "Général", cochez l'option "Déplacer ce menu contextuel dans l'Action Bar si elle existe".
    4. Validez.
    Le menu contextuel sera affiché dans le menu déroulant de l'Action Bar.
    Pour afficher les différentes options de menu du menu contextuel directement dans l'Action Bar :
    1. Affichez la fenêtre de description de chaque option du menu contextuel (option "Description de l'option").
    2. Dans l'onglet "IHM", cochez la case "Déplacer cette option dans l'Action Bar si la place est disponible".
    3. Validez.
    Remarque : Si l'option de menu est associée à une image, seule l'image sera affichée dans l'Action Bar.
    Nouveauté 18

    Cas particulier : afficher un menu contextuel d'un champ dans l'Action Bar

    Un appui long sur un champ permet de faire apparaître le menu contextuel du champ. Ce menu contextuel peut être affiché directement dans l'Action Bar.
    Pour afficher un menu contextuel directement dans l'Action Bar :
    1. Editez le menu contextuel à afficher dans l'Action Bar : sous le volet "Fenêtre", dans le groupe "Barres et menus", déroulez "Menus contextuels" et sélectionnez le menu contextuel à éditer.
    2. Affichez la fenêtre de description du menu contextuel (option "Description du menu contextuel" du menu contextuel).
    3. Dans l'onglet "Général", cochez l'option "Déplacer ce menu contextuel dans l'Action Bar si elle existe".
    4. Validez.
    Le menu contextuel sera affiché dans le menu déroulant de l'Action Bar.
    Pour afficher les différentes options de menu du menu contextuel directement dans l'Action Bar :
    1. Affichez la fenêtre de description de chaque option du menu contextuel (option "Description de l'option").
    2. Dans l'onglet "IHM", cochez la case "Déplacer cette option dans l'Action Bar si la place est disponible".
    3. Validez.
    Remarque : Si l'option de menu est associée à une image, seule l'image sera affichée dans l'Action Bar.

    Cas particulier : afficher un menu contextuel d'un champ dans l'Action Bar

    Un appui long sur un champ permet de faire apparaître le menu contextuel du champ. Ce menu contextuel peut être affiché directement dans l'Action Bar.
    Pour afficher un menu contextuel directement dans l'Action Bar :
    1. Editez le menu contextuel à afficher dans l'Action Bar : sous le volet "Fenêtre", dans le groupe "Barres et menus", déroulez "Menus contextuels" et sélectionnez le menu contextuel à éditer.
    2. Affichez la fenêtre de description du menu contextuel (option "Description du menu contextuel" du menu contextuel).
    3. Dans l'onglet "Général", cochez l'option "Déplacer ce menu contextuel dans l'Action Bar si elle existe".
    4. Validez.
    Le menu contextuel sera affiché dans le menu déroulant de l'Action Bar.
    Pour afficher les différentes options de menu du menu contextuel directement dans l'Action Bar :
    1. Affichez la fenêtre de description de chaque option du menu contextuel (option "Description de l'option").
    2. Dans l'onglet "IHM", cochez la case "Déplacer cette option dans l'Action Bar si la place est disponible".
    3. Validez.
    Remarque : Si l'option de menu est associée à une image, seule l'image sera affichée dans l'Action Bar.
    Action Bar : Navigation par vues (ou volets)

    Présentation

    L'Action Bar permet d'ajouter un système de navigation par vues à une fenêtre. Il est ainsi possible de n'afficher que certaines parties de la fenêtre à la fois.
    Ce système de vues (ou volets) ressemble à l'utilisation du champ Onglet.
    La principale différence est la suivante : les champs qui composent chaque volet sont créés uniquement lorsque le contenu du volet est affiché à l'écran. Ils sont détruits dès que le contenu du volet n'est plus visible (changement de volet par exemple).
    Les champs affichés dans chaque volet sont accessibles par programmation uniquement lorsque le volet auquel ils appartiennent est affiché à l'écran.
    Il est ainsi possible de réaliser des interfaces riches dans une même fenêtre en limitant l'impact sur les performances de l'application.
    La navigation entre les différents volets peut être réalisée :
    • par des boutons affichés sur la gauche de l'Action Bar.
      Le volet souligné permet de connaître la vue active.
    • par une liste déroulante présentant les différents volets.
    Le mode de navigation est automatiquement choisi en fonction de la taille de l'écran de l'appareil sur lequel l'application est exécutée (navigation par liste pour des écrans de petite taille).

    Ajout de vues dans une Action Bar

    Pour ajouter des vues dans une Action Bar :
    1. Affichez la fenêtre de description de l'Action Bar (option "Description" du menu contextuel).
    2. Cliquez sur le bouton "Nouvelle vue".
    3. Saisissez le libellé de la vue.
    Option spécifique : L'option "Avec zone d'action bar" permet de simplifier la gestion des vues. Cette option permet de créer automatiquement un champ de type Zone d'Action Bar. Cette "Zone d'Action Bar" correspond à un champ Fenêtre interne. Cette zone a par défaut les dimensions de la fenêtre et affichera la fenêtre interne spécifiée.
    Il est possible :
    • soit de préciser directement dans la fenêtre de description de l'Action Bar la fenêtre interne à charger dans la zone.
    • soit d'indiquer par programmation la fenêtre interne à charger dans la zone d'action.
      SI sFiltre = "" ALORS
      SELON ACTB_ActionBar
      CAS 1
      ChangeFenêtreSource(ZAB_Plat, FI_ListePlat ,"Entrées", "")
      CAS 2
      ChangeFenêtreSource(ZAB_Plat, FI_ListePlat, "Plats", "")
      CAS 3
      ChangeFenêtreSource(ZAB_Plat, FI_ListePlat, "Desserts", "")
      FIN
      SINON
      ChangeFenêtreSource(ZAB_Plat, FI_ListePlat, "", sFiltre)
      FIN
    Remarques :
    • L'utilisation de fenêtres internes permet de limiter le nombre de champs chargés par l'application à un instant donné. Il est cependant possible d'utiliser également le mécanisme des plans.
    • Dans le cas d'une application multi-plateforme, l'utilisation des fenêtres internes permet de partager un contenu avec des applications iOS mais également avec des applications Android ne disposant pas d'Action Bar (périphériques utilisant un version inférieure à Android 3).
    Liste des exemples associés :
    WM ToDo List Exemples multiplateforme (WINDEV Mobile) : WM ToDo List
    [ + ] Cet exemple est un gestionnaire de listes des choses à faire, ou plus communément appelé un gestionnaire de To-Do Lists.
    Le projet utilise les gestures dans les zones répétées afin de déplacer et supprimer les listes et les tâches.
    Les données sont, quant à elles, stockées dans une base HFSQL.
    Version minimum requise
    • Version 17
    Documentation également disponible pour…
    Commentaires
    Cliquez sur [Ajouter] pour publier un commentaire