제품 식별 팝업 빌드
이 섹션에서는 제품 식별을 위한 다른 팝업을 추가합니다.
1. Identification 보기에서 캔버스에 다른 팝업 위젯을 추가하고 다음 속성을 구성합니다.
◦ 클래스 - full-page-popup을 입력합니다.
◦ 너비(px, %, vh, em) - 100%를 입력합니다.
◦ 높이(px, %, vh, em) - 100%를 입력합니다.
◦ 표시 - 확인란을 선택합니다.
◦ Studio ID - productIdentifiedPopup을 입력합니다,
2. 프로젝트 트리에서 scan-1을 클릭하여 속성을 표시합니다. 얻은 값 이벤트를 프로젝트 트리의 landingPagePopup으로 끌어 놓습니다. 이벤트 처리기 선택 창에서 팝업 표시를 선택하고 바인딩을 클릭합니다.
3. 이제 레이아웃에 더 많은 구조를 제공하기 위해 새 팝업 위젯에 그리드 레이아웃 위젯을 추가합니다.
4. 그리드 레이아웃 위젯을 선택한 상태에서 세부 정보 창에서 행이 사용 가능한 높이를 균등하게 분할 확인란을 선택합니다.
5. 행 추가를 두 번 클릭하여 그리드에 행을 두 개 더 추가합니다(세부 정보 창의 눈금 작업 아래).
6. 첫 번째 행은 비워 둡니다.
7. 두 번째 행을 선택하고 다음을 완료합니다.
◦ 공간 배치 방향을 열로 설정합니다.
◦ 콘텐츠 양쪽 맞춤을 가운데로 설정합니다.
◦ 항목 맞춤을 가운데로 설정합니다.
◦ 레이블 위젯을 추가하고 다음 속성을 구성합니다.
▪ 텍스트 - Product identified을 입력합니다.
▪ 클래스 - simple-label title-label을 입력합니다.
▪ Studio ID - productIdentifiedLabel을 입력합니다.
◦ 두 번째 레이블 위젯을 추가하고 다음 속성을 구성합니다.
▪ 텍스트 - ***을 입력합니다.
▪ 클래스 - simple-label sub-title-label을 입력합니다.
▪ Studio ID - productIDLabel을 입력합니다.
◦ 프로젝트 트리에서 scan-1을 클릭하여 속성을 표시합니다. 스캔한 값 속성을 프로젝트 트리의 productIDLabel로 끌어 놓습니다. 바인딩 대상 선택 창에서 텍스트를 선택하고 바인딩을 클릭합니다.
8. 세 번째 행을 선택하고 다음 작업을 완료합니다.
◦ 공간 배치 방향을 행으로 설정합니다.
◦ 콘텐츠 양쪽 맞춤을 가운데로 설정합니다.
◦ 항목 맞춤을 끝으로 설정합니다.
◦ 안쪽 여백(즉, 10px 10px 20px 10px)을 20px로 설정합니다.
9. 다음으로 세 번째 행에 버튼 위젯을 추가하고 다음 속성을 업데이트합니다.
◦ 텍스트 - Show the product를 입력합니다.
◦ 클래스 - long-button--green을 입력합니다.
◦ Studio ID - showProductButton을 입력합니다.
10. 새 버튼의 클릭 이벤트를 Visualization 보기로 끌어 놓습니다. 이벤트 처리기 선택 창에서 탐색을 선택하고 바인딩을 클릭합니다.
11. 다음으로 흐름을 빌드하여 경험을 다시 시작합니다.