PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

  • Présentation de l'Action Bar
  • Créer et paramétrer une Action Bar
  • Style des barres
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget iOSApple WatchCatalystUniversal 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
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 26 et supérieures
      iPhone/iPad Mode Feuillet (iOS13 et +) : si ce type de barre est sélectionné, la fenêtre peut s'ouvrir depuis le bas de l'écran. La fenêtre reste "cascadée" : elle ne recouvre pas totalement la fenêtre en dessous. Il suffit de faire un 'swipe' vers le bas pour fermer la fenêtre.
      Si cette option est sélectionnée :
      • la fenêtre n'a pas de barres sous l'éditeur.
      • l'événement "Autorisation de fermeture" est automatiquement associé à la fenêtre. Si cet événement renvoie :
        • Vrai, la fenêtre est fermée.
        • Faux, la fenêtre est réactivée.
      1. Remarque : Si cette fenêtre est utilisée dans une version inférieure à iOS 13, la fenêtre est maximisée et le 'swipe' de fermeture n'a aucun effet.
      Nouveauté 26
      iPhone/iPad Mode Feuillet (iOS13 et +) : si ce type de barre est sélectionné, la fenêtre peut s'ouvrir depuis le bas de l'écran. La fenêtre reste "cascadée" : elle ne recouvre pas totalement la fenêtre en dessous. Il suffit de faire un 'swipe' vers le bas pour fermer la fenêtre.
      Si cette option est sélectionnée :
      • la fenêtre n'a pas de barres sous l'éditeur.
      • l'événement "Autorisation de fermeture" est automatiquement associé à la fenêtre. Si cet événement renvoie :
        • Vrai, la fenêtre est fermée.
        • Faux, la fenêtre est réactivée.
      1. Remarque : Si cette fenêtre est utilisée dans une version inférieure à iOS 13, la fenêtre est maximisée et le 'swipe' de fermeture n'a aucun effet.
      iPhone/iPad Mode Feuillet (iOS13 et +) : si ce type de barre est sélectionné, la fenêtre peut s'ouvrir depuis le bas de l'écran. La fenêtre reste "cascadée" : elle ne recouvre pas totalement la fenêtre en dessous. Il suffit de faire un 'swipe' vers le bas pour fermer la fenêtre.
      Si cette option est sélectionnée :
      • la fenêtre n'a pas de barres sous l'éditeur.
      • l'événement "Autorisation de fermeture" est automatiquement associé à la fenêtre. Si cet événement renvoie :
        • Vrai, la fenêtre est fermée.
        • Faux, la fenêtre est réactivée.
      1. Remarque : Si cette fenêtre est utilisée dans une version inférieure à iOS 13, la fenêtre est maximisée et le 'swipe' de fermeture n'a aucun effet.
Selon le type de barre sélectionné, le bouton "Style des barres" permet de paramétrer les options de style utilisées (couleur et police notamment).
Versions 20 et supérieures
Remarques :
  • iPhone/iPad 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
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Nouveauté 23
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
  • Versions 26 et supérieures
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.
    Nouveauté 26
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.
Nouveauté 20
Remarques :
  • iPhone/iPad 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
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Nouveauté 23
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
  • Versions 26 et supérieures
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.
    Nouveauté 26
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.
Remarques :
  • iPhone/iPad 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
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    Nouveauté 23
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
    iPhone/iPad Pour une utilisation sous iPhone X, il est possible de décaler les barres selon la zone des capteurs.
  • Versions 26 et supérieures
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.
    Nouveauté 26
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.
    Android Jusqu'à la version 25, la hauteur des champs Action Bar est de 48 px par défaut. A partir des nouveaux projets 26, la hauteur du champ Action Bar passe à 56 px par défaut. Il est possible de choisir la hauteur à utiliser par défaut, dans la fenêtre de description de la configuration de projet : option Hauteur action bar dans l'onglet "Général".
    Remarque : En cas de modification de la hauteur, la nouvelle hauteur s'applique à toutes les fenêtres de l'application.

Style des barres

Le bouton "Style des barres" permet de définir les options de styles des barres sélectionnées :
  • Barre système.
  • Action Bar.
  • Barre de navigation.
Android En cas d'utilisation de la barre système, il est possible de configurer :
  • la couleur de fond : cette couleur peut être :
    • une couleur spécifique, une couleur système ou transparent.
      Si la couleur est "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ée à 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.
  • la couleur du texte.
  • si la barre doit être ou non en mode recouvrement. Si l'option "Barre en recouvrement" est cochée, l'origine des champs est modifiée et la propriété Opacité pourra être utilisée sur le champ Action Bar. La barre sera affichée par dessus les champs.
En cas d'utilisation de l'Action Bar, il est possible de configurer :
  • la couleur de fond : cette couleur peut être une couleur spécifique ou automatique.
  • la couleur de la police.
  • si la couleur de la police doit être appliquée aux icônes actives.
l'image de fond de l'Action Bar.
  • si la barre doit être ou non en mode recouvrement. Si l'option "Barre en recouvrement" est cochée, l'origine des champs est modifiée et la propriété Opacité pourra être utilisée sur le champ Action Bar. La barre sera affichée par dessus les champs.
En cas d'utilisation de la barre de navigation, il est possible de configurer les couleurs utilisées pour les éléments actifs et inactifs.
Android 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.
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