컬렉션 위젯(테마 적용 가능)
컬렉션 위젯은 반복된 매쉬업 계열을 컬렉션 내에서 셀로 표시할 수 있는 반응형 위젯입니다. 사용자가 다양한 화면 크기에 컬렉션을 더 쉽게 표시할 수 있도록 고급 레이아웃 및 그룹 셀을 구성할 수 있습니다. 컬렉션 셀 내에 데이터를 표시하려면 매쉬업 셀에 대한 데이터가 포함된 인포테이블을 정의해야 합니다. 큰 데이터 집합을 로드할 때 성능을 최적화하도록 데이터 로드 동작을 구성할 수도 있습니다.
 |
이 위젯을 웹 구성 요소 SDK 라이브러리에서 웹 구성 요소로 사용할 수도 있습니다.
|
모범 사례
각 컬렉션 매쉬업 셀 내에서 서비스를 실행하지 않습니다. 컬렉션의 각 셀에 대해 여러 서비스를 반복적으로 실행하려면 많은 수의 네트워크 요청이 필요합니다. 컬렉션 매쉬업 내의 모든 서비스는 상위 매쉬업이 초기화될 때 반복적으로 실행되므로 각 셀이 로드될 때 중요한 성능 문제가 발생할 수 있습니다. 성능 문제를 방지하려면 상위 매쉬업에서 데이터 서비스를 실행한 다음 매쉬업 매개 변수 및 MashupPropertyBinding 속성을 사용하여 데이터를 포함된 매쉬업에 전달합니다. 매개 변수 작업에 대한 자세한 내용은 매쉬업 매개 변수 구성을 참조하십시오.
속성
|
속성 이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부
|
로컬리제이션 가능 여부(Y/N)
|
|---|---|---|---|---|---|
|
Data
|
컬렉션 위젯에 대한 인포테이블 데이터 소스입니다.
|
INFOTABLE
|
Y
|
N
|
|
|
ItemLoadBehavior
|
컬렉션 데이터의 로드 동작을 제어합니다. 사용자가 스크롤하는 동안 데이터를 로드 및 언로드할 수 있고, 요청 시 점진적으로 데이터를 로드하거나 처음에 전체 데이터 집합을 로드할 수 있습니다.
|
STRING
|
로드/언로드
|
N
|
N
|
|
Layout
|
컬렉션 셀에 사용할 레이아웃의 유형을 지정합니다. 옵션: 가변, 그리드, 테이블
|
STRING
|
가변
|
Y
|
N
|
|
Mashup
|
컬렉션 데이터를 표시하는 데 사용할 매쉬업입니다.
|
MASHUPNAME
|
Y
|
N
|
|
|
Width
|
위젯 너비를 설정합니다.
|
NUMBER
|
400
|
N
|
N
|
|
Height
|
위젯 높이를 설정합니다.
|
NUMBER
|
300
|
N
|
N
|
|
MashupHeight
|
컬렉션 매쉬업의 높이를 설정합니다.
|
NUMBER
|
Y
|
N
|
|
|
MashupWidth
|
컬렉션 매쉬업의 너비를 설정합니다.
|
NUMBER
|
Y
|
N
|
|
|
MashupWidthField
|
서비스를 사용하여 셀 너비를 정의할 인포테이블 필드를 지정합니다. 값은 MashupHeight를 재정의합니다.
|
인포테이블 열
|
N
|
N
|
|
|
MashupHeightField
|
서비스를 사용하여 셀 높이를 정의할 인포테이블 필드를 지정합니다. 값은 MashupHeight를 재정의합니다.
|
인포테이블 열
|
N
|
N
|
|
|
UIDField
|
필수 사항입니다. 각 셀에 대해 고유 식별자를 포함한 인포테이블 필드를 지정합니다.
|
인포테이블 열
|
N
|
N
|
|
|
LastRowAlignment
|
컬렉션의 마지막 행 내 셀의 맞춤을 제어합니다. 옵션: 기본값, 간격 똑같이, 사이 간격, 왼쪽, 가운데, 오른쪽, 늘이기
|
STRING
|
기본값
|
N
|
N
|
|
HorizontalAlignment
|
컬렉션 행 내 셀의 가로 맞춤을 제어합니다. 옵션: 간격 똑같이, 사이 간격, 왼쪽, 가운데, 오른쪽, 늘이기
|
STRING
|
간격 똑같이
|
N
|
N
|
|
VerticalAlignment
|
컬렉션 행 내 셀의 세로 맞춤을 제어합니다. 옵션: 맨 위, 가운데, 늘이기, 맨 아래
|
STRING
|
가운데
|
N
|
N
|
|
UniformRowHeight
|
동일한 높이로 행을 표시합니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
RowGap
|
컬렉션 행 사이의 간격을 설정합니다.
|
NUMBER
|
40
|
N
|
N
|
|
ColumnGap
|
컬렉션 열 사이의 간격을 설정합니다.
|
NUMBER
|
40
|
N
|
N
|
|
SectionGap
|
컬렉션 섹션 사이의 간격을 설정합니다.
|
NUMBER
|
48
|
N
|
N
|
|
TopPadding
|
컬렉션의 위쪽 여백과 첫 셀 사이의 안쪽 여백을 설정합니다.
|
NUMBER
|
24
|
N
|
N
|
|
BottomPadding
|
컬렉션의 아래쪽 여백과 마지막 셀 사이의 안쪽 여백을 설정합니다.
|
NUMBER
|
24
|
N
|
N
|
|
RightPadding
|
위젯의 오른쪽 테두리와 셀 컬렉션 사이의 안쪽 여백을 설정합니다.
|
NUMBER
|
24
|
N
|
N
|
|
LeftPadding
|
위젯의 왼쪽 테두리와 셀 컬렉션 사이의 안쪽 여백을 설정합니다.
|
NUMBER
|
0
|
N
|
N
|
|
MashupBackground
|
컬렉션 매쉬업 및 모든 컨테이너의 배경을 제어합니다. 매쉬업 배경이 투명하면 셀 배경에 적용되는 스타일이 표시됩니다. 옵션: 투명, 표시
|
STRING
|
표시
|
N
|
N
|
|
MashupNameField
|
데이터 서비스를 사용하여 매쉬업 이름을 제공하는 인포테이블 필드를 지정할 수 있습니다. 이 속성은 매쉬업 속성을 재정의합니다.
|
인포테이블 열
|
N
|
N
|
|
|
MashupPropertyBinding
|
인포테이블 필드를 키로 갖고 있으며 매쉬업 매개 변수를 값으로 갖고 있는 직렬화된 JSON 객체입니다. 예를 들어, {\"min_temp\":\"minTemp\"}입니다.
|
JSON
|
N
|
N
|
|
|
MashupGlobalPropertyBinding
|
글로벌 매개 변수 이름을 키로 갖고 있으며 데이터 유형을 값으로 갖고 있는 직렬화된 JSON 객체입니다. 컬렉션 위젯에 바인딩되어 있을 수 있는 속성이며 각 셀 매쉬업으로 보내집니다. {\"minTemp\":\"STRING\"}
|
JSON
|
N
|
N
|
|
|
SelectedCellMashupField
|
컬렉션에서 각 셀의 선택된 상태를 설정하는 인포테이블 필드를 지정할 수 있습니다.
|
인포테이블 열
|
N
|
N
|
|
|
UseMashupDimensions
|
셀 크기를 매쉬업 치수와 일치시킵니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
SelectionMode
|
런타임에 사용자가 선택할 수 있는 셀의 수를 제어할 수 있습니다. 옵션: 없음, 단일, 여러
|
STRING
|
없음
|
N
|
N
|
|
HasSelectedCells
|
위젯이 셀을 선택하면 True를 반환합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
SelectedCellsCount
|
컬렉션에서 선택된 셀의 수를 반환합니다.
|
NUMBER
|
0
|
N
|
N
|
|
ScrollToSelectedCell
|
행을 선택하면 해당 셀로 자동으로 스크롤됩니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
AutoSelectFirstRow
|
컬렉션에 데이터가 로드될 때 첫 번째 행을 자동으로 선택할 수 있습니다.
|
BOOLEAN
|
False
|
N
|
N
|
|
SelectedCells
|
인포테이블을 사용하여 선택할 컬렉션 셀을 지정합니다.
|
INFOTABLE
|
Y
|
N
|
|
|
SelectedCellMashup
|
컬렉션에서 선택된 셀에 표시할 대체 매쉬업을 지정합니다. 이 매쉬업에는 기본 매쉬업과 동일한 속성이 포함되어야 합니다.
|
매쉬업 선택기
|
Y
|
N
|
|
|
HandleSelectionUpdates
|
활성화하면 위젯이 데이터 서비스에 선택 사항 업데이트를 전송 및 수신합니다.
|
BOOLEAN
|
True
|
N
|
N
|
|
CellMenu
|
터치 장치에서 셀 위에서 밀 때 나타나는 셀 메뉴를 정의하는 데 사용되는 상태 정의를 지정합니다. 터치 인터페이스가 없는 장치에서는 셀을 마우스 오른쪽 버튼으로 클릭하면 이 메뉴가 표시됩니다.
|
STATEDEFINITION
|
N
|
N
|
|
|
CellMenuIconSize
|
셀 메뉴 내의 아이콘 크기를 지정합니다.
|
NUMBER
|
20
|
N
|
N
|
|
CellTabKeyScope
|
키보드를 사용하여 셀의 콘텐츠와 상호 작용할 때 탐색 범위를 제어합니다. 옵션: 셀, 컬렉션 범위가 셀로 설정된 경우 TAB 키를 누르면 셀 내의 요소 위에 반복됩니다. 범위가 컬렉션으로 설정된 경우 TAB 키를 누르면 마지막 요소가 선택된 후 포커스가 셀로 돌아갑니다.
|
STRING
|
셀
|
N
|
N
|
|
SectionField
|
섹션 내의 셀을 그룹화하는 데 사용할 수 있는 식별자 값을 포함한 인포테이블 필드를 지정합니다.
|
INFOTABLE
|
N
|
N
|
|
|
SectionInsetLeft
|
셀을 그룹화할 때 섹션의 왼쪽 상세 보기 값을 설정합니다.
|
NUMBER
|
0
|
N
|
N
|
|
SectionInsetTop
|
셀을 그룹화할 때 섹션의 위쪽 상세 보기 값을 설정합니다.
|
NUMBER
|
0
|
N
|
N
|
|
SectionInsetRight
|
셀을 그룹화할 때 섹션의 오른쪽 상세 보기 값을 설정합니다.
|
NUMBER
|
0
|
N
|
N
|
|
SectionInsetBottom
|
셀을 그룹화할 때 섹션의 아래쪽 상세 보기 값을 설정합니다.
|
NUMBER
|
0
|
N
|
N
|
|
SortField
|
섹션 콘텐츠의 정렬 기준이 되는 인포테이블 필드를 지정합니다. 정렬은 클라이언트 쪽에서 수행되며 데이터 집합에 바인딩된 소스 인포테이블 또는 기타 위젯에는 영향을 주지 않습니다.
|
INFOTABLE
|
Y
|
N
|
|
|
SortAscending
|
SortField 속성이 활성화되면 섹션 콘텐츠를 오름차순으로 정렬합니다. 기본값으로 섹션은 내림차순으로 정렬됩니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
SectionHeaders
|
컬렉션의 셀을 그룹화할 때 섹션 머리글의 표시 유형을 제어합니다. 옵션: 없음, 표시, 고정됨
|
STRING
|
없음
|
N
|
N
|
|
HeaderMashup
|
컬렉션의 셀을 그룹화할 때 섹션 머리글에 사용할 매쉬업을 지정합니다.
|
MASHUPNAME
|
없음
|
N
|
N
|
|
HeaderSectionParam
|
섹션 식별자를 수신할 머리글 매쉬업 매개 변수의 이름입니다.
|
STRING
|
N
|
N
|
|
|
HeaderHeight
|
컬렉션의 섹션 머리글의 높이를 설정합니다.
|
NUMBER
|
40
|
N
|
N
|
|
SectionFooters
|
컬렉션의 셀을 그룹화할 때 섹션 바닥글의 표시 유형을 제어합니다. 옵션: 없음, 표시, 고정됨
|
STRING
|
없음
|
N
|
N
|
|
FooterMashup
|
컬렉션의 셀을 그룹화할 때 섹션 바닥글에 사용할 매쉬업을 지정합니다.
|
MASHUPNAME
|
N
|
N
|
|
|
FooterSectionParam
|
섹션 식별자를 수신할 바닥글 매쉬업 매개 변수의 이름입니다.
|
STRING
|
N
|
N
|
|
|
FooterHeight
|
컬렉션의 셀을 그룹화할 때 섹션 바닥글의 높이를 설정합니다.
|
NUMBER
|
40
|
N
|
N
|
|
EmptyMashup
|
컬렉션의 셀에 데이터가 포함되어 있지 않을 때 표시할 매쉬업을 지정합니다.
|
MASHUPNAME
|
없음
|
N
|
N
|
|
Deselect
|
컬렉션에서 모든 선택 사항을 지우는 바인딩 가능한 서비스입니다.
|
서비스
|
Y
|
N
|
|
|
SelectAll
|
컬렉션에서 모든 셀을 선택하는 바인딩 가능한 서비스입니다.
|
서비스
|
Y
|
N
|
|
|
DisableWrapping
|
활성화하면 셀을 행 하나에 가로 스크롤 막대와 함께 표시합니다. 비활성화하면 사용 가능한 가로 공간이 전체 컬렉션을 표시하기에 충분하지 않을 경우 셀이 새 행으로 줄이 바뀝니다. 이 속성은 컬렉션이 가변 레이아웃 모드를 사용하여 구성된 경우에만 지원됩니다.
|
BOOLEAN
|
False
|
N
|
N
|
이벤트
|
속성 이름
|
설명
|
기본 유형
|
바인딩 가능 여부
|
로컬리제이션 가능 여부(Y/N)
|
|---|---|---|---|---|
|
CellClicked
|
사용자가 컬렉션의 셀을 클릭하거나 탭할 때 트리거되는 이벤트입니다.
|
이벤트
|
Y
|
N
|
|
CellDoubleClicked
|
사용자가 컬렉션의 셀을 두 번 클릭하거나 두 번 탭할 때 트리거되는 이벤트입니다.
|
이벤트
|
Y
|
N
|
|
CellLongClicked
|
사용자가 400밀리초 이상 컬렉션의 셀을 클릭한 상태를 유지하거나 탭한 상태를 유지할 때 트리거되는 이벤트입니다.
|
이벤트
|
Y
|
N
|
|
CellRightClicked
|
사용자가 컬렉션의 셀을 마우스 오른쪽 버튼으로 클릭할 때 트리거되는 이벤트입니다.
|
이벤트
|
Y
|
N
|