컬렉션 위젯 구성
컬렉션의 레이아웃 선택
Layout 속성을 사용하여 위젯 레이아웃을 구성할 수 있습니다.
가변 - Flexbox 레이아웃 규칙을 기반으로 하는 반응형 레이아웃입니다. 이 모드는 각 행의 사용 가능한 공간에 들어갈 수 있는 만큼의 셀을 배치합니다. 사용 가능한 공간이 제한되면 셀이 자동으로 새 행으로 줄 바꿈됩니다. 각 셀은 행의 사용 가능한 공간을 채우도록 확장되거나 셀 콘텐츠를 표시하는 데 필요한 최소 공간에 도달할 때까지 축소됩니다. 이 제한에 도달하면 셀이 새 줄로 줄 바꿈됩니다. 마지막 행에서 셀의 가로 맞춤을 제어하려면 AlignLastRow 속성을 사용합니다.
그리드 - 행과 열로 구성된 셀이 있는 그리드로 컬렉션을 표시하는 반응형 레이아웃입니다. 이 모드는 사용 가능한 공간과 셀 너비를 기반으로 컬렉션의 각 행에 있는 동일한 수의 셀을 맞춥니다. 행의 사용 가능한 너비로 행을 표시할 수 없는 경우 마지막 셀이 새 줄로 줄 바꿈되고 레이아웃의 열 수가 1씩 줄어듭니다. 열 너비는 열의 가장 넓은 셀에 맞게 설정되고 행 높이는 행의 가장 높은 셀에 맞게 설정됩니다.
테이블 - 컬렉션 셀을 단일 열로 표시합니다.
VerticalAlignment 및 HorizontalAlignment 속성을 사용하여 행 또는 열 내에서 셀이 정렬되는 방법을 제어할 수 있습니다. 기본적으로 행 내의 가로 맞춤은 셀 사이에 동일한 간격을 가진 셀을 배분하도록 설정됩니다. ColumnGap 및 RowGap 속성을 사용하여 셀 사이 간격을 제어할 수 있습니다. 그리드 레이아웃에서 컬렉션의 마지막 행 맞춤을 제어하려면 LeftAlignLastRow를 사용합니다. 컬렉션의 모든 행을 동일한 높이로 만들려면 UniformHeight 속성을 true로 설정합니다. 컬렉션의 가장 높은 행과 일치하도록 행 높이가 증가합니다.
 |
