Utilisation du chargement différé dans une application composite
Le chargement différé vous permet de réduire ou de retarder les opérations qui demandent beaucoup de ressources ou un traitement intensif des données pour améliorer le temps de chargement et les performances de l'application composite. Le chargement différé vous permet de configurer une application composite qui charge des composants essentiels, puis les données supplémentaires afin d'exécuter des services en fonction des actions effectuées par l'utilisateur. En outre, vous pouvez décharger des conteneurs du DOM pour libérer les ressources système et améliorer les performances lorsqu'un conteneur n'est pas actuellement affiché. Cela vous permet de fournir aux utilisateurs un accès plus rapide aux fonctionnalités essentielles, ce qui améliore la réactivité globale de l'application composite. Dans Mashup Builder, le chargement différé est pris en charge à l'aide de propriétés, d'événements et de services pour les types de conteneurs suivants :
• conteneurs de mise en page ;
• conteneurs dans les widgets Onglets et Panneau dynamique.
L'événement d'application composite Loaded est généralement utilisé pour exécuter des services de données et des fonctions dans une application composite, même si les données ne sont pas visibles. Lorsque vous concevez des applications composites plus complexes, les utilisateurs peuvent subir des temps de chargement plus longs et des performances amoindries si l'application composite contient les éléments suivants :
• un grand nombre de services de données exécutés en même temps ;
• des entités de média volumineuses, qui peuvent affecter le temps de téléchargement des ressources ;
• des visualisations qui affichent une grande quantité de données, telles que des widgets Grille et Collection complexes, qui peuvent affecter les performances de rendu.
Prenons l'exemple d'une application composite qui utilise un widget Onglets pour créer une mise en page dans laquelle chaque onglet contient un type de visualisation différent ou un jeu de widgets d'entrée. Lorsqu'un utilisateur a besoin d'afficher certains onglets, le chargement des données de tous les onglets en parallèle augmente le temps de charge et le nombre total de demandes réseau adressées au serveur. Vous pouvez choisir de charger des onglets spécifiques en fonction des actions que l'utilisateur effectue, de la sortie d'un service ou d'une fonction Expression. Pour plus d'informations sur l'utilisation du chargement différé dans un widget onglets, consultez la rubrique Widget Onglets (thématisable).
Bonnes pratiques et considérations relatives à l'utilisation
• Utilisez l'événement Loaded du conteneur au lieu de l'événement d'application composite pour exécuter les services qui sont liés à un widget chargé en différé. La liaison de l'événement Loaded d'application composite dans le but d'exécuter un service pour un conteneur chargé en différé n'affichera aucun résultat, sauf si le service LoadContainer est exécuté.
• Concevez la mise en page de votre solution, puis déterminez quelles sections de votre application composite peuvent être chargées séparément. Examinez les cas d'utilisation typiques de la solution et, sur la base de ces informations, décidez comment charger le contenu. Dans certains cas, charger davantage de données que ce qui est nécessaire au départ peut améliorer l'expérience utilisateur : lorsqu'un utilisateur doit basculer rapidement entre différentes vues, cela laisse moins de temps pour charger chaque onglet individuellement. Au lieu de charger les données pour une durée d'une ou deux secondes chaque fois qu'un conteneur ou un onglet est ouvert, vous pouvez choisir de charger des données spécifiques à l'avance. Après avoir créé votre application composite, vous devez mesurer son temps de chargement et ses performances, puis comparer ces données aux cas d'utilisation prévus pour votre conception.
• Lorsqu'un conteneur met plusieurs secondes à charger son contenu, envisagez de le laisser chargé même lorsqu'il n'est pas actuellement affiché. Cela évite à l'utilisateur d'attendre que le contenu de la vue se recharge chaque fois qu'il y revient après avoir consulté une autre vue. Vous pouvez ajouter un bouton et le lier au widget ReloadContainer pour permettre aux utilisateurs de recharger manuellement les données.
• Assurez-vous que les données d'un conteneur à chargement différé sont utilisées par d'autres widgets, fonctions ou services uniquement après le chargement du conteneur.
• Les applications composites peuvent contenir de nombreux widgets et sections qui ne sont pas toujours pertinents pour tous les utilisateurs. Créez des règles à l'aide de services et de fonctions pour contrôler le chargement et la visibilité des widgets et des données. Vous pouvez charger le contenu en fonction des entrées de l'utilisateur ou des événements survenant lors de l'exécution.
Utilisez les règles de visibilité dans les conteneurs à chargement différé afin qu'ils ne s'affichent qu'en cas de besoin.
• Assurez-vous que les fonctions qui utilisent les paramètres d'entrée des widgets à chargement différé sont exécutées après le chargement du conteneur parent. Les fonctions d'application composite ne fonctionnent que lorsque tous les participants liés sont visibles ou ont été visibles au moins une fois.
Pour configurer les propriétés de chargement différé d'un conteneur :
1. Dans Mashup Builder, sélectionnez un conteneur sur le canevas ou utilisez le panneau Explorateur.
2. 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 affichés.
◦ Pour décharger les données du conteneur, définissez la propriété EnableContainerUnload sur "vrai", puis liez un événement qui exécute le service UnloadContainer.
◦ Pour charger le conteneur au moment de l'exécution, liez le service LoadContainer à un widget, une fonction ou un événement de service de données.
 |
