미디어 갤러리 위젯(테마 적용 가능)
미디어 갤러리 위젯(테마 적용 가능)을 사용하면 이미지와 같은 미디어 항목의 컬렉션을 갤러리 형식으로 표시할 수 있습니다. 이 위젯은 루프, 전체 화면 모드 및 동적 데이터 바인딩을 지원하므로 여러 이미지를 표시하는 데 사용되는 매쉬업을 만드는 데 유용합니다.
 |
미디어 갤러리는 위젯과 웹 구성 요소로 제공되며, ThingWorx Web Component SDK에서 가져와 사용자 정의할 수 있습니다.
|
구조
미디어 갤러리 위젯에는 다음 컴포넌트가 포함됩니다.
1. 위젯 레이블
2. 갤러리 패널 - 미디어 항목을 표시하는 기본 영역입니다.
3. 탐색 화살표 - 사용자가 미디어 항목을 수동으로 탐색할 수 있는 컨트롤입니다.
4. 축소판 스트립 - 갤러리에서 미디어 항목을 미리 보기 위해 추가할 수 있는 선택적 축소판 행입니다.
5. 갤러리 카운터 - 현재 미디어 항목의 시퀀스 번호와 갤러리의 총 항목 수를 표시합니다.
6. 전체 화면 버튼 - 위젯을 확장하여 전체 화면 모드로 이미지를 볼 수 있는 컨트롤입니다.
7. 미디어 제목
8. 미디어 설명
데이터 형식
미디어 갤러리를 표시하려면 다음 필드를 사용하여 인포테이블 데이터를 반환하는 서비스를 만들어야 합니다.
|
필드 이름
|
기본 유형
|
설명
|
|---|---|---|
|
description
|
STRING
|
선택 사항. 미디어 항목에 대한 설명입니다.
|
|
title
|
STRING
|
선택 사항. 미디어 항목의 제목입니다.
|
|
url
|
STRING
|
필수 사항. 미디어 항목에 대한 URL입니다.
|
위젯 Data 속성 옆에 있는 추가 버튼을 사용하여 미디어 갤러리에 대한 값을 수동으로 입력할 수도 있습니다.
위젯 추가 및 구성
미디어 갤러리 위젯을 추가하고 구성하려면 다음 단계를 수행하십시오.
1. 위젯 패널에서 위젯을 캔버스의 컨테이너로 끌어 놓습니다.
2. 레이아웃에 맞게 필요에 따라 위젯의 크기를 조정하고 위치를 지정합니다.
3. 표시할 미디어 항목이 포함된 인포테이블 데이터 소스에 Data 속성을 바인딩합니다.
4. 속성 패널에서 추가 속성을 구성합니다.
5. 매쉬업을 저장하고 미리 보기를 통해 위젯의 기능을 확인합니다.
미리 보기 축소판 표시
ShowThumbnails 속성을 True로 설정하면 현재 미디어 아래에 미리 보기 축소판의 스트립이 표시됩니다. 이러한 축소판을 사용하면 사용자가 특정 미디어 항목으로 빠르게 이동할 수 있습니다. 데이터 소스에 적절한 미리 보기 이미지가 포함되어 있는지 확인합니다.
전체 화면 모드 구성
미디어 갤러리 위젯은 전체 화면 모드를 지원하므로 갤러리 항목을 전체 화면 보기로 볼 수 있습니다. 런타임에 전체 화면 버튼을 클릭하여 이 모드를 시작할 수 있습니다. 전체 화면 보기를 닫으려면 종료 버튼을 클릭하여 ESCAPE 버튼을 누릅니다. 또한 이 모드에 대해 다음 속성을 구성할 수 있습니다.
• 미디어 항목 레이블을 표시하려면 ShowLabelInFullScreen 속성을 True로 설정합니다.
• 이 모드에서 갤러리 축소판을 표시하려면 ShowThumbnailsInFullScreen 속성을 True로 설정합니다.
갤러리 반복
미디어 항목의 연속 반복을 활성화하려면 LoopGallery 속성을 True로 설정합니다. 이렇게 하면 갤러리가 자동으로 모든 항목을 순환하고 처음으로 돌아갈 수 있습니다.
미디어 항목에 제목 및 설명 추가
인포테이블 데이터에 제목과 설명을 추가하면 갤러리의 각 미디어 항목에 대한 컨텍스트가 제공되고 액세스 가능성이 개선됩니다. 다음 예에서는 제목과 설명이 모두 있는 선택한 미디어 항목을 보여줍니다. Item 2는 미디어 제목이고 설명이 그 옆에 표시됩니다.
HideMediaTitle 및 HideMediaDescription 속성을 사용하여 미디어 갤러리 항목의 제목 또는 설명을 숨길 수 있습니다.
위젯 속성
다음 표에는 위젯 속성이 나열되어 있습니다.
|
속성 이름
|
설명
|
기본 유형
|
기본값
|
바인딩 가능 여부
|
로컬리제이션 가능 여부
|
|---|---|---|---|---|---|
|
Label
|
위젯 레이블의 텍스트를 지정합니다.
|
STRING
|
해당 없음
|
Y
|
Y
|
|
LabelType
|
위젯에 표시할 레이블 유형을 설정합니다.
|
STRING
|
머리글
|
N
|
N
|
|
LabelAlignment
|
레이블 텍스트를 위젯의 왼쪽, 오른쪽 또는 가운데에 정렬합니다. 옵션: 왼쪽/가운데/오른쪽
|
STRING
|
Left
|
N
|
N
|
|
ShowThumbnails
|
캐러셀 보기에 있을 때 미디어 항목에 대한 축소판을 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowThumbnailsInFullScreen
|
미디어 항목의 축소판을 전체 화면 모드로 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
LoopGallery
|
연속 재생을 위해 미디어 항목을 반복합니다. 이 속성을 활성화한 경우 마지막 항목의 다음 버튼을 클릭하면 첫 번째 항목으로 돌아갑니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
Data
|
위젯에 대한 인포테이블 데이터 소스입니다.
|
INFOTABLE
|
해당 없음
|
Y
|
N
|
|
ShowLabelInFullScreen
|
미디어 레이블을 전체 화면 모드로 표시합니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
HideMediaDescription
|
미디어 제목을 숨깁니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
HideMediaTitle
|
미디어 설명을 숨깁니다.
|
BOOLEAN
|
False
|
Y
|
N
|
|
MediaDescriptionLableType
|
항목 설명에 표시할 레이블 유형을 설정합니다.
|
STRING
|
본문
|
N
|
N
|
|
MediaTitleLableType
|
항목 제목에 표시할 레이블 유형을 설정합니다.
|
STRING
|
큰 제목
|