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.
|
|
Cette fonctionnalité est prise en charge dans ThingWorx 9.3.2 et versions ultérieures.
|
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 la 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 |