|
|
|
|
|
|
|
|
|
|
- Présentation
- Description des différents éléments de l'Action Bar (onglet "Général")
- Bouton Gauche de l'Action Bar
- Bouton gauche
- Options de menu affichées dans l'Action Bar (Action Bar système uniquement)
- Sous Android
- Sous iOS
- Vues/Barre de navigation
- Aspect de l'Action Bar (onglet "Détail")
- Présentation
- Aspect de l'Action Bar
- Divers
- Recherche dans l'Action Bar (Action Bar système uniquement)
Description du champ Action Bar
Une Action Bar peut correspondre à : - Une Action Bar système : L'Action Bar dépend du système utilisé. Elle peut être différente selon la plateforme utilisée.
- Une Action Bar personnalisée, afin d'avoir un fonctionnement identique quelle que soit la plateforme. Dans ce cas, il est possible de :
- Modifier la hauteur de l'Action Bar,
- Ajouter des champs dans l'Action Bar.
Cette page d'aide présente les points importants de la fenêtre de description du champ Action Bar : Description des différents éléments de l'Action Bar (onglet "Général") L'onglet "Général" permet de définir les différents éléments de l'Action Bar selon la plateforme utilisée. Sur iOS et Android, les éléments sont les mêmes, mais ils ne sont pas disposés de la même façon.
Les deux interfaces sont présentées en aperçu : à gauche l'interface iOS, à droite l'interface Android. Si votre projet est disponible sur une seule plateforme, seule l'interface correspondante sera active. Pour définir les différents éléments de l'Action Bar, il suffit de cliquer sur les différents numéros. Bouton Gauche de l'Action Bar Bouton gauche L'Action Bar remplace la barre de titre de la fenêtre :  sous Android : Par défaut, l'Action Bar affiche le titre de la fenêtre courante et un bouton.  sous iOS : Par défaut, l'Action Bar affiche le titre de la fenêtre courante et un bouton.
Le titre pourra ne pas être affiché en fonction des éléments affichés dans l'Action Bar. L'option "1" de l'onglet "Général" de la fenêtre de description du champ Action Bar permet de configurer les différents éléments : - Bouton visible ou non,
- Libellé du bouton.
- Icône affichée.
- Action effectuée.
L'utilisateur peut cliquer sur le bouton gauche affiché dans l'Action Bar d'une fenêtre. L'événement "Clic sur le bouton de gauche" de l'Action Bar est associé à cette action. La fenêtre de description de l'Action Bar permet de paramétrer l'action du clic sur le bouton gauche. Il est possible de sélectionner une des options suivantes : - Code : Exécuter le traitement de clic du champ : L'événement "Clic sur le bouton de gauche" sera alors automatiquement exécuté.
- Retour : Exécuter le code de retour (ie: fermer la fenêtre) : Dans ce cas :
- L'application exécutera l'événement "Clic sur le bouton de gauche".
- L'application exécutera le traitement prédéfini permettant de retourner sur la fenêtre précédente.
- 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 le bouton de gauche" sera exécuté. - Si la fenêtre courante est fermée, son code de fermeture sera exécuté.
- Pour ce type d'action, l'icône spécifiée pour le bouton n'est pas affichée.
- Le bouton "Retour" peut devenir "OK" en exécution dans les cas suivants :
- la fenêtre précédente n'a pas de champ Action Bar.
- l'animation d'ouverture ne se fait pas de droite à gauche.
- Home : Revenir à la première fenêtre de l'application : Dans ce cas, l'application :
- Exécutera l'événement "Clic sur le bouton de gauche".
- 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 le bouton de gauche" 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 le bouton de gauche" sera exécuté.
- Le code de fermeture des fenêtres fermées ne sera pas exécuté.
- Fenêtre coulissante gauche : Ouvre la fenêtre coulissante gauche : Dans ce cas, l'application :
- Exécutera l'événement "Clic sur le bouton de gauche".
- 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).
Options de menu affichées dans l'Action Bar (Action Bar système uniquement) 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 est réalisée grâce à une barre de thèmes présente en bas de la fenêtre : Pour ajouter des vues dans une Action Bar : - Affichez la fenêtre de description de l'Action Bar (option "Description" du menu contextuel).
- Cliquez sur "4".
- Cliquez sur le bouton "Nouvelle vue".
- Saisissez :
- Le libellé de la vue.
- La fenêtre interne à charger dans la zone (si l'option "Avec zone d'action bar" est cochée).
- L'icône associée (option conseillée et même recommandée sous iOS).
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 multiplateforme, 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).
Aspect de l'Action Bar (onglet "Détail") Présentation 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 : - L'aspect de l'Action Bar/NavBar.
- L'animation de l'Action Bar.
- Le mode de recherche dans l'Action Bar.
Aspect de l'Action Bar L'aspect de l'Action Bar est configuré via : - le bouton "Éditer le style des barres", qui permet de paramétrer le style de la barre système et de l'Action Bar.
- la hauteur de l'Action Bar (disponible uniquement pour les Action Bar personnalisées). Cette option permet d'harmoniser la hauteur de l'action Bar quelque soit le système utilisé. Cette hauteur est exprimée en pixels.
La fenêtre de paramétrage des styles propose : - Le paramétrage de la barre système :
Les éléments pouvant être configurés sont : - la couleur de fond utilisée.
- la couleur du texte.
Remarque : Il est possible de choisir les caractéristiques système pour la barre système : "Texte foncé, fond transparent" ou "Texte clair, fond transparent". - le mode de recouvrement. L'option "Barre affichée par dessus" permet de gérer la transparence de la barre système. Lorsque cette option est cochée, la barre système devient transparente. Il est alors possible de paramétrer l'opacité de la barre système grâce à la propriété Opacité. Cette propriété peut être utilisée par exemple dans l'événement optionnel de la fenêtre "Déplacement de l'ascenseur".
Attention : L'option "Barre affichée par dessus" modifie l'origine des champs. Sous l'éditeur, les champs situés sous la barre système sont automatiquement déplacés.
- Le paramétrage de l'Action Bar :
Les éléments pouvant être configurés sont : - la couleur de fond utilisée.
- la couleur de la police utilisée.
l'option "Appliquer la couleur de police aux icônes actives (Action Bar et barre de navigation)" permet d'appliquer la couleur de la police aux icônes. Dans ce cas, les icônes choisies doivent être monochromes. - l'image de fond de l'Action Bar. Le mode 9 images est disponible.
- le mode de recouvrement. L'option "Barre affichée par dessus" permet de gérer la transparence de l'Action Bar. Lorsque cette option est cochée, l'Action Bar devient transparente. Il est alors possible de paramétrer l'opacité de l'Action Bar grâce à la propriété Opacité. Cette propriété peut être utilisée par exemple dans l'événement optionnel de la fenêtre "Déplacement de l'ascenseur". Exemple :
nOpacitéMax est un entier = 30
nOpacité est un entier
nOpacité = nOpacitéMax * AscenseurPosition(MaFenêtre) / CoordonnéeEditeurVersEcran(150)
SI nOpacité > nOpacitéMax ALORS
nOpacité = nOpacitéMax
FIN
ACTB_ActionBar.Opacité = nOpacité
Attention : L'option "Barre affichée par dessus" modifie l'origine des champs. Sous l'éditeur, les champs situés sous l'Action Bar sont automatiquement déplacés.
Divers L'option "Masquer automatiquement l'Action Bar lors du Scroll" permet de masquer automatiquement l'Action Bar lors du scroll (dans une fenêtre, une fenêtre interne, un superchamp, un champ Table ou Zone répétée). Dans certains cas, lorsque cette option est active, il peut être nécessaire de ne pas masquer l'Action Bar. Ce paramétrage peut être réalisé avec la propriété AutoriseMasquageActionBar. Cette option permet d'obtenir la disparition progressive de l'Action Bar :
  Remarque : Si la propriété Visible est utilisée sur le champ Action Bar, une animation est automatiquement effectuée lors de la disparition de l'Action Bar. Recherche dans l'Action Bar (Action Bar système uniquement) Pour permettre une recherche dans l'Action Bar : - Cochez l'option "Autoriser la recherche dans l'Action Bar". Un nouvel événement est automatiquement associé au champ Action Bar : "Validation de la recherche". Cet événement permet d'effectuer la recherche.
