응용 프로그램 개발을 위한 모범 사례 > ThingWorx 응용 프로그램에 대한 사용자 경험 설계 > ThingWorx 응용 프로그램의 위젯 > 사용자 정의된 ThingWorx 위젯 만들기 > 사용자 정의된 ThingWorx 위젯 만들기의 예
사용자 정의된 ThingWorx 위젯 만들기의 예
이 단원에서는 사용자 정의된 위젯을 만들고 이를 런타임에 처리하는 방법을 보여줍니다.
Mashup Builder 코드
Mashup Builder 작업을 수행하려면 <위젯 이름>.ide.js 파일에서 위젯 함수를 구현해야 합니다. 위젯에 사용할 수 있는 함수에 대한 자세한 내용은 위젯 API: Mashup Builder 단원을 참조하십시오. 위젯은 함수에서 위젯 속성, 서비스 및 이벤트를 선언할 수 있습니다.
다음 샘플 코드에서는 위젯을 만드는 방법을 보여줍니다. 위젯의 이름은 DisplayText라는 바인딩 가능 문자열 속성이 있는 MyWidget입니다.
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의 모든 기능에 액세스할 수 있습니다.