Best practice per lo sviluppo di soluzioni > Progettazione del livello di percezione e interazione dell'utente con la soluzione ThingWorx > Widget nelle soluzioni ThingWorx > Creazione di widget ThingWorx personalizzati > Esempio di creazione di un widget ThingWorx personalizzato
Esempio di creazione di un widget ThingWorx personalizzato
La presente sezione illustra come creare un widget personalizzato e gestirlo in fase di esecuzione.
Codice Mashup Builder
Per poter utilizzare Mashup Builder, il file <nomewidget>.ide.js deve implementare le funzioni del widget. Per ulteriori informazioni sulle funzioni disponibili per i widget, vedere la sezione relativa alle API Mashup Builder disponibili per i widget. I widget possono dichiarare proprietà, servizi ed eventi nelle funzioni.
Il codice di esempio riportato di seguito mostra come creare un widget. Il nome del widget è MyWidget e presenta una proprietà stringa associabile denominata 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;
};
};
Codice esecuzione
Per gestire il widget in fase di esecuzione, i metodi del widget devono effettuare le operazioni descritte di seguito.
• Eseguire il rendering dell'HTML in fase di esecuzione
• Impostare le associazioni dopo il rendering dell'HTML
• Gestire gli aggiornamenti delle proprietà
Il codice di esempio riportato di seguito mostra un file <widgetname>.runtime.js per il widget personalizzato creato in Codice 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);
}
};
};
Funzionalità aggiuntive disponibili nei widget
Nei widget è possibile aggiungere le funzionalità riportate di seguito.
• I servizi possono essere associati agli eventi. Ad esempio:
◦ Si fa clic su un pulsante.
◦ Sono state modificate le righe selezionate.
◦ È stato completato un servizio.
• Gli eventi possono essere associati a vari servizi. Ad esempio, quando si chiama un servizio, si passa a un mashup.
• Le proprietà del widget possono presentare gli elementi elencati di seguito.
◦ Dati associati (in entrata). I dati in entrata vengono specificati come "isBindingTarget": true nel codice di definizione del widget.
◦ Dati restituiti a ThingWorx (in uscita). I dati in uscita vengono specificati come "isbindingSource": true nel codice di definizione del widget.
Nel codice di esempio che segue user_input_for_name è infatti un input utente, ovvero un dato in uscita.
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
}
}
};
};
È possibile accedere a tutte le funzionalità di JavaScript e HTML nel codice del widget in fase di esecuzione.
È stato utile?