Exemple de création d'un widget ThingWorx personnalisé

Bonnes pratiques pour le développement d'applications > Conception de l'expérience utilisateur de votre application ThingWorx > Widgets dans les applications ThingWorx > Création de widgets ThingWorx personnalisés > Exemple de création d'un widget ThingWorx personnalisé

Cette rubrique décrit comment créer un widget personnalisé et le gérer à l'exécution.

Code Mashup Builder

Le fichier <nomwidget>.ide.js doit implémenter des fonctions widget pour fonctionner avec Mashup Builder. Pour plus d'informations sur les fonctions disponibles pour les widgets, consultez la section API du Mashup Builder disponibles pour les widgets. Les widgets peuvent déclarer des propriétés, des services et des événements de widget dans les fonctions.

L'exemple de code suivant vous montre comment créer un widget. Le nom du widget est MyWidget, qui possède une propriété String pouvant être liée, nommée DisplayText.

TW.IDE.Widgets.mywidget = function () {
this.widgetIconUrl = function() {
return "../Common/extensions/MyExtension/ui/" +
"mywidget/mywidget.ide.png";
};
this.widgetProperties = function () {
return {
name : "My Widget",
description : "An example widget.",
category : ["Common"],
properties : {
DisplayText: {
baseType: "STRING",
defaultValue: "Hello, World!",
isBindingTarget: true
}
}
}
};
this.renderHtml = function () {
var mytext = this.getProperty('MyWidget Property');
var config = {
text: mytext
}
var widgetTemplate = _.template(
'<div class="widget-content widget-mywidget">' +
'<span class="DisplayText"><%- text %></span>' +
'</div>'
);
return widgetTemplate(config);
};
this.afterSetProperty = function (name, value) {
return true;
};
};

Code d'exécution

Pour la gestion du widget à l'exécution, les méthodes du widget doivent mener à bien ce qui suit :

• rendu du HTML à l'exécution ;

• définition de liaisons après le rendu du HTML ;

• gestion des mises à jour des propriétés.

L'exemple de code suivant affiche un fichier <widgetname>.runtime.js pour le widget personnalisé créé dans la section Code Mashup Builder.

TW.Runtime.Widgets.mywidget = function () {
var valueElem;
this.renderHtml = function () {
var mytext = this.getProperty('MyWidget Property');
var config = {
text: mytext
}
var widgetTemplate = _.template(
'<div class="widget-content widget-mywidget">' +
'<span class="DisplayText"><%- text %></span>' +
'</div>'
);
return widgetTemplate(config);
};
this.afterRender = function () {
valueElem = this.jqElement.find(".DisplayText");
valueElem.text(this.getProperty("DisplayText"));
};
this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === "DisplayText") {
valueElem.text(updatePropertyInfo.SinglePropertyValue);
this.setProperty("DisplayText",
updatePropertyInfo.SinglePropertyValue);
}
};
};

Fonctions supplémentaires disponibles dans les widgets

Vous pouvez ajouter les fonctions suivantes dans vos widgets :

• Les services peuvent être liés à des événements. Par exemple :

◦ Un clic sur un bouton

◦ Une modification des lignes sélectionnées

◦ L'exécution d'un service

• Les événements peuvent être liés à différents services. Par exemple, lorsque vous appelez un service, celui-ci accède à une application composite.

• Les propriétés du widget peuvent comporter les éléments suivants :

◦ Données liées (entrantes). Les données entrantes sont spécifiées par "isBindingTarget": true dans le code de définition du widget.

◦ Données renvoyées à ThingWorx (sortantes). Les données sortantes sont spécifiées par "isbindingSource": true dans le code de définition du widget.

Par exemple, user_input_for_name dans l'exemple de code suivant, il s'agit d'une entrée utilisateur, qui est une donnée sortante.

this.widgetProperties = function () {
return {
"name": "user_input_for_name",
"description": "Sample widget that returns a user input",
"category": ['Common'],
"properties": {
"DisplayText": {
"baseType": "STRING",
"defaultValue": "My First Widget!",
"isBindingTarget": true,
"isbindingSource": true
}
}
};
};

Vous pouvez accéder à toutes les fonctionnalités de JavaScript et HTML dans le code de votre widget lors de l'exécution.