Optimale Vorgehensweisen für die Entwicklung von Lösungen > Benutzererlebnis für Ihre ThingWorx Lösung entwerfen > Widgets in ThingWorx Lösungen > Angepasste ThingWorx Widgets erstellen > Beispiel für das Erstellen eines angepassten ThingWorx Widgets
Beispiel für das Erstellen eines angepassten ThingWorx Widgets
In diesem Abschnitt wird beschrieben, wie ein angepasstes Widget erstellt und zur Laufzeit verarbeitet wird.
Mashup Builder-Code
Die Datei <Widget-Name>.ide.js muss Widget-Funktionen implementieren, um mit Mashup Builder zu arbeiten. Weitere Informationen zu den für Widgets verfügbaren Funktionen finden Sie im Abschnitt Funktionen zum Anpassen von ThingWorx Widgets. Widgets können Widget-Eigenschaften, Dienste und Ereignisse in den Funktionen deklarieren.
Der folgende Beispielcode zeigt, wie ein Widget erstellt wird. Der Name des Widgets ist MyWidget, das eine bindbare Zeichenfolgeneigenschaft namens DisplayText hat.
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;
};
};
Laufzeitcode
Um das Widget zur Laufzeit zu verarbeiten, müssen die Widget-Methoden folgende Schritte ausführen:
• HTML zur Laufzeit rendern
• Bindungen nach dem Rendern der HTML einrichten
• Eigenschaftsaktualisierungen verarbeiten
Der folgende Beispielcode zeigt die Datei <widgetname>.runtime.js für das angepasste Widget, das im Mashup Builder-Code erstellt wurde.
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);
}
};
};
Zusätzliche Funktionen in Widgets
Sie können die folgenden Funktionen in Ihren Widgets hinzufügen:
• Dienste können an Ereignisse gebunden sein. Beispiel:
◦ Es wird auf eine Schaltfläche geklickt.
◦ Ausgewählte Zeilen haben sich geändert.
◦ Ein Dienst wurde abgeschlossen.
• Ereignisse können an verschiedene Dienste gebunden sein. Wenn Sie beispielsweise einen Dienst aufrufen, navigiert er zu einem Mashup.
• Widget-Eigenschaften können Folgendes aufweisen:
◦ Daten, die an sie gebunden sind (eingehend). Die eingehenden Daten werden als "isBindingTarget": true im Widget-Definitionscode angegeben.
◦ Daten, die an ThingWorx zurückgesendet werden (ausgehend). Die ausgehenden Daten werden als "isbindingSource": true im Widget-Definitionscode angegeben.
Im folgenden Beispielcode ist user_input_for_name beispielsweise eine Benutzereingabe, bei der es sich um ausgehende Daten handelt.
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
}
}
};
};
Sie können zur Laufzeit auf alle Funktionen von JavaScript und HTML in Ihrem Widget-Code zugreifen.
War dies hilfreich?