Prácticas recomendadas para el desarrollo de aplicaciones > Diseño de la experiencia de usuario para la aplicación de ThingWorx > Widgets en aplicaciones de ThingWorx > Creación de widgets de ThingWorx personalizados > Ejemplo de creación de un widget de ThingWorx personalizado
Ejemplo de creación de un widget de ThingWorx personalizado
En esta sección se describe cómo crear un widget personalizado y gestionarlo en tiempo de ejecución.
Código de Mashup Builder
El fichero <nombrewidget>.ide.js debe implementar funciones de widget para trabajar con Mashup Builder. Consulte la sección API de widget: Mashup Builder para obtener más información sobre las funciones disponibles para los widgets. Los widgets pueden declarar propiedades, servicios y eventos de widgets en las funciones.
En el siguiente código de ejemplo se muestra cómo crear un widget. El nombre del widget es MyWidget, que tiene una propiedad de cadena enlazable denominada 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;
};
};
Código de tiempo de ejecución
Para gestionar el widget en tiempo de ejecución, los métodos del widget deben realizar lo siguiente:
• Representar el HTML en tiempo de ejecución
• Configurar enlaces después de representar el HTML
• Gestionar las actualizaciones de propiedades
En el siguiente código de ejemplo se muestra un fichero <widgetname>.runtime.js para el widget personalizado creado en Código de 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);
}
};
};
Funciones adicionales disponibles en widgets
Se pueden añadir las siguientes funciones a los widgets:
• Los servicios se pueden enlazar a eventos. Por ejemplo:
◦ Se pulsa en un botón.
◦ Las filas seleccionadas han cambiado.
◦ Se ha completado un servicio.
• Los eventos se pueden enlazar a distintos servicios. Por ejemplo, cuando se invoca un servicio, navega a un mashup.
• Las propiedades del widget pueden tener lo siguiente:
◦ Datos enlazados (entrantes). Los datos entrantes se especifican como "isBindingTarget": true en el código de definición de widget.
◦ Datos que se envían de nuevo a ThingWorx (salientes). Los datos salientes se especifican como "isbindingSource": true en el código de definición de widget.
Por ejemplo, user_input_for_name en el siguiente código de ejemplo es una entrada del usuario, que son datos salientes.
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
}
}
};
};
Se puede acceder a toda la funcionalidad de JavaScript y HTML en el código de widget en tiempo de ejecución.