매쉬업 작성기 > 위젯 > 컬렉션 위젯
컬렉션 위젯
컬렉션 위젯은 컬렉션에 일련의 반복된 매쉬업을 포함할 수 있는 고급 위젯입니다. 컬렉션 위젯은 인포테이블 서비스를 사용하여 시각적 콘텐츠를 동적으로 정의합니다. 컬렉션 위젯은 반복기 위젯과 비슷하지만, 더 많은 옵션과 보다 뛰어난 성능을 제공하는 속성을 더 많이 포함합니다.
* 
컬렉션 위젯은 ThingWorx 8.2 이상 버전에서 사용할 수 있습니다. 반복기 위젯 대신 컬렉션 위젯을 사용하는 것이 좋습니다.
주요 기능
간격, 안쪽 여백, 머리글, 바닥글, 섹션, 애니메이션 등을 세부적으로 제어할 수 있는 60개 이상의 속성
모든 셀에 동적 데이터를 추가하는 기능 포함
반복기 위젯보다 성능이 뛰어남. 메모리 사용률을 개선하기 위해 컬렉션 위젯은 시각화에 사용되는 많은 양의 정보를 캐시합니다. 실행 시간 중 반복기 위젯보다 탐색 및 스크롤이 더 빠르고 원활합니다.
컬렉션 위젯에서 사용할 수 있는 두 가지 보기는 다음과 같습니다.
흐름 레이아웃: 반응형, 가로 배치. 이 레이아웃은 반복기 위젯과 가장 비슷합니다.
테이블 레이아웃: 세로 배치, 행당 매쉬업 하나 허용
사용 개요
MashupPropertyBinding은 컬렉션 위젯의 중요한 속성입니다. 데이터가 통과할 수 있도록 인포테이블 필드 이름을 매쉬업 매개 변수와 연관시키는 JSON 문자열이 지정되어야 합니다. 예:
{"events":"eventsName","min_temp":"minTemp","max_temp":"maxTemp","precipitation":"precipitation","image":"image","wind":"wind","sourceType":"sourceType","date":"date","week":"week","id":"rowId"}
옵션 사항인 MashupGlobalPropertyBinding을 사용하면 제품 이름과 같이 컬렉션의 모든 셀에 동일하게 표시되어야 하는 변수 데이터를 전달하기 위해 정의하는 사용자 정의 속성을 추가할 수 있습니다. 이 속성을 사용하지 않는다면 포함된 매쉬업의 일부가 되어야 하거나 MashupPropertyBinding을 통해 서비스를 불필요하게 많이 통과해 행마다 전달되어야 하는 데이터에 이 속성을 사용해 보십시오.
MashupGlobalPropertyBinding은 동일한 JSON 형식을 사용하지만, 각 엔트리에는 고유한 속성 이름(사용자가 정의)이 키로, ThingWorx 기본 유형이 해당 값(예: STRING, NUMBER, BOOLEAN)으로 포함되어야 합니다. MashupGlobalPropertyBinding 필드 밖으로 탭할 때 모든 엔트리에서 컬렉션 위젯에 바인딩 가능한 사용자 정의 속성을 제공합니다.
데이터로 위젯 채우기
다음과 같은 여러 방법으로 실행 시간에 위젯에서 매쉬업으로 채워지도록 켈렉션 위젯을 구성할 수 있습니다.
속성을 매쉬업 이름으로 설정하여 매쉬업을 정의할 수 있습니다.
Mashup 이름에 적절하게 바인딩할 수 있습니다.
서비스를 사용하여 각 셀에 매쉬업 이름을 제공할 수 있습니다.
셀이 선택되거나 빈 경우 표시되도록 매쉬업을 정의할 수 있습니다.
알려진 브라우저 제한
컬렉션 위젯은 Chrome 및 Firefox에서 더 빠르게 수행되고 로드됩니다. Edge에서 잘 작동합니다. Internet Explorer 11에서는 로드 시간이 더 길어지며 성능이 더 느려집니다.
속성
공통 위젯 속성에 대한 자세한 내용은 위젯을 참조하십시오. 컬렉션 위젯에 고유한 속성은 아래 표에 설명되어 있습니다.
속성 이름
설명
기본 유형
기본값
바인딩 가능 여부 (Y/N)
로컬리제이션 가능 여부 (Y/N)
Data
위젯에 대한 데이터 소스를 나타냅니다.
* 
인포테이블에는 고유 ID가 포함되어야 합니다.
INFOTABLE
해당 없음
Y
N
View
레이아웃 유형입니다. 옵션은 FlowTable입니다. 흐름은 반응형이며, 테이블은 행당 매쉬업 하나를 허용하는 그리드 형태입니다.
STRING
흐름
Y
N
Mashup
데이터 항목에 사용할 매쉬업입니다.
MASHUPNAME
해당 없음
Y
N
MashupHeight
기본 셀 높이입니다.
INTEGER
120
N
N
MashupWidth
기본 셀 너비입니다.
INTEGER
400
N
N
UIDField
컬렉션 항목의 고유 식별자를 나타냅니다. 최적의 결과로 정렬되려면 NUMBER 기본 유형이어야 합니다. 항목을 고유하게 식별하는 모든 필드 유형일 수 있습니다. 기존 서비스를 사용 중일 때 필드에 기본 키임 양상이 선택되어 있으면 해당 필드를 UIDField용으로 사용해야 합니다. 기본 키가 정의되지 않은 경우 기존 인포테이블을 GUID 또는 NUMBER 기본 유형이 기본 키로 설정된 필드가 있는 새 인포테이블로 결합하는 서비스를 사용해 보십시오. 이렇게 하려면 GUID 필드를 포함하는 데이터 셰이프를 추가해야 할 수도 있습니다.
INFOTABLE
해당 없음
N
N
SortField
이 속성이 설정되거나 바인딩되면 섹션 콘텐츠의 정렬 기준이 되는 인포테이블 필드를 식별합니다(Data 속성에 지정된 대로). 정렬은 클라이언트 쪽에서 수행되며 데이터 집합에 바인딩된 소스 인포테이블 또는 기타 위젯에는 영향을 주지 않습니다. 이 옵션이 필수 옵션은 아니지만 서비스가 매번 특정 순서로 행을 반환한다는 보장이 없습니다. 이를 UIDField와 동일한 필드로 설정해 보십시오.
INFOTABLE
해당 없음
Y
N
SortAscending
SortField와 함께 사용됩니다. 활성화되면 오름차순으로 정렬되며, 그렇지 않으면 내림차순으로 정렬됩니다.
BOOLEAN
해당 없음
Y
N
SectionField
선택 사항. 항목을 그룹화할 기준이 되는 섹션 식별자를 나타냅니다. 설정되면 항목이 섹션으로 그룹화됩니다. 섹션 하나에 대해서만 지원됩니다. 섹션은 SectionField에서 찾은 공통 값으로 행을 그룹화합니다. 예를 들어, 주의 수 필드를 포함하는 행을 주 섹션으로 그룹화하는 데 사용할 수 있습니다. 그런 다음 머리글과 바닥글을 사용하여 각 주가 시작되고 끝나는 위치를 표시할 수 있습니다.
INFOTABLE
해당 없음
N
N
SectionInsetLeft
섹션을 사용할 경우 섹션 콘텐츠를 왼쪽으로 들여쓰거나 시각적으로 구분하는 방법입니다.
INTEGER
0
N
N
SectionInsetTop
섹션을 사용할 경우 섹션 콘텐츠를 위쪽으로 들여쓰거나 시각적으로 구분하는 방법입니다.
INTEGER
0
N
N
SectionInsetRight
섹션을 사용할 경우 섹션 콘텐츠를 오른쪽으로 들여쓰거나 시각적으로 구분하는 방법입니다.
INTEGER
0
N
N
SectionInsetBottom
섹션을 사용할 경우 섹션 콘텐츠를 아래쪽으로 들여쓰거나 시각적으로 구분하는 방법입니다.
INTEGER
0
N
N
LeftAlignFinalRow
활성화되면 각 섹션의 마지막 행이 가운데가 아닌 왼쪽에 정렬됩니다.
BOOLEAN
해당 없음
N
N
FlowLayoutGravity
셀이 행에서 어떤 식으로 흐르는지 제어합니다.
가장자리, 간격 조정, 가운데 또는 확장 옵션이 있습니다.
가장자리: 셀이 해당 셀이 포함된 가장 가까운 쪽에 정렬됩니다, 이 옵션이 적용되지 않으면 셀 사이에 간격이 균일하게 유지됩니다.
간격 조정: 셀이 셀과 해당 셀이 포함된 위젯 쪽 사이의 간격을 균일하게 유지합니다.
가운데: 셀이 사용 가능한 너비의 가운데에 위치하며 각 행에 맞춰서 해당 개수의 셀이 표시됩니다.
확장: MashupWidth 속성 설정을 넘는 경우에도 셀이 사용 가능한 너비에 맞게 확장됩니다.
STRING
해당 없음
N
N
FlowLayoutAlignment
흐름 레이아웃과 함께 사용해야 합니다. 셀이 행에서 세로로 어떻게 정렬되는지 제어합니다.
이 속성은 셀 높이가 다양할 때 세로 정렬을 제어하는 데 유용합니다. 이는 CellHeightField 속성을 통해 서비스에서 셀 높이를 가져올 때 또는 MashupNameField 속성을 사용하고 UseMashupDimensions 속성을 true로 설정할 때 필요할 수 있습니다.
맨 위: 인접 셀을 행 맨 위에 정렬합니다.
가운데: 인접 셀을 행 가운데에 정렬합니다.
맨 아래: 인접 셀을 행 맨 아래에 정렬합니다.
확장: 가장 높은 셀에 맞도록 인접 셀의 높이를 조정합니다.
STRING
가운데
N
N
FlowLayoutContentGravity
흐름 레이아웃과 함께 사용해야 합니다. 콘텐츠 크기가 컬렉션 보기보다 작을 때 콘텐츠가 컬렉션 보기 내에서 어떻게 세로로 정렬되는지 제어합니다.
사용 가능한 옵션은 맨 위, 가운데 및 맨 아래입니다.
맨 위: 셀이 맨 위부터 시작하여 공백을 채웁니다.
가운데: 셀이 세로 가운데부터 시작하여 공백을 채웁니다.
맨 아래: 셀이 맨 아래부터 시작하여 공백을 채웁니다.
STRING
해당 없음
N
N
RowSpacing
머리글, 행 및 바닥글 사이의 간격을 제어합니다.
INTEGER
44
N
N
MinimumSpacing
셀 사이의 최소 가로 간격을 제어합니다.
TopPadding
위쪽 여백과 첫 번째 항목의 안쪽 여백을 제어합니다.
INTEGER
22
N
N
BottomPadding
아래쪽 여백과 마지막 항목의 안쪽 여백을 제어합니다.
INTEGER
22
N
N
MashupNameField
데이터 항목에 사용할 매쉬업 이름을 제공합니다. 설정되면 이 속성은 MashupSelectedFieldMashup의 선택 사항을 대체합니다.
PinHeadersToTop
활성화되면 해당 콘텐츠를 스크롤할 때 현재 보이는 섹션 머리글이 위젯의 위쪽 가장자리에 계속 표시됩니다.
BOOLEAN
해당 없음
N
N
PinFootersToBottom
활성화되면 해당 콘텐츠를 스크롤할 때 현재 보이는 섹션 바닥글이 위젯의 아래쪽 가장자리에 계속 표시됩니다.
BOOLEAN
해당 없음
N
N
MashupPropertyBinding
인포테이블 필드 이름을 매쉬업 매개 변수와 연관시키는 JSON 문자열입니다. 각 키 이름은 각 포함된 매쉬업에 데이터를 제공하는 데 사용되는 인포테이블 필드여야 합니다. 각 값은 컬렉션 위젯의 포함된 매쉬업에 있는 위젯에 바인딩되는 해당 매쉬업 매개 변수의 이름이어야 합니다.
* 
불필요한 서식 적용을 수행하지 않으려면 텍스트 편집기를 통해 JSON을 복사하여 붙여 넣습니다.
예:
{"events":"eventsName","min_temp":"minTemp","max_temp":"maxTemp","precipitation":"precipitation","image":"image","wind":"wind","sourceType":"sourceType","date":"date","week":"week","id":"rowId"}
STRING
해당 없음
N
N
MashupGlobalPropertyBinding
선택 사항. 바인딩 가능한 사용자 정의 속성을 생성하는 데 사용되는 JSON 문자열입니다. 이 속성은 제품 이름, 글로벌 상황 표시기 등 모든 포함된 매쉬업에서 동일해야 하는 데이터를 동적으로 바인딩하는 데 유용합니다. 각 키 이름은 위젯에 추가할 임의의 올바른 속성 이름으로 지정할 수 있습니다. 각 값은 추가할 때 속성을 지정할 데이터 유형(예: "STRING", "NUMBER", "BOOLEAN")이어야 합니다. MashupGlobalPropertyBinding 속성 밖으로 탭하고 해당 속성의 유효성을 검사하면 즉시 속성이 위젯에 추가됩니다. 속성 창에서 아래로 스크롤하거나 속성 필터에 해당 이름을 입력합니다. 데이터를 위젯의 포함된 매쉬업의 매쉬업 매개 변수로 전달하기 위해 사용자 정의 속성에 바인딩하는 데 사용할 수 있습니다.
STRING
해당 없음
N
N
CellWidthField
서비스에서 셀의 기본 너비를 정의하는 필드입니다. 값은 CellWidth를 대체합니다.
CellHeightField
서비스에서 셀의 기본 높이를 정의하는 필드입니다. 값은 CellHeight를 대체합니다.
CellMashupSelectedField
선택 사항. 지정되면 이 속성은 바인딩된 객체의 선택된 상태를 수신하는 매쉬업 매개 변수를 나타냅니다. 위젯의 각 셀에 대한 선택 상태를 제공하는 데 사용된 인포테이블 필드를 식별하는 방법을 제공합니다.
STRING
해당 없음
N
N
UseMashupDimensions
선택 사항. MashupNameField 속성 및 정적 셀 매쉬업과 함께 사용해야 합니다. 셀 크기를 포함된 매쉬업에 일치시킵니다.
AllowSelection
활성화되면 셀을 선택할 수 있습니다. 그렇지 않으면 이 컬렉션 위젯에서 셀을 선택할 수 없습니다.
BOOLEAN
해당 없음
N
N
MultiSelect
다중 선택을 활성화합니다. 컬렉션 위젯의 다중 선택에는 CTRL + click 또는 SHIFT + click이 필요하지 않습니다. 클릭하여 필요한 만큼 셀을 선택하고 셀을 클릭하여 선택 취소합니다. 마우스로 범위를 선택하는 기능을 지원되지 않습니다.
BOOLEAN
해당 없음
N
N
HasSelectedCells
이 컬렉션 위젯에 선택한 셀이 하나 이상 있을 때마다 true로 설정됩니다.
BOOLEAN
false
Y
N
SelectedCellsCount
컬렉션 보기에서 선택된 셀의 수를 포함합니다.
INTEGER
0
Y
N
ScrollsToSelectedCell
선택 내용이 변경될 경우 컬렉션이 첫 번째 선택된 셀로 스크롤되도록 설정합니다.
BOOLEAN
해당 없음
N
N
AutoSelectFirstCell
데이터가 업데이트되거나 다른 셀이 선택되지 않으면 컬렉션 위젯에서는 사용 가능한 첫 번째 셀을 자동으로 선택합니다.
BOOLEAN
해당 없음
N
N
SelectedItems
서비스에서 현재 선택한 셀을 설정하는 바인딩을 제공합니다. 다중 섹션에서 가장 최근에 선택한 항목이 컬렉션에서 업데이트됩니다.
INFOTABLE
해당 없음
Y
N
SelectedMashupName
선택 사항. 설정되면 CellSelectedStyle을 재정의합니다. 실행 시간에서 셀을 선택할 때 Mashup 또는 MashupFieldName 속성에서 정의된 매쉬업을 대체하는 매쉬업을 정의합니다. 대부분의 경우 SelectedMashup은 기본 매쉬업과 동일한 치수를 포함해야 합니다. 또한 기본 매쉬업의 매쉬업 매개 변수를 일부, 전부 또는 더 많이 포함할 수 있습니다. 이러한 기능은 셀이 선택될 때 데이터의 상세 보기를 제공하거나 제공된 데이터에 대한 추가 선택 또는 필터링 옵션을 표시할 때 사용될 수 있습니다.
MASHUPNAME
해당 없음
N
N
HandleSelectionUpdates
활성화되면 컬렉션이 선택 업데이트를 수신하고 해당 데이터 서비스로 전송합니다. 이는 매쉬업에서 공통 서비스를 공유하는 데이터 위젯이 서로의 선택 항목을 업데이트하는 일반적인 방식을 전환합니다. 예를 들면, 사용자가 그리드 행을 클릭하고 동일한 서비스에 바인딩된 차트 점이 강조 표시되는 경우입니다.
BOOLEAN
해당 없음
N
N
CellStyle
셀의 배경을 제어합니다. 스타일의 배경색 속성만 사용됩니다.
STYLE
해당 없음
N
N
CellSelectedStyle
선택한 셀의 배경색을 제어합니다. 스타일의 배경색 속성만 사용됩니다.
STYLE
해당 없음
N
N
CellHoverStyle
가리킬 때 셀의 배경색을 제어합니다. 스타일의 배경색 속성만 사용됩니다.
STYLE
해당 없음
N
N
CellActiveStyle
선택될 때 셀의 배경색을 제어합니다. 스타일의 배경색 속성만 사용됩니다.
STYLE
해당 없음
N
N
RippleEffectStyle
이는 UseRippleEffect 속성과 함께 사용해야 합니다. 이 스타일의 배경색 속성만 사용됩니다. 이 속성은 잔물결 애니메이션 효과에 적용됩니다.
STYLE
해당 없음
N
N
UseRippleEffect
활성화되면 셀을 클릭할 때 잔물결 애니메이션 효과가 사용됩니다. 이 옵션을 사용하면 셀의 오버플로 속성이 숨김으로 설정됩니다. 잔물결 효과는 셀에서 배경색(투명으로 설정되어야 함)이 있는 매쉬업을 포함하지 않은 부분에만 표시됩니다.
BOOLEAN
해당 없음
N
N
CellBorderRadius
셀에 적용할 선택적 테두리 반지름입니다. 이 값이 비어 있지 않은 문자열(예: 12px)로 설정된 경우 셀의 오버플로 속성이 숨김으로 설정됩니다.
STRING
해당 없음
N
N
CellBoxShadow
비어 있지 않은 문자열로 설정된 경우 셀에 대한 상자 음영으로 사용됩니다. 음영 설정 치수는 CSS 상자 음영 사양 및 구문을 따릅니다.
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
음영이 인접 셀에 중첩되지 않도록 하려면 음영 치수를 간격 속성과 관련해서 고려해야 합니다.
* 
상세 보기, 초기 및 상속 CSS 설정은 권장되지 않습니다.
STRING
해당 없음
N
N
CellPointer
선택 사항. 기본 브라우저 커서 동작에 의존하지 않고 커서로 셀 위를 가리킬 때 마우스 포인터 모양을 명시적으로 설정합니다.
STRING
자동
N
N
CellMenuStates
선택 사항. 셀에서 마우스 오른쪽 버튼을 클릭하여 액세스할 수 있는 메뉴를 제공합니다. 메뉴 선택 항목은 이 속성에서 선택한 상태 정의에 의해 정의됩니다. 이를 사용하여 다른 매쉬업에 대한 탐색을 제공할 수 있습니다.
STATEDEFINITION
DefaultMenuStates
N
N
CellMenuStatesIconSize
이는 CellMenuStates 속성과 함께 사용해야 합니다. 메뉴 아이콘이 이 크기로 설정됩니다. 최대값은 64입니다.
INTEGER
해당 없음
N
N
CellMenuStatesIconGravity
CellMenuStates 속성과 함께 사용해야 합니다. 메뉴 항목에서 아이콘이 텍스트에 고정되는 방식을 제어합니다. 옵션은 왼쪽, 위, 오른쪽 및 아래입니다.
STRING
해당 없음
N
N
CellMenuStatesOrientation
CellMenuStates 속성과 함께 사용해야 합니다. 메뉴 항목이 배치되는 방식을 제어합니다. 옵션은 가로 또는 세로입니다.
STRING
해당 없음
N
N
ShowHeaders
설정되고 섹션을 사용하는 경우 각 섹션에 머리글이 포함됩니다.
BOOLEAN
해당 없음
N
N
HeaderMashupName
머리글에 사용할 매쉬업으로, SectionFieldShowHeaders 속성과 함께 사용해야 합니다. 스크롤 막대를 표시하지 않고 레이아웃에 맞추는 문제를 방지하기 위해 머리글 매쉬업이 반응형이어야 합니다.
MASHUPNAME
해당 없음
N
N
HeaderSectionParam
SectionField 속성에 정의된 컬렉션 위젯 섹션 필드에서 값을 수신하기 위해 머리글 매쉬업에 설정되어야 하는 매쉬업 매개 변수입니다.
STRING
해당 없음
N
N
HeaderHeight
머리글 매쉬업의 높이입니다.
INTEGER
44
N
N
ShowFooters
설정되고 섹션을 사용하는 경우 각 섹션에 바닥글이 포함됩니다.
BOOLEAN
해당 없음
N
N
FooterMashupName
바닥글에 사용할 매쉬업입니다. 이는 SectionFieldShowFooters 속성과 함께 사용해야 합니다. 스크롤 막대를 표시하지 않고 레이아웃에 맞추는 문제를 방지하기 위해 바닥글 매쉬업이 반응형이어야 합니다.
MASHUPNAME
해당 없음
N
N
FooterSectionParam
섹션 식별자를 수신할 매쉬업 매개 변수입니다.
STRING
해당 없음
N
N
FooterHeight
바닥글 매쉬업의 높이입니다. 이는 SectionFieldShowFooters 속성과 함께 사용해야 합니다.
INTEGER
44
N
N
EmptyMashupName
지정되면 데이터 집합이 비어 있을 때 이 매쉬업이 표시됩니다. 컬렉션 위젯을 채우는 데 사용된 서비스와 함께 날짜 필터 위젯을 사용할 때 발생할 수 있습니다. "결과 없음" 메시지를 포함하는 매쉬업을 표시하는 데 사용할 수 있습니다.
MASHUPNAME
해당 없음
N
N
PlaysIntroAnimation
데이터 로드 후 셀의 "슬라이드 인" 변환 애니메이션을 활성화합니다.
BOOLEAN
해당 없음
N
N
Deselect
호출될 때 컬렉션이 데이터 집합에서 모든 행의 선택을 취소합니다.
해당 없음
Y
N
SelectAll
호출될 때 컬렉션이 데이터 집합에서 모든 행을 선택합니다.
해당 없음
Y
N
이벤트
CellMenuStates: CellMenuStates 속성은 컬렉션 위젯에 추가된 StateDefinition의 각 상태에 대한 이벤트를 추가합니다. 각 이벤트의 이름은 각 상태의 이름에 해당합니다.
CellWasClicked: 셀을 클릭하거나 누를 때마다 트리거됩니다.
CellWasRightClicked: 오른쪽 클릭 버튼을 클릭할 때마다 트리거됩니다.
CellWasDoubleClicked: 셀을 두 번 클릭하거나 두 번 누를 때마다 트리거됩니다.
CellWasLongClicked: 셀을 길게 클릭하거나 길게 누를 때마다 트리거됩니다.
MashupPropertyBinding: MashupPropertyBinding 속성의 각 항목에 있는 키는 컬렉션 위젯에서 소스 바인딩 속성을 생성합니다. 이러한 속성을 사용하면 셀을 클릭할 때 컬렉션 위젯의 셀 수준 데이터를 매쉬업의 다른 위젯으로 바인딩할 수 있습니다.