사용자 정의된 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'
};