Thingworx Extension Third-Party JavaScript Libraries Tip

Thingworx Extension #

Thingworx Extension으로 Third-Party Javascript Libraries를 사용하는 방법은 Thingworx Document에 다음과 같이 소개되어 있습니다.

if (!jQuery().qtip) {
$("body").append('<script type="text/javascript"
src="../Common/extensions/MyExtension/ui/mywidget/
include/qtip/jquery.qtip.js"></script>');
$("head").append('<link type="text/css"
rel="stylesheet" href="
../Common/extensions/MyExtension/ui/mywidget/include/
qtip/jquery.qtip.css" />');
}

Thingworx widget Extension을 만들 때, 아래 코드와 같이 renderHtml 함수에 추가하여 사용하는 방법을 제시하고 있습니다.

this.renderHtml = function() {
    
    ...
    
	if(!jQuery().ptccommonhighchart){
		this.body_append(
		'<script type="text/javascript"	src="../Common/extensions/<project>/ui/<widget>/lib/highcharts.js"></script>');
	}
}

이렇게 사용할 경우 종종 Thingworx Runtime 시에 Third-Party Javascript libraries에 정의되어 있는 기능이 정의되지 않았다고 에러가 발생하곤 합니다.

해당 에러가 발생 했을 경우 다음과 같은 방법으로 해결할 수 있습니다.

Javascript Libraries is not defined 해결법 #

Thingworx Extension Project root 폴더 하위에 configfiles 폴더의 metadata.xml 파일을 열어줍니다.
metadata.xml 의 안에 필요한 third-party libraries 들을 추가합니다.
```
<widget name="someWidget">
	<UIResources>
        <FileResource description="" file="/lib/highcharts.js" isDevelopment="false" isRuntime="true" type="JS"></FileResource>
    </UIResources>
</widget>
```
FileResource
1. file: 파일을 경로를 입력받습니다. 경로는 widget name 폴더 하위의 경로부터 시작합니다.
2. isDevelopment : Composer 에서 필요한 소스 유무를 boolean 값으로 입력합니다.
3. isRuntime : Runtime 에서 필요한 소스 유무를 boolean 값으로 입력합니다.
4. type : 파일의 타입을 입력합니다.
복수의 위젯을 만들때, 첫 번째 widget에서 metadata.xml에 추가한 소스는 별도로 추가하지 않아도 됩니다.

Thingwrox Extension 개발을 위한 이클립스 환경 설정은 아래 링크의 포스트를 참고하세요.

Thingworx Extension 개발을 위한 이클립스 개발 환경 세팅