カスタマイズされた ThingWorx ウィジェットの作成に関するヒント
このセクションでは、カスタマイズされたウィジェットを作成するためのヒントを示します。
• エレメントの選択を制限するには、this.jqElement を使用します。これにより、DOM 内に重複する ID やクラスが存在する場合に、アプリケーションで予期しない動作が行われる可能性が低くなります。
エレメントの選択を制限するには、サンプルコードで示されているように this.jqElement を使用します。
this.jqElement.find('.add-btn').click(function(e){
...do something...});
• ログ - マッシュアップをデバッグするためのログイベントを作成できます。ランタイム環境でログメッセージを作成するには、以下のメソッドを使用することをお勧めします。
◦ 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])
ログは「監視」メニューで確認できます。ログを選択するとログウィンドウが開き、ログメッセージが表示されます。使用するブラウザで console.log() がサポートされている場合、デバッガコンソールにもメッセージが表示されます。
• フォーマット - ベースタイプが STYLEDEFINITION として設定されているプロパティがある場合、以下のコードを使用してスタイル情報を取得できます。
var formatResult = TW.getStyleFromStyleDefinition(
widgetProperties['PropertyName']);
ベースタイプが STATEFORMATTING として設定されているプロパティがある場合、以下のコードを使用します。
var formatResult = TW.getStyleFromStateFormatting({
DataRow: row,
StateFormatting: thisWidget.properties['PropertyName']
});
どちらの場合も、formatResult は以下のデフォルトを持つオブジェクトです。
{
image: '',
backgroundColor: '',
foregroundColor: '',
fontEmphasisBold: false,
fontEmphasisItalic: false,
fontEmphasisUnderline: false,
displayString: '',
lineThickness: 1,
lineStyle: 'solid',
lineColor: '',
secondaryBackgroundColor: '',
textSize: 'normal'
};