创建自定义 ThingWorx 小组件的示例

开发应用程序的最佳做法 > 设计 ThingWorx 应用程序的用户体验 > ThingWorx 应用程序中的小组件 > 创建自定义 ThingWorx 小组件 > 创建自定义 ThingWorx 小组件的示例

本部分将介绍如何创建自定义小组件并在运行时对其进行处理。

Mashup Builder 代码

<widgetname>.ide.js 文件必须实现小组件函数才能使用 Mashup Builder。有关小组件适用函数的详细信息，请参阅小组件 API：Mashup Builder 部分。小组件可在函数中声明小组件属性、服务和事件。

以下示例代码显示了如何创建小组件。此小组件的名称为 MyWidget，它具有一个名为 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;
};
};

运行时代码

要在运行时处理此小组件，小组件方法必须执行以下操作：

• 在运行时呈现 HTML

• 在呈现 HTML 后设置绑定

• 处理属性更新

以下示例代码显示了在 Mashup Builder 代码中为自定义小组件创建的 <widgetname>.runtime.js 文件。

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);
}
};
};

小组件中提供的附加功能

您可以在小组件中添加以下功能：

• 服务可绑定到事件。例如：

◦ 单击某个按钮。

◦ 选定行已更改。

◦ 服务已完成。

• 事件可绑定到各种服务。例如，当您调用服务时，它会导航至混搭。

• 小组件属性可以：

◦ 将数据绑定到其中 (入站)。入站数据在小组件定义代码中指定为 "isBindingTarget": true。

◦ 发送回 ThingWorx 的数据 (出站)。出站数据在小组件定义代码中指定为 "isbindingSource": true。

例如，以下示例代码中的 user_input_for_name 是一个用户输入，属于出站数据。

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
}
}
};
};

您可以在运行时访问小组件代码中 JavaScript 和 HTML 的所有功能。