매쉬업 작성기 > 위젯
위젯
ThingWorx 위젯은 ThingWorx 매쉬업 페이지의 시각적 구성 요소입니다. 위젯은 차트와 같은 고급 데이터 렌더러이거나 버튼 또는 탐색 링크와 같은 유틸리티 구성 요소 이상입니다. 데이터 렌더링 위젯은 수신 데이터 바인딩을 가지고 있습니다. 데이터 서비스가 실행되면 데이터 결과 집합이 렌더링을 위해 위젯에 바인딩됩니다. 버튼과 같은 다른 위젯에는 수신 데이터 바인딩이 없을 수 있지만, 발신 이벤트 바인딩은 있을 수 있습니다. 예를 들어, 버튼 위젯의 Clicked 이벤트를 데이터 서비스에 바인딩할 수 있습니다. 이 버튼을 클릭하면 서버에서 데이터 서비스가 실행됩니다.
8.4.X에 대한 위젯 카테고리
78개의 위젯은 ThingWorx Platform의 세 가지 주요 카테고리로 분류됩니다.
• 표준: Mashup Builder에 표준으로 나열된 64개의 위젯이 있습니다. 이는 ThingWorx Platform의 기존 위젯입니다.
• 베타: 베타로 나열된 13개의 새 위젯이 있습니다. 이러한 위젯은 SDK에서 가져올 수 있는 웹 구성 요소로 사용할 수도 있습니다.
• 레거시: 반복기 위젯만 레거시로 나열됩니다. 이 위젯은 향후 릴리즈에서 더 이상 사용되지 않습니다.
확장으로 사용할 수 있는 다른 위젯이 있습니다. 이러한 확장 중 일부는 확장에 나열됩니다. ThingWorx에 가져오고 사용할 수 있는 일부 확장은 PTC 소프트웨어 다운로드에서 제공됩니다. 이렇게 가져온 확장은 Mashup Builder의 가져옴 카테고리에 나열됩니다.
8.5.X 이상에 대한 위젯 카테고리
플랫폼에서 위젯은 다음과 같은 5가지 주요 카테고리로 분류됩니다. ThingWorx Composer 설계 페이지의 위젯 패널에서 카테고리 옆에 있는 화살표를 클릭하여 위젯 카테고리를 선택합니다. 각 카테고리에 포함되는 항목에 대한 설명은 다음과 같습니다.
• 모두: 모든 위젯입니다.
• 표준: 대체할 웹 구성 요소가 없는 ThingWorx Platform의 기존 위젯 및 웹 구성 요소 위젯입니다.
* 
일부 위젯은 ThingWorx Platform에서 사용할 수 있으며 SDK에서 가져올 수도 있기 때문에 웹 구성 요소라고 합니다.
• 테마 적용 가능: 스타일 테마를 적용할 수 있는 위젯입니다. 이러한 위젯은 이전 릴리즈에서 베타로 분류되었습니다.
• 레거시: 표준 위젯의 대체가 있는 위젯입니다. 레거시 위젯은 향후 릴리즈에서 더 이상 사용되지 않습니다.
• 가져옴: ThingWorx Platform으로 가져온 위젯이 이 카테고리에 나열됩니다. 이러한 확장 중 일부는 확장에 나열됩니다. ThingWorx에 가져오고 사용할 수 있는 일부 확장은 PTC 소프트웨어 다운로드에서 제공됩니다.
패널에는 위젯의 기능을 기반으로 위젯을 찾는 데 도움이 되는 하위 카테고리가 있습니다. 유사한 기능을 수행하는 위젯은 이러한 각 하위 카테고리에 함께 나열됩니다. 예를 들어, 차트에는 차트를 렌더링할 수 있는 모든 위젯 목록이 표시됩니다. 매쉬업에서 사용할 위젯을 찾기 위해 다음 하위 카테고리를 선택할 수 있습니다. 차트, 공동 작업, 공통, 구성 요소, 컨테이너, 데이터 및 탐색
위젯 배치
위젯을 매쉬업의 위치로 끌 수 있습니다. 예를 들어, 위젯을 매쉬업 루트 또는 패널이나 필드 집합과 같은 컨테이너 객체로 끌 수 있습니다.
위젯 속성
모든 위젯에는 페이지에 특정 위젯 인스턴스를 구성하기 위한 속성이 있습니다. 속성은 매쉬업 작성기의 위젯 속성 창에서 편집합니다. 속성은 수동으로 설정하거나 매쉬업의 다른 데이터 서비스 또는 이벤트에 바인딩할 수 있습니다. 속성을 바인딩할 수 있는 경우, 속성 이름 옆에는 입력쪽 화살표(다른 소스에서 속성 값을 설정할 수 있음)나 출력쪽 화살표(속성 값이 매개 변수의 값 또는 다른 속성에 대한 소스일 수 있음) 또는 둘 다 있습니다. 다음 속성은 모든 위젯에서 공유합니다.
• Id - ThingWorx에서 내부적으로 사용되는 고유한 식별자입니다.
• Type - 위젯 유형입니다.
• DisplayName - 사용자가 정의한 표시 이름으로, 위젯을 식별합니다.
• Description - 사용자 정의 설명입니다.
• Top - 위젯 위치에 대한 위쪽 Y 좌표입니다.
• Left - 위젯 위치에 대한 왼쪽 X 좌표입니다.
• Width - 너비(픽셀)입니다.
• Height - 높이(픽셀)입니다.
• Z-index - 계층화된 위젯의 순서입니다. 일반적으로 Z색인이 낮은 위젯은 Z색인이 높은 위젯 뒤로 이동합니다.
• ShowDataLoading - 로드되는 동안 데이터를 표시합니다.
• Visible - 매쉬업을 볼 때 위젯을 표시합니다.
속성 값이 수동으로 설정되면 속성 행 배경이 강조 표시됩니다. 속성에 바인딩이 있으면 관련된 입력 화살표가 채워집니다.
위젯 구성
다음 방법 중 하나로 위젯 구성 대화 상자를 열 수 있습니다.
• 위젯 컨테이너의 왼쪽 위 모서리에 있는 드롭다운 화살표를 마우스 커서로 가리킨 다음 목록에서 바인딩 구성을 선택합니다.
• 위젯을 선택한 다음 속성 패널에서 명령을 클릭합니다.
구성 대화 상자에는 위젯의 바인딩 가능한 모든 속성이 나열됩니다. 각 속성에 대한 바인딩 소스 및 대상을 보거나 설정할 수 있습니다. 이 대화 상자는 바인딩을 위한 표준 끌어서 놓기 방법에 대한 대안으로 작동합니다. 고급 그리드와 같은 일부 위젯은 자체 구성 대화 상자를 가지고 있으며, 이 대화 상자에서는 위젯에 관련된 옵션을 설정할 수 있습니다.
응용 프로그램을 위한 로컬리제이션
텍스트 속성 옆에 있는 을 클릭하면 텍스트가 더 이상 정적으로 설정되지 않지만 이제 로컬리제이션 토큰을 기반으로 합니다. Magic Picker를 클릭합니다. 그러면 기존 로컬리제이션 토큰을 선택하거나 새 토큰을 생성할 수 있습니다. 새 로컬리제이션 토큰을 추가할 때 네임스페이스가 있는 토큰 이름을 추가합니다. 이렇게 하면 다른 소스의 토큰과 충돌하는 것이 방지되며, 개발자 및 번역가는 응용 프로그램별 토큰만 사용하여 작업할 수 있습니다. 문자열 값 필드에 기본 텍스트 값을 입력합니다. 응용 프로그램에 필요한 모든 토큰을 정의한 후 토큰 이름으로 필터링하여 로컬리제이션 토큰 페이지에서 토큰을 검토할 수 있습니다. 각 토큰에 대한 사용 및 컨텍스트 정보를 추가해야 합니다.
다른 언어로 번역하기 위해 해당 언어에 대한 로컬리제이션 테이블이 있는지 확인하십시오. 가져오기/내보내기 메뉴를 사용하여 엔티티를 XML 파일로 내보낼 수 있습니다. 네임스페이스가 있는 로컬리제이션 토큰을 토큰 접두사로 입력합니다. XML 출력 파일에서 다른 언어에 대한 번역은 빈 <Rows/> 요소에 추가되어야 합니다. 번역이 준비되고 로컬리제이션 테이블 속성 name, description, languageCommon 및 languageNative가 올바른지 확인한 후에는 ThingWorx로 가져올 수 있으며, 언어에 대한 기존 로컬리제이션 테이블에 병합됩니다.
다음 사항을 고려하십시오.
• 새 언어가 도입되는 경우 여러 위젯에서는 시스템 로컬리제이션 테이블의 토큰을 사용합니다. 이러한 토큰도 번역해야 하지만 토큰 집합을 사용되는 토큰으로 제한하는 간단한 방법은 없습니다. 따라서 이는 수동 필터링 단계입니다. 기존 언어의 경우 시스템 토큰이 이미 번역되었는지 확인합니다.
• XML 파일을 내보내고 편집할 때 UTF-8 인코딩이 유지되는지 확인하십시오. 파일을 다시 가져올 때 인코딩 문제가 오류로 발생하거나 악센트 문자 대신 다른 예기치 않은 문자 또는 물음표가 있는 번역된 문자열로 발생할 수 있습니다. ThingWorx에서 기본 파일 인코딩으로 UTF-8을 사용하도록 설정해야 합니다. 실행 시 Java 옵션 -Dfile.encoding=UTF-8을 지정합니다.
위젯 이벤트
여러 위젯에는 속성 이외에 이벤트도 있습니다. 이벤트는 데이터 서비스를 개시하는 데 사용할 수 있습니다. 위젯에 하나 이상의 이벤트가 있는 경우 속성 패널(반짝이는 볼트 아이콘이 있음) 또는 클릭 메뉴를 통해 이벤트를 사용할 수 있습니다. 클릭 메뉴에서 데이터 서비스로 위젯 이벤트를 끌어 올 수 있습니다.
위젯 스타일 지정
스타일 정의는 위젯의 모양과 렌더링을 제어하기 위한 시스템 정의 엔티티입니다. 일부 위젯은 상태 정의도 지원하므로 데이터 값을 기반으로 스타일을 동적으로 적용할 수 있습니다. 자세한 내용은 개별 위젯 단원을 참조하십시오. 위젯 스타일 지정을 위한 속성 패널에 대한 자세한 내용은 테마를 참조하십시오.