PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV 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 :
  • Android Les "Actions Bars" ne sont disponibles qu'à partir des téléphones et tablettes utilisant Android 3. Si une Action Bar est utilisée sur une version inférieure, une barre de titre est affichée.
  • Versions 19 et supérieures
    iPhone/iPad Les "Actions bars" sont disponibles pour toutes les versions de iOS. Si une Action Bar est utilisée avant iOS 7, les options d'aspect de l'Action Bar (couleur de la police, couleur de fond, ...) ne sont pas prises en compte.
    Nouveauté 19
    iPhone/iPad Les "Actions bars" sont disponibles pour toutes les versions de iOS. Si une Action Bar est utilisée avant iOS 7, les options d'aspect de l'Action Bar (couleur de la police, couleur de fond, ...) ne sont pas prises en compte.
    iPhone/iPad Les "Actions bars" sont disponibles pour toutes les versions de iOS. Si une Action Bar est utilisée avant iOS 7, les options d'aspect de l'Action Bar (couleur de la police, couleur de fond, ...) ne sont pas prises en compte.
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 19 et supérieures
iPhone/iPad Le champ Action Bar est désormais disponible pour les applications iPhone/iPad.
Nouveauté 19
iPhone/iPad Le champ Action Bar est désormais disponible pour les applications iPhone/iPad.
iPhone/iPad Le champ Action Bar est désormais disponible pour les applications iPhone/iPad.
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.
Versions 20 et supérieures
iPhone/iPad Remarques :
  • En cas d'utilisation de la barre système, il est possible de configurer la transparence de la barre système pour iOS 7 et supérieur.
  • Versions 23 et supérieures
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Nouveauté 23
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
Nouveauté 20
iPhone/iPad Remarques :
  • En cas d'utilisation de la barre système, il est possible de configurer la transparence de la barre système pour iOS 7 et supérieur.
  • Versions 23 et supérieures
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Nouveauté 23
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
iPhone/iPad Remarques :
  • En cas d'utilisation de la barre système, il est possible de configurer la transparence de la barre système pour iOS 7 et supérieur.
  • Versions 23 et supérieures
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Nouveauté 23
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
Versions 22 et supérieures
Android En cas d'utilisation de la barre système, il est possible de configurer la couleur de la barre système :
  • Couleur spécifique.
  • Couleur système.
  • Transparent. La couleur de la barre système est celle de l'Action Bar. Cette option est prise en compte uniquement si la fenêtre contient une Action Bar.
  • Adapté à l'Action Bar. Dans ce cas, si le gabarit "Material design" est utilisé, la couleur de la barre système correspond à la couleur de l'Action Bar en plus sombre, sinon la couleur de l'Action Bar est utilisée.
Remarques :
  • Ce paramétrage de la couleur de la barre système est disponible uniquement à partir de Android 5.0.
  • Il n'est pas possible de changer la couleur de la barre sur les appareils Nexus.
  • La propriété ..CouleurBarreSystème permet de modifier cette couleur par programmation.
Nouveauté 22
Android En cas d'utilisation de la barre système, il est possible de configurer la couleur de la barre système :
  • Couleur spécifique.
  • Couleur système.
  • Transparent. La couleur de la barre système est celle de l'Action Bar. Cette option est prise en compte uniquement si la fenêtre contient une Action Bar.
  • Adapté à l'Action Bar. Dans ce cas, si le gabarit "Material design" est utilisé, la couleur de la barre système correspond à la couleur de l'Action Bar en plus sombre, sinon la couleur de l'Action Bar est utilisée.
Remarques :
  • Ce paramétrage de la couleur de la barre système est disponible uniquement à partir de Android 5.0.
  • Il n'est pas possible de changer la couleur de la barre sur les appareils Nexus.
  • La propriété ..CouleurBarreSystème permet de modifier cette couleur par programmation.
Android En cas d'utilisation de la barre système, il est possible de configurer la couleur de la barre système :
  • Couleur spécifique.
  • Couleur système.
  • Transparent. La couleur de la barre système est celle de l'Action Bar. Cette option est prise en compte uniquement si la fenêtre contient une Action Bar.
  • Adapté à l'Action Bar. Dans ce cas, si le gabarit "Material design" est utilisé, la couleur de la barre système correspond à la couleur de l'Action Bar en plus sombre, sinon la couleur de l'Action Bar est utilisée.
Remarques :
  • Ce paramétrage de la couleur de la barre système est disponible uniquement à partir de Android 5.0.
  • Il n'est pas possible de changer la couleur de la barre sur les appareils Nexus.
  • La propriété ..CouleurBarreSystème permet de modifier cette couleur par programmation.

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 le traitement "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 le traitement "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 le traitement "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 le traitement "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 le traitement "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 le traitement "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 le traitement "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 le traitement "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 le traitement "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