カスタマイズされた ThingWorx ウィジェットの作成例

アプリケーション開発の最良事例 > ThingWorx アプリケーションのユーザーエクスペリエンスの設計 > ThingWorx アプリケーション内のウィジェット > カスタマイズされた ThingWorx ウィジェットの作成 > カスタマイズされた ThingWorx ウィジェットの作成例

このセクションでは、カスタマイズされたウィジェットを作成してランタイムで処理する方法について説明します。

Mashup Builder のコード

Mashup Builder を使用して作業するには、<ウィジェット名>.ide.js ファイルによってウィジェット関数を実装しなければなりません。ウィジェットで使用可能な関数の詳細については、ウィジェット 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 のすべての機能にランタイムでアクセスできます。