Mashup Builder > Widgets > Widgets standard > Widget Onglets (thématisable)
Widget Onglets (thématisable)
Le widget Onglets vous permet d'organiser le contenu de l'application composite en plusieurs vues. Chaque vue est un onglet avec une étiquette que vous pouvez définir à l'aide des propriétés du widget. Au moment de l'exécution, un seul onglet est ouvert à la fois et l'onglet actif est souligné. Le widget Onglets est un widget dynamique qui grandit ou rétrécit en fonction de la taille de son conteneur. Vous pouvez attribuer au widget une largeur ou une hauteur fixes en contrôlant les dimensions du conteneur ou en utilisant les propriétés Width et Height du widget.
* 
Il est disponible en tant que widget standard sur la plateforme et en tant que composant Web à importer à partir d'un SDK.
Vous pouvez configurer le widget des deux manières suivantes :
Spécifiez le nombre d'onglets et leurs étiquettes.
Spécifiez l'onglet à ouvrir par défaut lorsque l'application composite est affichée à l'exécution.
Définissez une largeur maximale pour les étiquettes des onglets.
Activez et configurez le chargement différé pour les conteneurs de l'onglet.
Utilisation du chargement différé dans le widget Onglets
Par défaut, tous les onglets du widget sont chargés lors de l'ouverture de l'application composite. Les services liés à un widget dans l'onglet sont exécutés lorsque des événements, tels que l'événement Loaded de l'application composite, sont déclenchés pendant l'exécution. L'exécution de services et le chargement de widgets dans des onglets en arrière-plan peuvent réduire les performances lorsque le widget Onglets contient plusieurs visualisations complexes qui incluent une grande collection de widgets. Vous pouvez configurer le chargement différé pour retarder le chargement des onglets non visibles jusqu'à ce qu'ils soient nécessaires à l'exécution, ce qui améliore les performances de l'application composite et du réseau. Lorsque vous configurez le chargement différé sur le widget, veillez à exclure l'onglet par défaut du chargement différé, car il s'affiche instantanément lorsque l'application composite s'ouvre. Pour activer le chargement différé d'un onglet dans le widget, procédez comme suit :
1. Dans Mashup Builder, sélectionnez un onglet sur le widget pour afficher son contenu.
2. Sélectionnez le conteneur dans l'onglet. Les propriétés du conteneur sont répertoriées dans le panneau Propriétés.
3. Dans le panneau Propriétés, définissez la propriété LazyLoading sur "vrai". Les autres propriétés, services et événements de chargement différé sont répertoriés.
Pour plus d'informations sur les propriétés, services et événements de chargement différé, consultez la rubrique Utilisation du chargement différé dans une application composite.
4. Liez l'événement Loaded du conteneur pour exécuter tous les services de données qui sont liés à des widgets dans le conteneur à chargement différé.
* 
Evitez d'utiliser l'événement Loaded de l'application composite pour exécuter des services au niveau d'un conteneur à chargement différé. Les données renvoyées pour les services s'affichent uniquement lorsque l'onglet est ouvert ou que le conteneur est chargé à l'aide du service LoadContainer.
5. Répétez les étapes précédentes pour activer le chargement différé dans tous les autres onglets du widget.
6. Cliquez sur Enregistrer, puis sur Afficher l'application composite.
Au moment de l'exécution, les onglets chargés en différé sont automatiquement chargés lorsque vous ouvrez l'onglet. Lorsque la propriété EnableContainerUnload est activée pour un conteneur d'onglet, le conteneur est automatiquement déchargé pour libérer les ressources système et améliorer les performances (cela le rend invisible). Lorsque vous revenez à un onglet déchargé, l'onglet est automatiquement rechargé. Vous pouvez créer des liaisons supplémentaires vers les services de chargement différé d'un onglet pour charger et décharger manuellement le contenu à l'aide d'autres événements dans l'application composite, tels que l'événement Clicked d'un widget Bouton.
Propriétés des widgets
* 
Toutes les propriétés spécifiques aux onglets, telles que Tab1Name, Tab1Value, Tab1Visible et Tab1Disabled, sont disponibles par défaut pour chaque onglet. Par exemple, la propriété Tab1Name du premier onglet prend le nom Tab2Name pour le deuxième onglet et le nom Tab3Name pour le troisième onglet.
Nom de propriété
Description
Type de base
Valeur par défaut
Liaison possible ? (O/N)
Localisable ? (O/N)
SelectedTabValue
Valeur de l'onglet sélectionné.
STRING
n/a
O
N
Disabled
Utilisez cette propriété pour désactiver le widget dans l'application composite. Le widget s'affiche dans l'application composite, mais il n'est pas cliquable.
BOOLEAN
Faux
O
N
SelectedTabName
Nom de l'onglet sélectionné.
STRING
n/a
O
N
CustomClass
Permet de définir la classe CSS à appliquer à la div supérieure du widget. Plusieurs classes peuvent être spécifiées, séparées par une espace.
STRING
n/a
O
N
TabSequence
Priorité de mise en surbrillance du widget dans la séquence des widgets lorsque l'utilisateur utilise la touche de tabulation.
NUMBER
n/a
N
N
NumberOfTabs
Définit le nombre total d'onglets.
Le nombre maximal d'onglets que vous pouvez définir est de 16 et au moins 1 onglet doit être configuré.
NUMBER
2
N
N
DefaultTabNumber
Permet de définir l'onglet à afficher à l'exécution lors du chargement initial de l'application composite. Lors des chargements suivants de l'application composite, l'onglet qui s'affichera sera celui sélectionné en dernier lieu par l'utilisateur.
NUMBER
n/a
O
N
TabNameHeight
Permet de définir la hauteur de la zone du nom de l'onglet. Pour masquer la zone du nom de l'onglet, définissez cette propriété sur 0.
NUMBER
34px
O
N
Tab1Name
Nom du premier onglet.
STRING
Nom de l'onglet 1
O
O
Tab1Value
Valeur du premier onglet.
STRING
Valeur de l'onglet 1
O
N
Tab1Visible
Définit le premier onglet comme visible.
BOOLEAN
Vrai
O
N
Tab1Disabled
Utilisez cette propriété pour désactiver le premier onglet dans l'application composite. L'onglet s'affiche dans l'application composite, mais il n'est pas cliquable.
BOOLEAN
Faux
O
N
Tab2Name
Nom du deuxième onglet.
STRING
Nom de l'onglet 2
O
O
Tab2Value
Valeur du deuxième onglet.
STRING
Valeur de l'onglet 2
O
N
Tab2Visible
Définit le deuxième onglet comme visible.
BOOLEAN
Vrai
O
N
Tab2Disabled
Utilisez cette propriété pour désactiver le deuxième onglet dans l'application composite. L'onglet s'affiche dans l'application composite, mais il n'est pas cliquable.
BOOLEAN
Faux
O
N
SelectDefaultTab
Service pouvant être lié permettant de resélectionner l'onglet par défaut configuré pour ce widget.
n/a
n/a
O
N
ResetInputsToDefaultValue
Restaure les valeurs par défaut de tous les widgets contenus.
n/a
n/a
O
N
TabNameMaxWidth
Définit la largeur maximale des noms d'onglet. Les caractères en trop sont tronqués dans le nom de l'onglet.
NUMBER
n/a
O
N
SwitchTabOnFocus
Bascule automatiquement vers l'onglet ciblé lorsque vous utilisez les touches fléchées pour modifier le focus.
BOOLEAN
Faux
O
N
Est-ce que cela a été utile ?