Tipps zum Erstellen von angepassten ThingWorx Widgets
Dieser Abschnitt enthält Tipps zum Erstellen von angepassten Widgets.
• Verwenden Sie this.jqElement, um die Elementauswahl einzuschränken. Dies verringert die Wahrscheinlichkeit, dass in der Lösung ein unvorhersehbares Verhalten eingeführt wird, wenn im DOM doppelte IDs und Klassen vorhanden sind.
Verwenden Sie this.jqElement wie im Beispielcode dargestellt, um die Elementauswahl einzuschränken:
this.jqElement.find('.add-btn').click(function(e){
...do something...});
• Protokollierung – Sie können Protokollierungsereignisse für das Debuggen von Mashups erstellen. Es wird empfohlen, dass Sie die folgenden Methoden verwenden, um Protokollmeldungen in der Laufzeitumgebung zu erstellen:
◦ 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])
Protokolle stehen im Menü Überwachung zur Verfügung. Wählen Sie ein Protokoll aus, um das Protokollfenster zu öffnen und die Protokollmeldungen anzuzeigen. Wenn der von Ihnen verwendete Browser console.log() unterstützt, werden die Meldungen auch in der Debugger-Konsole angezeigt.
• Formatierung – Wenn Sie eine Eigenschaft mit dem Basistyp STYLEDEFINITION festgelegt haben, können Sie die Stilinformationen mit dem folgenden Code abrufen:
var formatResult = TW.getStyleFromStyleDefinition(
widgetProperties['PropertyName']);
Wenn Sie eine Eigenschaft mit dem Basistyp STATEFORMATTING festgelegt haben, verwenden Sie den folgenden Code:
var formatResult = TW.getStyleFromStateFormatting({
DataRow: row,
StateFormatting: thisWidget.properties['PropertyName']
});
In beiden Fällen ist formatResult ein Objekt mit den folgenden Standardeinstellungen:
{
image: '',
backgroundColor: '',
foregroundColor: '',
fontEmphasisBold: false,
fontEmphasisItalic: false,
fontEmphasisUnderline: false,
displayString: '',
lineThickness: 1,
lineStyle: 'solid',
lineColor: '',
secondaryBackgroundColor: '',
textSize: 'normal'
};