Les conteneurs chargés en différé dans le widget Onglets sont automatiquement chargés, déchargés et rechargés lorsque vous passez à un onglet configuré pour le chargement différé.
|
◦ Pour recharger le contenu dans le conteneur, liez le service ReloadContainer à un événement, par exemple un clic sur un bouton.
3. Liez l'événement Loaded du conteneur sélectionné pour exécuter des services dans les widgets, les services de données ou les fonctions.
Si vous le souhaitez, liez l'événement Unloaded pour effectuer des actions lorsque le conteneur est supprimé du DOM.
4. Cliquez sur Enregistrer, puis sur Afficher l'application composite.
Lorsque LoadContainer est exécuté au moment de l'exécution, l'événement Loaded déclenche et exécute tout service lié, par exemple les données d'un graphique ou d'un service Evaluate d'une fonction Expression Validateur.
Chargement différé des propriétés
Le tableau ci-après répertorie les propriétés, événements et services disponibles pour activer et configurer le chargement différé au niveau de conteneurs d'une application composite.
|
Propriété
|
Description
|
Type de base
|
Valeur par défaut
|
|---|---|---|---|
|
LazyLoading
|
Permet de charger, de décharger et de recharger le conteneur à l'aide d'événements de widget, de fonction ou de service pendant l'exécution.
|
BOOLEAN
|
Faux
|
|
LoadContainer
|
Service liable qui vous permet de charger, de décharger et de recharger le conteneur au moment de l'exécution à l'aide d'événements de widget, de fonction ou de service.
|
Service
|
|
|
Loaded
|
Evénement déclenché lorsque le conteneur est chargé et affiché dans la vue de l'application composite d'exécution. Vous pouvez utiliser cet événement pour exécuter des services qui sont liés aux widgets dans le conteneur.
|
Evénement
|
|
|
EnableContainerUnload
|
Vous permet de décharger le conteneur et son contenu à l'aide du service UnloadContainer lorsque la propriété LazyLoading est activée.
|
BOOLEAN
|
Faux
|
|
UnloadContainer
|
Décharge le conteneur et son contenu, y compris les conteneurs enfants, de la vue de l'application composite d'exécution. Liez cet événement à des événements de l'application composite, tels que l'événement Clicked du widget Bouton ou l'événement True de la fonction de validation.
|
Service
|
|
|
ReloadContainer
|
Recharge le conteneur et son contenu en le déchargeant et en le chargeant dans la vue de l'application composite d'exécution. Cette propriété n'est disponible que lorsque EnableContainerUnload est activé.
|
Service
|
|
|
Unloaded
|
Evénement déclenché lorsque le conteneur est déchargé et supprimé de la vue de l'application composite d'exécution. Cette propriété n'est disponible que lorsque EnableContainerUnload est activé.
|
Evénement
|
Utilisation du chargement différé dans les extensions de widget personnalisé
La section suivante décrit les étapes requises pour mettre à jour une extension de widget personnalisé afin qu'elle prenne en charge le chargement différé. Pour utiliser les fonctionnalités de chargement différé pour les conteneurs, vous devez examiner et mettre à jour manuellement le fichier de widget <nomduwidget>.runtime.js.
Les widgets utilisent une fonction nommée beforeDestroy() qui est utilisée pour effacer les liaisons et les données du widget avant sa suppression dans le DOM HTML. Dans les versions précédentes de ThingWorx, la méthode généralement utilisée pour supprimer un widget du DOM consiste à déclarer une variable qui pointe vers l'objet widget, puis à affecter une valeur null à cette variable lorsque beforeDestroy est appelé. Par exemple :
this.beforeDestroy = function(){
/** Destroy widget
thisWidget = null;
}
/** Destroy widget
thisWidget = null;
}
Cette méthode de destruction des widgets entraîne des problèmes au moment de les recharger, lorsque les méthodes appelées essaient d'utiliser cette variable. Pour utiliser le chargement différé dans un widget personnalisé, vous devez mettre à jour les références à la fonction beforeDestroy() dans le fichier <nomduwidget>.runtime.js de vos extensions de widget personnalisé en ajoutant l'argument domOnly. Voici un exemple de code :
this.beforeDestroy = function(domOnly) {
if (!domOnly) {
thisWidget = null;
]
};
if (!domOnly) {
thisWidget = null;
]
};
L'argument domOnly vous permet de supprimer le widget du DOM sans le détruire. Vous pouvez ainsi le recharger ultérieurement dans le DOM.
Pour mettre à jour une extension existante, procédez comme suit :
1. Extrayez votre extension de widget, puis ouvrez le fichier source du widget <nomduwidget>.runtime.js dans un éditeur de texte. Ce fichier JavaScript définit la structure du widget et son comportement lorsqu'il est utilisé dans une application composite.
2. Recherchez dans le contenu du fichier toutes les références à la fonction beforeDestroy(). Cette fonction est appelée avant que l'élément DOM du widget soit supprimé et avant que le widget soit dissocié de son widget parent et détruit.
◦ Si la méthode est référencée, ajoutez l'argument domOnly comme suit :
this.beforeDestroy = function(domOnly) {
3. Ajoutez une instruction conditionnelle pour l'affectation de la variable afin de détruire le widget uniquement lorsque la valeur de l'argument domOnly est "faux" :
if (!domOnly) {
thisWidget = null;
}
thisWidget = null;
}
4. Enregistrez le fichier runtime.js du widget, puis ré-empaquetez l'extension personnalisée.
5. Importez le widget mis à jour dans Composer.
Vous pouvez maintenant utiliser le widget personnalisé dans les conteneurs à chargement différé.