컬렉션 위젯을 중첩하여 다양한 레이아웃을 결합할 수 있습니다. 예를 들어, 레이아웃이 테이블로 설정된 최상위 컬렉션과 레이아웃이 가변으로 설정된 포함 컬렉션을 생성할 수 있습니다.
|
컬렉션 행을 섹션으로 그룹화
컬렉션 행을 컬렉션 내에서 그룹이나 카테고리를 시각적으로 구분하는 제목 및 레이블이 포함된 머리글 또는 바닥글이 있는 섹션으로 그룹화할 수 있습니다. 이를 통해 컬렉션의 일부를 구성하고 레이블을 지정할 수 있으므로 사용자가 데이터를 더 쉽게 탐색하고 읽을 수 있습니다. 컬렉션 위젯에서 셀을 그룹화하려면 컬렉션 인포테이블의 관련 셀에 대한 카테고리 식별자가 있는 열을 지정해야 합니다. 컬렉션 행을 그룹화하려면 다음 단계를 수행하십시오.
1. 컬렉션 데이터 소스에서 카테고리 식별자가 포함된 열을 추가합니다. 이 열에는 컬렉션 내에서 작성하려는 카테고리 또는 그룹을 나타내는 값이 포함되어야 합니다.
2. 섹션 머리글 및 바닥글에 대한 템플릿으로 사용할 두 개의 매쉬업을 만듭니다. 이러한 매쉬업에는 머리글 및 바닥글 내에 원하는 레이블, 이미지 또는 기타 UI 요소가 포함될 수 있습니다.
3. 속성 패널에서 컬렉션 위젯 속성을 구성합니다.
◦ SectionField 속성 옆에서 카테고리 데이터가 포함된 열의 이름을 선택합니다.
◦ SectionHeaders 및 SectionFooters 속성을 표시 또는 고정됨으로 설정합니다. "고정됨"이 설정되면 머리글과 바닥글은 섹션을 스크롤할 때 뷰포트의 맨 위 및 맨 아래에 고정됩니다.
◦ HeaderMashup 및 FooterMashup 속성 옆에 있는 2단계에서 만든 매쉬업을 선택합니다.
◦ 컬렉션을 정렬하려면 SortField 속성을 사용할 수 있습니다.
◦ 머리글 및 바닥글 높이를 설정하려면 HeaderHeight 및 FooterHeight 속성에 숫자 값을 지정합니다.
◦ 필요에 따라 동적 콘텐츠를 머리글이나 바닥글에 전달하려면 HeaderSectionParam 및 FooterSectionParam 속성을 사용하여 데이터 소스의 열 이름을 매쉬업 매개 변수에 바인딩합니다.
4. 매쉬업을 저장합니다.
런타임 시 셀은 SectionField 속성에 대해 선택한 인포테이블 열을 기준으로 그룹화됩니다.
컬렉션 셀의 사이 간격과 주위 간격 구성
컬렉션 셀의 사이 간격을 구성하려면 ColumnGap 및 RowGap 속성을 사용합니다.
셀 컬렉션과 위젯 테두리의 사이 간격을 구성하려면 PaddingRight, PaddingLeft, PaddingTop, PaddingBottom 속성을 사용합니다.
컬렉션 셀에 메뉴 버튼 추가
위젯 CellMenu 속성에 상태 정의를 추가하여 컬렉션의 각 셀 아래에 메뉴 버튼을 표시할 수 있습니다. 메뉴 버튼을 사용하면 사용자는 컬렉션의 각 항목과 관련된 여러 작업을 수행할 수 있습니다. 예를 들어, 사용자가 셀에 대한 추가 세부 정보를 편집, 삭제 또는 확인할 수 있는 메뉴 항목을 정의할 수 있습니다. 컬렉션에 메뉴 버튼을 추가하려면 다음 단계를 수행하십시오.
1. Composer에서 컬렉션 셀에 대해 표시할 각 메뉴 항목을 정의하는 상태 정의를 만듭니다.
|
|
스타일 정의를 사용하여 각 메뉴 항목에 글꼴이나 배경색 및 스타일을 적용하는 것은 지원되지 않습니다. 아이콘만 지원됩니다.
|
2. Mashup Builder의 캔버스에서 또는 탐색기 패널을 사용하여 컬렉션 위젯을 선택합니다.
3. 속성 패널에서 CellMenu 속성에 대해 작성한 상태 정의를 지정합니다.
CellMenu:<MenuItem> 형식을 사용하여 상태 정의에서 정의한 각 메뉴 항목에 대해 이벤트가 추가됩니다.
4. 각 메뉴 항목에 대한 이벤트를 서비스, 함수 또는 위젯에 바인딩하여 메뉴 항목을 클릭할 때 작업을 트리거합니다.
5. 저장을 클릭한 다음 매쉬업을 봅니다.
런타임 시 각 셀 아래에 메뉴 버튼이 추가되고 선택한 상태 정의 엔티티에 따라 메뉴 항목이 표시됩니다.
컬렉션 셀에 대해 끌어서 놓기 활성화
컬렉션 끌어서 놓기 기능을 사용하면 사용자는 런타임에 셀의 시각적 순서를 변경할 수 있으며, 필요에 따라 컬렉션 보기를 사용자 정의할 수 있습니다. 사용자는 그룹화되지 않은 동일한 컬렉션 내에서 단일 셀을 새 위치로 끌 수 있습니다. 컬렉션 간 셀 이동은 두 컬렉션 모두 동일한 데이터 셰이프를 사용하고, 끌기가 활성화되어 있으며, DragCellsBetweenWidgets 속성이 true로 설정된 경우 지원됩니다.
• 그룹화되지 않은 컬렉션의 셀 순서를 다시 지정합니다.
• DragCellsBetweenWidgets 속성이 활성화된 경우 동일한 데이터 셰이프를 공유하는 두 컬렉션 간에 셀을 이동합니다.
|
|
그룹화가 활성화된 경우 끌어서 놓기가 지원되지 않습니다. 또한 컬렉션 위젯 외부로 셀을 이동하는 기능은 지원되지 않습니다. 한 번에 하나의 셀만 끌 수 있습니다.
|
컬렉션에 대해 끌어서 놓기를 활성화하려면 다음을 수행하십시오.
1. Mashup Builder의 캔버스에서 또는 탐색기 패널을 사용하여 컬렉션 위젯을 선택합니다.
2. 속성 패널에서 DragEnabled 속성을 true로 설정합니다.
3. 여러 컬렉션 간에 셀을 끌 수 있도록 활성화하려면 위젯 간 끌기를 지원하는 각 컬렉션에 대해 DragCellsBetweenWidgets 속성을 true로 설정합니다.
4. 순서 다시 지정 논리를 처리하고 데이터 소스를 업데이트하는 서비스에 DragActionsData 속성을 바인딩합니다.
5. 저장을 클릭한 다음 매쉬업을 봅니다.
사용자가 컬렉션 위젯에서 셀을 끌어서 놓으면 위젯에서 DragActionsData JSON 속성에 변경 사항을 저장합니다. 이 JSON 객체에는 이동된 셀의 sourceIdx와 targetIdx가 포함되어 있으며, 이는 원래 위치와 새로운 0 기반 위치를 나타냅니다.
{"sourceIdx": 9, "targetIdx": 7}
이 속성은 데이터 소스를 업데이트하는 데 필요한 정보를 저장합니다. 위젯은 새 순서를 자동으로 저장하지 않으므로, 컬렉션의 인포테이블 데이터에 변경 사항을 지속하려면 서비스에서 이 데이터를 사용해야 합니다.
위젯이 UID 대신 색인을 제공하는 이유
컬렉션 위젯은 구조에 관계없이 모든 데이터 셰이프와 함께 작동합니다. ThingWorx에서는 데이터 셰이프에 고유 식별자 필드를 포함할 필요가 없습니다. 즉, 컬렉션에 모든 데이터가 동일한 행이 표시될 수 있습니다. 예를 들어 작업 목록에는 작업 이름, 우선 순위 및 상태가 동일한 행이 여러 개 있을 수 있습니다.
행에 동일한 데이터가 포함된 경우 사용자가 이동한 특정 행을 식별하는 유일한 수단은 색인 위치입니다. 색인은 끌기 작업이 수행되는 시점에 해당 행에 대한 고유한 참조 역할을 합니다.
색인을 사용하면 위젯이 모든 데이터 구조에서 안정적으로 작동할 수 있습니다. 이 위젯은 고유 식별자 필드의 존재를 요구하거나 가정하지 않으며, 이를 통해 해당 필드가 없는 데이터로 작업할 때 오류를 방지합니다. 시간 경과에 따라 또는 서로 다른 작업 간에 행을 추적하기 위해 영구 식별자가 필요한 경우 GUID 또는 ID 번호와 같은 고유 식별자 필드를 데이터 셰이프에 추가하고, 서비스에서 해당 필드를 사용합니다.
DragActionsData를 사용하여 데이터 소스 업데이트
사용자가 컬렉션 위젯에서 셀의 순서를 다시 지정할 경우 이러한 변경 내용을 응용 프로그램에 저장해야 할 수 있습니다. 예를 들어 셀이 우선 순위 목록의 작업을 나타내는 경우 셀의 순서를 다시 지정하면 데이터베이스의 작업 시퀀스도 업데이트되어야 합니다.
DragActionsData 속성은 sourceIdx 및 targetIdx 값을 제공하며, 이는 셀이 이동을 시작한 위치와 이동한 대상 위치를 식별합니다. 이러한 색인 값을 사용하여 컬렉션 인포테이블에서 행을 조회한 다음 데이터 소스를 업데이트하는 데 필요한 데이터를 가져옵니다.
순서가 다시 지정된 셀 저장하기:
1. DragActionsData 속성을 서비스 입력 매개 변수에 바인딩합니다.
2. sourceIdx 또는 targetIdx 값을 사용하여 인포테이블의 행에 액세스합니다. 인포테이블은 0부터 시작하는 배열이므로 색인 값을 사용하여 행 정보를 가져올 수 있습니다.
3. 이동 중인 항목을 식별하는 데 필요한 필드(예: ID, 이름 또는 기타 식별자)를 행에서 가져옵니다.
4. 데이터 소스를 새 순서로 업데이트합니다. 데이터베이스 테이블의 레코드 순서를 다시 지정하거나, 시퀀스 번호를 업데이트하거나, 관련 데이터를 변경해야 할 수도 있습니다.
5. 컬렉션 데이터를 새로 고쳐 업데이트된 변경 내용을 표시합니다.
 |
DragActionsData의 색인 값은 끌기 작업이 수행되는 순간의 셀 위치를 보여줍니다. 데이터 셰이프에 고유 식별자 필드가 없고 동일한 데이터를 가진 중복 행이 있는 경우 이동된 행을 식별하는 유일한 수단은 색인입니다. 여러 작업이나 세션에 걸쳐 개별 행을 추적해야 하는 경우 데이터 셰이프에 고유 식별자 필드 추가를 고려하십시오.
|