Widget Bouton de menu (thématisé)
Le widget Bouton de menu affiche un bouton qui ouvre un menu avec une liste d'éléments que vous pouvez définir à l'aide des données de la table d'informations. Vous pouvez lier les données de l'élément sélectionné ou les événements cliqués de chaque élément de menu, en fonction de la configuration du menu. Utilisez ce widget lorsque l'espace disponible dans une mise en page est limité et que vous souhaitez masquer les options qui ne sont pas utilisées fréquemment. Vous pouvez créer plusieurs niveaux de navigation pour regrouper des éléments de menu sous une étiquette commune.
Bouton de menu standard
Bouton de menu avec une étiquette
L'image suivante illustre les variantes disponibles pour le bouton de menu de gauche à droite. Vous pouvez utiliser la propriété ButtonType pour définir la variante de bouton sur Principal, Secondaire, Tertiaire, Danger ou Transparent. Par défaut, le bouton s'affiche avec un style Tertiaire.
Anatomie
1. Bouton de menu
2. Menu
3. Menu de deuxième niveau
Choix du sens de la mise en page
Vous pouvez ouvrir le menu dans le sens horizontal ou vertical à l'aide de la propriété MenuDirection.
Vertical (par défaut) : ouvre le menu sous le bouton. Utilisez ce mode pour réduire l'espace horizontal nécessaire à l'affichage du bouton, par exemple, lorsqu'il est affiché dans une barre d'outils.
Horizontal : ouvre le menu sur le côté du bouton. Utilisez ce mode lorsque le bouton est affiché dans un panneau latéral.
Format des données
Vous pouvez créer des données de table d'informations pour le widget à l'aide de la forme de données MenuEntry. Pour plus d'informations, consultez la rubrique Utilisation de la forme de données MenuEntry.
L'image ci-après illustre le résultat d'une table d'informations qui affiche un menu simple à l'aide de la forme de données MenuEntry.
 |
