Suggerimenti per la creazione di widget ThingWorx personalizzati
La presente sezione offre suggerimenti per la creazione di widget personalizzati.
• Utilizzare this.jqElement per limitare le selezioni degli elementi. In questo modo si riduce la possibilità di introdurre un comportamento imprevedibile nella soluzione se sono presenti ID e classi duplicati nel DOM.
Utilizzare this.jqElement come illustrato nel codice di esempio per limitare le selezioni degli elementi:
this.jqElement.find('.add-btn').click(function(e){
...do something...});
• Registrazione - È possibile creare eventi di registrazione per il debug dei mashup. Per creare messaggi di log nell'ambiente di esecuzione, è consigliabile utilizzare i metodi descritti di seguito.
◦ 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])
I log sono disponibili nel menu Monitoraggio. Selezionare un log per aprire la finestra in cui sono visualizzati i messaggi di log. Se il browser utilizzato supporta console.log(), i messaggi vengono visualizzati anche nella console del debugger.
• Formattazione - Se è presente una proprietà con tipo di base impostato come STYLEDEFINITION, è possibile ottenere le informazioni sullo stile utilizzando il codice seguente:
var formatResult = TW.getStyleFromStyleDefinition(
widgetProperties['PropertyName']);
Se è presente una proprietà con tipo di base impostato come STATEFORMATTING, utilizzare il codice seguente:
var formatResult = TW.getStyleFromStateFormatting({
DataRow: row,
StateFormatting: thisWidget.properties['PropertyName']
});
In entrambi i casi formatResult è un oggetto con i valori di default seguenti:
{
image: '',
backgroundColor: '',
foregroundColor: '',
fontEmphasisBold: false,
fontEmphasisItalic: false,
fontEmphasisUnderline: false,
displayString: '',
lineThickness: 1,
lineStyle: 'solid',
lineColor: '',
secondaryBackgroundColor: '',
textSize: 'normal'
};