Sugerencias para la creación de widgets de ThingWorx personalizados
En esta sección se proporcionan sugerencias para la creación de widgets personalizados.
• Utilice this.jqElement para limitar las selecciones de elementos. De esta forma, se reduce la probabilidad de introducir un comportamiento impredecible en la aplicación si hay ID y clases duplicados en el DOM.
Utilice this.jqElement, tal como se muestra en el código de ejemplo, para limitar las selecciones de elementos:
this.jqElement.find('.add-btn').click(function(e){
...do something...});
• Registro: se pueden crear eventos de registro para la depuración de mashups. Se recomienda utilizar los siguientes métodos para crear mensajes de registro en el entorno de tiempo de ejecución:
◦ 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])
Los registros están disponibles en el menú Supervisión. Seleccione un registro para abrir la ventana de registro y ver los mensajes de registro. Si el explorador que se utiliza soporta console.log(), los mensajes también aparecen en la consola del depurador.
• Formato: si hay una propiedad con el tipo base definido en STYLEDEFINITION, se puede obtener la información de estilo con el código que se indica a continuación.
var formatResult = TW.getStyleFromStyleDefinition(
widgetProperties['PropertyName']);
Si existe una propiedad de tipo base definido en STATEFORMATTING, utilice el siguiente código:
var formatResult = TW.getStyleFromStateFormatting({
DataRow: row,
StateFormatting: thisWidget.properties['PropertyName']
});
En ambos casos, formatResult es un objeto con los siguientes valores por defecto:
{
image: '',
backgroundColor: '',
foregroundColor: '',
fontEmphasisBold: false,
fontEmphasisItalic: false,
fontEmphasisUnderline: false,
displayString: '',
lineThickness: 1,
lineStyle: 'solid',
lineColor: '',
secondaryBackgroundColor: '',
textSize: 'normal'
};