La première ligne de la table d'informations est utilisée en tant que racine et n'est pas affichée en tant qu'élément de menu. Vous devez définir les éléments de menu de niveau supérieur avec un identifiant parentMenuId correspondant à l'identifiant menuId de la racine.
|
Ajout d'info-bulles personnalisées aux éléments de menu
Vous pouvez afficher des info-bulles pour chaque élément de menu en ajoutant les colonnes tooltip et tooltipIcon dans les données de la table d'informations. L'image ci-après illustre l'info-bulle personnalisée d'un élément de menu.
Configuration des données de menu à l'aide d'une table d'informations
1. Dans Composer, créez un service qui renvoie les données de la table d'informations définies à l'aide de la forme de données MenuEntry. Pour plus d'informations, consultez la rubrique Widget Barre de menus.
2. Dans Mashup Builder, ajoutez le service de menu dans le panneau Données.
3. Liez la propriété All Data de la table d'informations du service à la propriété Data du widget Bouton de menu.
4. Cliquez sur Enregistrer pour enregistrer les modifications apportées à l'application composite.
Vous pouvez également définir manuellement les données de la table d'informations sans utiliser de service à l'aide de la boîte de dialogue de configuration de la table d'informations dans Mashup Builder.
1. Dans Mashup Builder, sélectionnez le widget Bouton de menu.
2. Dans le panneau Propriétés, en regard de la propriété Data, cliquez sur Ajouter. Une boîte de dialogue s'ouvre. Vous pouvez y ajouter des lignes pour définir les données de la table d'informations du widget.
3. Cliquez sur Ajouter, puis définissez les données de ligne de l'élément de menu.
4. Cliquez sur Ajouter pour ajouter la ligne à la table d'informations.
5. Cliquez sur Enregistrer pour enregistrer les données de la table d'informations.
Les éléments de menu définis dans la table d'informations s'affichent à l'exécution.
Configuration des éléments de menu à l'aide des propriétés du widget
Par défaut, le widget est configuré de manière à utiliser les données de la table d'informations afin de définir les éléments de menu. Vous pouvez utiliser l'événement SelectedDataChanged et la propriété SelectedData du service pour transmettre l'élément sélectionné à un autre service. Pour configurer les éléments de menu à l'aide des propriétés du widget, utilisez plutôt la propriété ItemConfigurationMode. Lorsque vous définissez cette propriété sur Propriétés du widget, un événement Clicked et des propriétés vous permettant de configurer la visibilité et l'état désactivé de chaque élément de menu sont ajoutés au panneau Propriétés. Vous pouvez lier ces propriétés pour contrôler dynamiquement l'état des éléments de menu individuels en fonction d'événements spécifiques dans l'application composite. Cela vous permet de personnaliser les interactions avec le menu, ce qui facilite la gestion de la visibilité et de la fonction de chacun de ses éléments.
1. Dans Mashup Builder, liez une source de données de table d'informations aux données pour définir les ID de menu et les étiquettes.
2. Sélectionnez le widget Bouton de menu, puis, dans le panneau Propriétés, définissez ItemConfigurationMode sur Propriétés du widget.
3. Configurez ou liez les propriétés suivantes pour chaque élément de menu :
◦ <Item_Name>_Clicked : événement pouvant être lié déclenché lors d'un clic sur l'élément de menu.
◦ <Item_Name>_Disabled : désactive l'élément de menu.
◦ <Item_Name>_Visible : masque l'élément de menu.
4. Cliquez sur Enregistrer.
Stylisation du bouton de menu
Vous pouvez styliser le widget Bouton de menu des deux manières suivantes :
• Au niveau du widget, à l'aide des propriétés de style disponibles dans le panneau Propriétés de style.
Vous pouvez modifier le bouton et les styles de menu à chaque état, par exemple Désactivé ou Pointage.
• Au niveau d'un thème stylistique sous > .
Pour plus d'informations sur la personnalisation des thèmes stylistiques, consultez la rubrique Personnalisation des thèmes stylistiques à l'aide de l'onglet Styles.
Propriétés du widget
|
Nom de propriété
|
Description
|
Type de base
|
Valeur par défaut
|
Liable (<-, ->)
|
Localisable ? (O/N)
|
|
|---|---|---|---|---|---|---|
|
Data
|
Liez une table d'informations pour définir les éléments de menu. Vous devez formater la table d'informations à l'aide de la forme de données MenuEntry.
|
INFOTABLE
|
O
|
N
|
||
|
SelectedData
|
Table d'informations qui contient les données du dernier élément de menu sélectionné.
|
INFOTABLE
|
O
|
N
|
||
|
SelectedDataChanged
|
Evénement qui se déclenche lorsqu'un élément de menu est sélectionné.
|
Evénement
|
O
|
N
|
||
|
MenuOffset
|
Espace entre le bouton et le menu lorsque ce dernier est ouvert.
|
NUMBER
|
8
|
N
|
N
|
|
|
ButtonType
|
Définissez le type du bouton de menu. Chaque type de bouton utilise un style différent. Options : Principal, Secondaire Tertiaire, Danger, Transparent
|
STRING
|
Tertiaire
|
O
|
N
|
|
|
TooltipField
|
Affiche une info-bulle lorsque vous pointez sur le widget Bouton de menu.
|
STRING
|
O
|
O
|
||
|
TooltipIcon
|
Définit une image d'icône pour l'info-bulle du widget Bouton de menu.
|
MEDIA
|
N
|
N
|
||
|
Disabled
|
Désactive le bouton de menu
|
BOOLEAN
|
Faux
|
O
|
N
|
|
|
SVGIcon
|
Sélectionnez une icône SVG à afficher dans le widget Bouton de menu. Pour afficher une entité de média, utilisez la propriété Icône.
|
MEDIALINK
|
N
|
N
|
||
|
ButtonIcon
|
Sélectionnez une image d'icône à afficher dans le widget Bouton de menu. Cette propriété remplace la propriété SVGIcon.
|
MEDIA
|
N
|
N
|
||
|
ButtonIconPosition
|
Définissez la position de l'icône à gauche ou à droite de l'étiquette du bouton. Options : A gauche, A droite, En haut, En bas
|
STRING
|
A droite
|
N
|
N
|
|
|
ButtonClicked
|
Evénement qui se déclenche lorsque l'utilisateur clique sur le bouton et qu'aucun élément de menu n'est défini pour le widget.
|
Evénement
|
O
|
N
|
||
|
ButtonMaxWidth
|
Définissez la largeur maximale du bouton.
|
NUMBER
|
N
|
N
|
||
|
ButtonLabelAlignment
|
Aligne l'étiquette à gauche, à droite ou au centre. Options : A gauche, A droite, Au centre
|
STRING
|
Au centre
|
N
|
N
|
|
|
ButtonLabel
|
Spécifie le texte de l'étiquette du bouton.
|
STRING
|
O
|
O
|
||
|
ButtonSize
|
Définit la taille du bouton. Options : Standard, Moyenne, Grande, Très grande, Remplissage
|
STRING
|
Standard
|
N
|
N
|
|
|
DisplayMenuIcons
|
Lorsque cette propriété est définie sur "faux", les icônes des éléments de menu sont masquées.
|
BOOLEAN
|
Faux
|
N
|
N
|
|
|
AllowMissingIcons
|
Lorsque cette propriété est définie sur "faux" et que la propriété DisplayMenuIcons est définie sur "vrai", une icône par défaut s'affiche en regard des éléments de menu sans icône spécifiée dans les données de la table d'informations.
|
BOOLEAN
|
Faux
|
N
|
N
|
|
|
MenuMinWidth
|
Définit la largeur minimale à laquelle les menus et sous-menus peuvent être réduits, en pixels. Lorsque la valeur est vide, la largeur du menu est définie pour s'adapter à son élément le plus large.
|
Number
|
N
|
N
|
||
|
MenuMaxWidth
|
Définit la largeur maximale à laquelle les menus et sous-menus peuvent être développés, en pixels. Lorsque la valeur est vide, la largeur du menu est définie pour s'adapter à son élément le plus large.
|
Number
|
N
|
N
|
||
|
MenuMaxItems
|
Définit le nombre maximal d'éléments visibles dans le menu et ses sous-menus. Lorsque les données contiennent plus d'éléments que le nombre maximal, les éléments sont masqués et accessibles dans un sous-menu avec une étiquette Plus.
|
Number
|
5
|
O
|
N
|
|
|
MenuDirection
|
Définit la direction d'ouverture du menu par rapport au bouton. Options : Vertical Horizontal
|
STRING
|
Vertical
|
O
|
N
|
|
|
ItemConfigurationMode
|
Mode Données de table d'informations : configure la visibilité et l'état de chaque élément de menu à l'aide des données de table d'informations. Vous pouvez utiliser l'événement SelectedDataChanged et la propriété SelectedData du service pour transmettre l'élément sélectionné à un autre service.
Mode Propriétés du widget : configurez la visibilité et l'état de chaque élément de menu manuellement à l'aide des propriétés du widget ou dynamiquement à l'aide de liaisons. Vous devez lier l'événement Clicked des éléments de menu pour transmettre la propriété SelectedData à un autre service. Options : Données de table d'informations, Propriétés du widget
|
STRING
|
Données de table d'informations
|
O
|
N
|
|
|
<Item_Name>_Clicked
|
Evénement déclenché lors d'un clic sur l'élément de menu.
|
Evénement
|
O
|
N
|
||
|
<Item_Name>_Disabled
|
Désactive l'élément de menu.
|
BOOLEAN
|
Vrai
|
O
|
N
|
|
|
<Item_Name>_Visible
|
Contrôle la visibilité de l'élément de menu.
|
BOOLEAN
|
Vrai
|
O
|
N
|