Nouveau dans 14: Barres de boutons et icônes

Version 5

     

     

     

     

    La nouvelle barre de boutons vous permet de définir en une fois toute une ligne ou colonne de boutons de taille et de mise en forme identique. La barre est divisée en segments, chacun d'entre eux contient soit un bouton normal, soit un bouton popover (une même barre de boutons peut contenir des boutons des deux types). Vous pouvez également désigner un bouton comme étant « actif », en général pour montrer sur quel bouton l'utilisateur a cliqué en dernier.

     

    Les barres de boutons sont idéales pour la navigation et offrent une option de remplacement personnalisée pour les séries de boutons radio ou de cases à cocher, pour basculer entre les onglets ou les volets, ou pour tout autre usage où il est utile de regrouper des boutons ayant une fonction similaire.


    Chaque bouton peut être associé à une icône spéciale. Vous pouvez faire votre choix parmi plus de 140 icônes et importer vos propres icônes (format PNG ou SVG). Ces icônes peuvent être positionnées de différentes façons par rapport au libellé, mises en forme de façon indépendante et redimensionnées.


    Jusqu'à présent, pour ajouter des images aux boutons, il fallait attribuer une image d'arrière-plan au bouton lui-même ou superposer une image distincte sur le bouton. Les nouvelles icônes présentent plusieurs avantages par rapport à ces techniques : elles vous permettent d'associer des libellés aux images, de mieux maîtriser le positionnement et la taille des images et de travailler de façon transparente dans WebDirect. En outre, les icônes basées sur des images SVG vous permettent de définir des états d'affichage (voir page suivante).


    La boîte de dialogue Configuration de la barre de boutons s'affiche lors de la création de la barre de boutons. Notez que si vous affichez au premier plan une autre application que FileMaker Pro, cette boîte de dialogue disparaît. Vous pouvez la ré-ouvrir en double-cliquant sur l'objet Barre de boutons. Un diagramme détaillé de cette boîte de dialogue est inclus en bas de cette page.

     

     


     

     

    Objectif :

     

    Ajouter une barre de boutons avec des icônes pour la navigation et pour changer le jeu d'enregistrements trouvés.


     

     

    Étapes :

     

    1. Ouvrez le modèle « Liste d'approbations | Pro » (dans le dossier Pro). Ce modèle comporte trois boutons dans l'élément de navigation d'en-tête.

    2. Accédez au mode Modèle.


    3. Supprimez les trois boutons existants.
      598-delete+three+buttons.png

    4. Sélectionnez l'outil Barre de boutons dans la barre d'outils.
      Button Bar Tool.png

    5. Faites glisser une forme rectangulaire dans l'élément de navigation d'en-tête pour créer une barre de boutons occupant le même espace que les trois boutons que vous venez de supprimer. La boîte de dialogue Configuration de la barre de boutons s'affiche.

      Par défaut, votre barre de boutons comporte 3 segments horizontaux et le premier segment est sélectionné.





      Configurer le premier segment bouton


    6. Choisissez l'option qui place une icône à gauche du libellé du bouton.



      600-pasted-image-3.png
      Une série d'icônes s'affiche alors dans la boîte de dialogue.



    7. Saisissez Contacts pour le libellé du segment, puis appuyez sur Entrée.


      601-pasted-image-4.png
      Le libellé s'affiche sur le segment du bouton.



    8. Faites défiler la liste d'icônes et sélectionnez celle qui représente une tête.


      602-pasted-image-5.png
      L'icône s'affiche sur le segment bouton à gauche du libellé.



    9. Changez la taille de l'icône en faisant glisser le curseur jusqu'à 18, ou en saisissant directement la valeur 18 dans la case située à droite du curseur.

      603-pasted-image-6.png

    10. Remplacez l'action « Ne rien faire » par « Une étape ». La boîte de dialogue Action de bouton s'affiche. Cette boîte de dialogue est une variante du nouvel environnement Espace de travail de script, que nous présenterons en détail dans une rubrique ultérieure. 



      Nous allons essayer d'utiliser le clavier autant que possible.


    11. Saisissez les caractères suivants : alm

      Il s'agit de l'acronyme d'« Activer le modèle ». L'action Activer le Modèle s'affiche dans un menu déroulant.


    12. Appuyez sur Entrée. L'action de script Activer le Modèle est ajoutée en tant qu'action unique.


    13. Appuyez sur la Barre d'espace. Un menu déroulant s'affiche avec les options disponibles pour cette action de script.


    14. Sélectionnez l'option Modèle... à l'aide de la Flèche vers le bas, puis appuyez sur Entrée. La boîte de dialogue Définir le modèle s'affiche.


    15. Appuyez sur la Flèche vers le bas plusieurs fois pour sélectionner le modèle « Liste de contacts | Pro ».

    16. Appuyez sur Entrée pour enregistrer vos modifications et fermer la boîte de dialogue Spécifier le modèle.


    17. Cliquez sur le bouton OK pour enregistrer votre modification et fermer la boîte de dialogue Action de bouton. Notez qu'aucun raccourci clavier n'est disponible pour ce bouton spécifique.



      Votre premier segment bouton est terminé. Passons à présent au deuxième.





      Configurer le deuxième segment bouton


    18. Passez au deuxième segment en cliquant sur la flèche droite dans la boîte de dialogue Configuration de la barre de boutons.


      604-pasted-image-7.png
      Le texte du segment passe de « 1 sur 3 » à « 2 sur 3 ».




    19. Saisissez Mes approbations pour le libellé du segment, puis appuyez sur Entrée.


    20. Sélectionnez l'icône représentant une coche dans la liste.

      605-pasted-image-8.png

      Cette fois-ci, vous allez exécuter un script, et non une seule action.



    21. Remplacez l'action « Ne rien faire » par « Exécuter un script ». La boîte de dialogue Définir le script s'affiche. 


    22. Sélectionnez le script suivant : « Afficher mes approbations ».


    23. Cliquez sur le bouton OK pour enregistrer vos modifications et fermer la boîte de dialogue.



      Votre deuxième segment bouton est terminé. Passons à présent au troisième et dernier segment.





      Configurer le troisième segment bouton


    24. Passez au troisième segment.


    25. Saisissez Toutes les approbations pour le libellé du segment, puis appuyez sur Entrée.

    26. Sélectionnez l'icône en forme de coche dans la liste, comme pour le deuxième bouton.


    27. Remplacez l'action « Ne rien faire » par « Une étape ». La boîte de dialogue Action de bouton s'affiche. 


    28. Saisissez les caractères suivants : ate

      L'action Afficher tous les enregistrements s'affiche dans un menu déroulant.


    29. Appuyez sur Entrée. L'action de script Afficher tous les enregistrements est ajoutée en tant qu'action unique.



      Votre troisième segment bouton est terminé.


    30. Cliquez sur le bouton OK pour enregistrer vos modifications et fermer la boîte de dialogue Action de bouton.


    31. Passez en mode Utilisation et testez les boutons dans votre nouvelle barre de boutons.

      Voici à quoi elle devrait ressembler. Dans l'exercice suivant, vous complèterez sa mise en forme.

    606-button+bar+half-finished.png

     

     

     


     

     

    Astuces


    Maintenant que vous avez créé votre première barre de boutons, voici quelques astuces à retenir :

     

    • Chaque bouton a la même taille, quelle que soit la longueur de son libellé.


    • Un style est appliqué à la barre de boutons et à l'ensemble de ses séparateurs, segments et icônes afin que la mise en forme de chaque bouton soit homogène.


    • Un segment de la barre de boutons peut être spécifié comme étant actif. Vous pouvez spécifier un segment actif en sélectionnant le segment dans la liste ou en indiquant une formule qui génère une chaîne de texte correspondant au nom d'objet d'un segment.


    • Les segments peuvent être masqués individuellement à l'aide de la fonctionnalité de visibilité. Les autres segments s'élargissent alors pour occuper la totalité de la ligne ou de la colonne sur la barre de boutons, plutôt que d'afficher un emplacement vide. La visibilité peut également être appliquée à la barre de boutons tout entière.

    • Une mise en forme conditionnelle et des déclencheurs de scripts peuvent être attribués individuellement à chaque segment.


    • Les segments boutons peuvent être réorganisés en cliquant sur un segment pendant un moment et en le faisant glisser vers le nouvel emplacement.


    • Vous pouvez supprimer un segment de la barre de boutons en le sélectionnant et en appuyant sur la touche Suppr.


    • Les mêmes combinaisons d'icônes et de texte sont disponibles pour les boutons normaux et pour les barres de boutons.



       

    Configuration de la barre de boutons


    Le diagramme ci-dessous présente la plupart des options de configuration disponibles, même si certaines sections de la boîte de dialogue varient en fonction des options sélectionnées :

     

    607-pasted-image-2.png