Conseils pour la création de widgets ThingWorx personnalisés
Cette rubrique fournit des conseils pour la création de widgets personnalisés.
• Utilisez this.jqElement pour limiter les sélections d'éléments. Vous réduisez ainsi les risques de comportement imprévisible de l'application dus à des ID et des classes en double dans le DOM.
Utilisez this.jqElement comme indiqué dans l'exemple de code pour limiter les sélections d'éléments :
this.jqElement.find('.add-btn').click(function(e){
...do something...});
• Journalisation : vous pouvez créer des événements de journalisation pour le débogage d'applications composites. Il est recommandé d'utiliser les méthodes suivantes pour créer des messages de journal dans l'environnement d'exécution :
◦ TW.log.trace(message[, message2, ... ][, exception])
◦ TW.log.debug(message[, message2, ... ][, exception])
◦ TW.log.info(message[, message2, ... ][, exception])
◦ TW.log.warn(message[, message2, ... ][, exception])
◦ TW.log.error(message[, message2, ... ][, exception])
◦ TW.log.fatal(message[, message2, ... ][, exception])
Les journaux sont disponibles dans le menu Surveillance. Sélectionnez un journal pour ouvrir la fenêtre de journal et consulter les divers messages. Si le navigateur que vous utilisez prend en charge console.log(), les messages s'affichent également dans la console de débogage.
• Formatage : si vous disposez d'une propriété dont le type de base est défini sur STYLEDEFINITION, vous pouvez obtenir les informations de style à l'aide du code suivant :
var formatResult = TW.getStyleFromStyleDefinition(
widgetProperties['PropertyName']);
Si vous disposez d'une propriété dont le type de base est défini sur STATEFORMATTING, utilisez le code suivant :
var formatResult = TW.getStyleFromStateFormatting({
DataRow: row,
StateFormatting: thisWidget.properties['PropertyName']
});
Dans les deux cas, formatResult est un objet avec les valeurs par défaut suivantes :
{
image: '',
backgroundColor: '',
foregroundColor: '',
fontEmphasisBold: false,
fontEmphasisItalic: false,
fontEmphasisUnderline: false,
displayString: '',
lineThickness: 1,
lineStyle: 'solid',
lineColor: '',
secondaryBackgroundColor: '',
textSize: 'normal'
};