예: 목록 위젯에 상태 서식 적용
목록
목록 위젯에 상태 정의 엔티티를 적용할 수 있습니다. 다음 예에서는 상태 서식 적용을 사용하여 문자열 값을 기준으로 목록 항목의 현재 상태를 강조 표시합니다. 다음 그림에서는 상태 서식을 적용하기 전 실행 시간 동안 레이블 및 버튼 위젯을 포함하는 매쉬업의 목록 위젯을 보여줍니다.
이 목록은 바인딩된 인포테이블의 데이터를 표시합니다. 스타일 및 색상은 PTC Convergence Theme의 기본값을 사용하여 목록의 각 항목에 적용됩니다. 이 예에서는 목록에 있는 각 작업의 상태를 강조 표시하기 위해 상태 서식이 적용됩니다.
 | 이 항목에서는 사용자가 ThingWorx 인포테이블 내에서 데이터를 생성 및 구성하는 방법을 잘 알고 있다고 가정합니다. |
상태 서식을 적용하려면 각 작업의 상태를 지정하는 데 사용할 수 있는 위젯 인포테이블에 데이터 열을 추가해야 합니다. 이 열의 데이터를 사용하여 Mashup Builder의 위젯에 상태 서식을 적용할 수 있습니다. 목록 내의 각 작업 상태는 상태 서식 적용 열의 문자열과 일치하는 네 가지 상태 중 하나일 수 있습니다.
상태 | 일치하는 문자열 |
|---|---|
 할 일 | ToDo |
 진행 중 | InProgress |
 완료 | Done |
 - 기본값 | 기타 다른 값은 데이터의 오류로 간주됩니다. 이 예에서는 텍스트에 빨간색이 지정되고 목록 항목 옆에 아이콘이 표시됩니다. |
상태 정의를 생성하고 조건을 정의하려면 다음을 수행합니다.
1. 스타일 정의에 대한 아이콘을 미디어 엔티티로 업로드합니다.
2. Composer에서 상태 정의 엔티티를 생성한 다음 상태 정보 탭을 엽니다.
3. 상태를 추가하고 각 상태에 대한 스타일을 선택합니다.
4. 스타일에서 각 상태에 사용할 스타일 정의 엔티티를 선택하거나 사용자 정의 스타일 정의를 정의합니다.
사용자 정의 스타일 정의를 정의하려면 다음을 수행합니다.
a. 스타일 엔티티 선택기에서 새 스타일 정의를 클릭합니다. 새 사용자 정의 스타일 대화 상자가 열립니다.
b. 스타일 옵션을 구성하고 1단계에서 생성한 미디어 엔티티를 선택합니다.
c. 완료를 클릭하여 스타일 정의를 저장합니다.
5. 저장을 클릭하여 상태 정의 엔티티를 저장합니다.
다음 그림에서는 스타일 조건을 정의한 후 나열되는 상태를 보여줍니다.
상태 정의를 생성한 후 위젯에 상태 서식을 적용합니다.
1. Mashup Builder에서 캔버스 위의 목록 위젯을 선택합니다.
2. 속성 패널에서 ListFormat 속성 옆에 있는 상태 서식 적용을 클릭합니다. 상태 서식 적용 대화 상자가 열립니다.
3. 상태 기반 스타일 정의를 클릭한 다음 이전 절차에서 생성한 상태 정의 엔티티를 선택합니다.
4. 바인딩된 인포테이블에서 종속 필드를 선택합니다. 이 예에서는 인포테이블 열 이름이 Status입니다.
5. 완료를 클릭하여 대화 상자를 닫은 다음 매쉬업을 봅니다.
실행 시간 동안 목록 항목이 표시되고 각 항목의 스타일이 Status 열 내의 값에 따라 지정됩니다. 다음 이미지에서는 상태 서식이 적용된 매쉬업의 목록 위젯을 보여줍니다.
상태 서식 적용 외에도 스타일 속성 패널의 사용 가능한 스타일을 사용하여 위젯의 선 및 기타 부분을 사용자 정의할 수 있습니다.