컬렉션 매쉬업 레이아웃 만들기 및 데이터 바인딩
컬렉션 위젯을 사용하려면 두 개의 매쉬업을 만들어야 합니다.
• 컬렉션 위젯이 포함된 컬렉션 매쉬업입니다. 이 매쉬업은 서비스에서 컬렉션 데이터도 검색합니다.
• 컬렉션의 각 셀에 대해 반복되는 셀 매쉬업입니다. 차트, 다이얼 또는 텍스트 필드와 같은 각 셀 내의 레이아웃과 위젯을 정의합니다. 이 매쉬업은 동적이며 컬렉션의 데이터를 전달하는 매쉬업 매개 변수를 포함합니다. 해당 콘텐츠는 컬렉션에서 제공된 데이터에 따라 변경됩니다.
다음 단원에서는 이러한 두 매쉬업을 만드는 방법과 컬렉션 데이터를 바인딩하는 방법에 대해 설명합니다.
컬렉션 셀에 대한 매쉬업 만들기
1. Composer에서 새로 만들기를 클릭한 다음 매쉬업 또는 마스터를 선택합니다. 새 매쉬업 창이 열립니다.
2. 반응형을 선택한 다음 확인을 클릭합니다.
3. 매쉬업의 이름을 입력한 다음 저장을 클릭합니다.
4. 설계 탭을 클릭하여 Mashup Builder 인터페이스를 엽니다. 컨테이너 하나가 있는 빈 매쉬업이 캔버스에 표시됩니다.
5. 매쉬업에 표시하려는 위젯, 서비스 및 함수를 추가합니다.
6. 컬렉션 위젯의 데이터를 매쉬업으로 전달하는 매쉬업 매개 변수를 정의합니다.
a. 탐색기 패널을 사용하여 매쉬업을 선택한 다음 속성 패널에서 
을 클릭합니다.
을 클릭합니다.b. 매쉬업 매개 변수 대화 상자에서 컬렉션 위젯의 셀 매쉬업으로 전달할 매개 변수를 정의합니다.
c. 완료를 클릭한 다음 저장을 클릭합니다.
7. 이전 단계에서 정의한 매개 변수를 컬렉션의 데이터를 사용하는 위젯, 서비스 또는 함수에 대한 입력으로 바인딩합니다.
8. 매쉬업을 저장합니다.
필요에 따라 이 절차를 반복하여 비어 있거나 선택된 셀에 대한 고유한 매쉬업을 만듭니다.
컬렉션 매쉬업 만들기
1. Composer에서 새로 만들기를 클릭한 다음 매쉬업 또는 마스터를 선택합니다. 새 매쉬업 창이 열립니다.
2. 반응형을 선택한 다음 확인을 클릭합니다.
3. 매쉬업의 이름을 입력한 다음 저장을 클릭합니다.
4. 설계 탭을 클릭하여 Mashup Builder 인터페이스를 엽니다. 컨테이너 하나가 있는 빈 매쉬업이 캔버스에 표시됩니다.
5. 레이아웃 패널을 사용하여 매쉬업 레이아웃을 정의한 다음 컬렉션 위젯을 캔버스에 추가합니다.
6. 매쉬업을 저장합니다.
컬렉션 위젯에 데이터 바인딩
컬렉션 내에 데이터를 표시하려면 컬렉션 데이터가 포함된 인포테이블을 반환하는 서비스를 만들어야 합니다.
1. Mashup Builder에서 컬렉션 매쉬업을 엽니다.
2. 데이터 패널에서 컬렉션 데이터가 포함된 인포테이블을 반환하는 데이터 서비스를 추가합니다.
3. 데이터 서비스의 All Data 속성을 위젯 Data 속성에 바인딩합니다.
4. 매쉬업 Loaded 속성과 같은 이벤트를 바인딩하여 런타임에 컬렉션 서비스를 실행합니다.
5. 캔버스에서 또는 탐색기 패널을 사용하여 컬렉션 위젯을 선택한 다음 속성 패널을 엽니다.
6. Mashup 속성에서 컬렉션에 대해 작성한 셀 매쉬업을 선택합니다.
필요에 따라 EmptyMashup 및 SelectedCellMashup 속성을 사용하여 비어 있거나 선택된 셀에 대해 표시할 매쉬업을 선택합니다.
7. MashupPropertyBinding 속성에서는 셀 매쉬업에 정의한 매쉬업 속성을 컬렉션의 인포테이블 열에 바인딩합니다.
a. 추가를 클릭하여 속성의 JSON 값을 편집합니다.
b. 셀 매쉬업의 각 매쉬업 매개 변수를 컬렉션 데이터의 인포테이블 열 이름에 매핑합니다. 예를 들면, 다음과 같습니다.
{
"Prameter1": "Column1",
"Parameter2": "Column2"
}
"Prameter1": "Column1",
"Parameter2": "Column2"
}
c. 완료를 클릭합니다.
디자인 타임에 각 셀에 대한 데이터의 미리 보기가 컬렉션에 표시됩니다. 런타임에 컬렉션 서비스의 데이터는 각 셀 매쉬업의 콘텐츠 내에 있습니다.