Bonnes pratiques pour le développement d'applications > Conception de l'expérience utilisateur de votre application ThingWorx > Que sont les applications composites et les modèles de base dans ThingWorx ?
Que sont les applications composites et les modèles de base dans ThingWorx ?
Cette rubrique explique comment utiliser les applications composites et les modèles de base.
Applications composites
Les applications composites sont des visualisations de pages Web qui affichent les données d'un modèle ThingWorx ou d'appareils en fonction des exigences métier et techniques de votre application.
Utilisez le Mashup Builder pour créer l'interface utilisateur de votre application. Le Mashup Builder combine les services de données disponibles dans ThingWorx avec un ensemble de composants de visualisation, appelés widgets, pour créer des pages Web uniques. Les pages Web combinent des données provenant de plusieurs sources.
Etudiez les concepts suivants pour la création d'applications composites :
Les widgets sont les composants que vous placez sur l'application composite. Un widget peut être une grille ou un graphique pour le rendu de données. Les widgets incluent également des éléments HTML de base tels que des zones de texte, des boutons et des liens de navigation.
Les services de données ThingWorx sont utilisés pour récupérer des données pouvant être utilisées dans l'application composite. Les widgets de visualisation sont utilisés pour afficher les données sur l'application composite.
Des services peuvent également être appelés en réponse aux états d'autres services et à l'interaction de l'utilisateur.
Les widgets prennent en charge les styles et les états. Par exemple, une zone de texte prend en charge un style pour la taille des polices, la couleur des polices et la couleur d'arrière-plan, mais pas les changements de couleur pour des états différents.
Un affichage de valeur prend en charge les modifications de style en fonction de l'état. Par exemple, vous pouvez définir une couleur rouge pour une valeur de seuil spécifique. Si la valeur du widget d'affichage atteint cette valeur de seuil spécifiée, la couleur du widget devient rouge.
Le thème stylistique est un ensemble de propriétés, comme du texte, des couleurs et des lignes, que vous appliquez aux éléments d'une application composite. Lorsque vous appliquez un thème stylistique à une application composite de niveau supérieur, il est également appliqué à tous les widgets et applications composites que celle-ci intègre. Grâce aux thèmes stylistiques, vous pouvez gérer le style de plusieurs applications composites.
* 
Les nouveaux widgets disponibles dans ThingWorx 8.4 et versions ultérieures utilisent des thèmes stylistiques. Dans une prochaine version, les définitions de style seront abandonnées. Il est recommandé d'utiliser les fonctionnalités de thèmes stylistiques.
Modèles de base
Une application composite maître donne une structure cohérente au contenu d'une application composite, de la même manière qu'une page maître ou un gabarit. Un modèle de base s'utilise généralement pour les éléments qui s'affichent dans l'ensemble de l'application composite, tels que des logos, des menus, des titres, des en-têtes, des pieds de page, des encadrés, etc. Vous pouvez réutiliser une application composite maître pour définir une identité visuelle cohérente dans l'ensemble de l'application.
Vous pouvez créer différents modèles de base pour différents projets, ou encore un même modèle pour toutes vos applications composites, selon vos besoins.
Types d'applications composites
Vous pouvez créer plusieurs types d'applications composites :
Statique : dimensionnée de manière statique à la taille que vous définissez. A une résolution inférieure, de barres de défilement sont ajoutées à l'application composite ; à toute résolution supérieure, des marges sont créées autour de l'application composite.
Dynamique : s'adapte à la résolution de l'écran. Ne laisse aucune marge autour de l'application composite.
Dynamique (avancé) : s'adapte à la résolution de l'écran. Permet d'utiliser des conteneurs Flexbox avancés pour la mise en page des éléments.