단일 페이지 앱 및 네비게이션
App Builder의 또 다른 기능은 단일 페이지 앱 및 네비게이션입니다. 페이지 기반 디자인 접근 방식과 달리 App Builder를 사용하면 사용자가 어떻게 네비게이션하는지에 따라 별도의 뷰를 만들고 주입하거나 전환할 수 있습니다. 이를 실행하려면 새로 만들기 응용 프로그램 버튼을 사용하여 새 앱을 만든 다음 상단 네비게이션이 정의된 기본 레이아웃 중 하나를 선택할 수 있습니다.
메뉴 버튼에서 레이아웃 프리셋을 추가한 다음 새 앱 만들기를 선택합니다
부모 뷰 vs. 자식 뷰
여기서 보는 것은 마스터 뷰입니다. 도구 상자의 뷰 목록을 보면 두 개의 자식 뷰가 중첩되어 있는 것을 볼 수 있습니다. 각 자식 뷰는 기본 도구 모음 영역의 네비게이션 버튼에 해당합니다. 앱을 미리 보면 보기 1을 클릭하면 보기 1 내에서 사용 가능한 콘텐츠가 표시되고 보기 2도 마찬가지입니다.
뷰 간 전환 - 레이아웃 프리셋
마스터 뷰와 자식 뷰 개념에 관해서는 마스터 뷰가 앱의 셸을 나타내며 모든 자식 뷰에서 공유될 UI 요소를 포함할 수 있다는 점을 주목해야 합니다. 이 경우 네비게이션 도구 모음과 사이드 네비게이션이 공유 구성 요소입니다. 네비게이션을 기반으로 자식 뷰를 주입하려면 views-container라는 구성 요소를 추가하여 자리 표시자로 사용할 수 있습니다. 이는 자식 뷰가 렌더링되는 영역입니다. Views-container는 기본적으로 사용 가능한 공간을 차지합니다.
뷰 간 전환 - 샘플 앱
views-container에는 앱 로드 시 기본적으로 표시할 두 자식 뷰 중 어느 것인지 정의하는 속성이 있습니다. Views 컨테이너를 선택하면 Views Container Properties에서 표시되는 기본 자식 뷰를 정의할 수 있습니다.
뷰 컨테이너 구성 요소 - 샘플 앱
뷰 상호 작용 변경 - 샘플 앱
네비게이션 추가(라우팅)
네비게이션을 자식 뷰에 연결하려면 '상호 작용' 섹션의 버튼에 네비게이션 작업을 추가할 수 있습니다. 현재 우리는 Navigate to 및 Toggle(Nav Drawer, Dropdown 및 Select와 같은 구성 요소용) 작업을 제공하고 있지만 향후 릴리스에서 더 많은 작업을 추가할 예정입니다.
네비게이션 정의 - 샘플 앱
단일 페이지 앱 및 네비게이션 기능은 여기까지입니다. 요약하면 자식 뷰는 navigate 작업을 기반으로 마스터 뷰 내에 주입됩니다. 자식 뷰는 views-container 구성 요소를 사용하여 마스터 뷰 내에서 호스팅됩니다. 마스터 뷰에 추가된 구성 요소는 모든 자식 뷰에서 공유됩니다.
추가 리소스
GitHub