- Si l'option "Avec historique de recherche" est cochée, l'historique des dernières recherches effectuées sera proposé à l'utilisateur.
Remarque : L'option "Avec bouton pour vider l'historique" permet de gérer automatiquement la mise à blanc de l'historique.
Pour mettre en place la recherche, effectuez par exemple les manipulations suivantes : - Créez un bouton de recherche dans l'Action Bar (par exemple un bouton "Loupe").
- Dans le code de cette option, utilisez la fonction ActionBarRechercheVisible pour afficher le champ de saisie de la recherche. Par exemple :
ActionBarRechercheVisible(Vrai, "Client à rechercher")
- Affichez les événements WLangage associés au champ Action Bar. Dans l'événement "Validation de la recherche", saisissez le code permettant d'effectuer la recherche et d'afficher le résultat. Dans ce code, il est possible de connaître la valeur saisie par l'utilisateur grâce à la propriété ValeurRecherche.
Par exemple :
REQ_Produits.ParamNom = ACTB_ActionBar.ValeurRecherche
ZoneRépétéeAffiche(ZR_REQ_Produits, taRéExécuteRequete)
Remarques : - Si l'historique des recherches est activé :
- lorsque le champ de saisie est vide, les 10 dernières recherches sont proposées.
- lorsque la saisie a débuté, 10 propositions sont affichées en fonction de ce qui a été saisi.
- Il est possible de vider l'historique avec la fonction ActionBarSupprimeHistoriqueRecherche.
- Si l'option "Avec bouton pour vider l'historique" est sélectionnée, l'historique propose un choix pour effacer l'historique à la fin de la liste des propositions.
- Deux événements WLangage sont automatiquement ajoutés lors de l'activation de la recherche dans l'Action Bar :
- Validation de la recherche.
- Modification de la recherche.
- Annulation de la recherche : Pour savoir si l'utilisateur a annulé la recherche, testez la valeur de la propriété ValeurRecherche dans l'événement "Validation de la recherche". Cette valeur vaut "" (chaîne vide) en cas d'annulation.
Liste des exemples associés :
|
Exemples multiplateforme (WINDEV Mobile) : WM Gestion Contacts
[ + ] Cet exemple illustre la gestion de contacts pour Android et iOS. Il permet de : - lister les contacts du téléphone - appeler les contacts - envoyer des sms aux contacts - ...
|
|
Exemples multiplateforme (WINDEV Mobile) : WM Shopping
[ + ] WM Shopping vous permet de gérer plusieurs listes de courses. Pour ajouter un produit : - Scannez directement le code-barre pour l'ajouter - ou... recherchez un produit ajouté auparavant et ajoutez-le ! - ou encore... ajoutez un produit depuis votre historique d'achat ! Vous pourrez ensuite éditer la quantité, l'image... et ajouter des notes pour vous en rappeler pendant les courses !
|
Documentation également disponible pour…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|