위젯은 페이지를 작성하는 데 사용되는 구성 요소입니다. 위젯은 텍스트를 표시하는 간단한 라벨부터 사용자가 데이터를 보고 편집할 수 있는 복잡한 양식에 이르기까지 다양합니다.
App Maker의 드래그 앤 드롭 페이지 작성은 위젯을 사용하기 쉽게 만들어주며, 위젯의 광범위한 속성을 이용하면 위젯을 맞춤설정하고 기능을 추가하여 모든 기능을 갖춘 UI를 빌드할 수 있습니다.
위젯의 유형
페이지 편집기의 왼쪽 위 모서리에 있는 위젯 팔레트 를 통해 위젯에 액세스하세요. App Maker는 팔레트의 위젯을 카테고리로 그룹화하여 찾기 쉽도록 만듭니다.
| 카테고리 | 목적 | 예시 |
|---|---|---|
| 데이터 | 모델 데이터를 표시하거나 편집할 수 있는 위젯. 이 카테고리는 복합 위젯으로 패널, 라벨, 텍스트 상자, 버튼을 포함한 위젯 계층입니다. 마법사의 출력을 편집할 수 있습니다. | 양식, 표 |
| 입력 | 클릭 또는 텍스트 입력과 같은 사용자 입력을 처리하는 위젯. | 버튼, 라벨, 텍스트 상자, 텍스트 영역, 체크박스, 드롭다운, 날짜 상자, 라디오 그룹, 별표 평점, 슬라이더, 제안 상자, 텍스트 편집기, 다중 선택, 사용자 선택도구, 드라이브 선택도구 |
| 표시 | 텍스트, 이미지 등 다른 요소에 비해 양방향식이 아닌 UI 요소를 표시하는 위젯. | 링크, 이미지, Google 지도, 도움말 아이콘, 스피너, HTML, 호출기 |
| 레이아웃 | 다른 위젯을 정렬하는 데 사용되는 위젯. 이 카테고리는 데이터 소스 할당을 수행할 수도 있습니다. | 고정 패널, 가로 패널, 세로 패널, 목록, 그리드, 아코디언, 탭, 가로 분할, 세로 분할 |
| 차트 | 데이터 시각화를 차트로 표시하는 위젯. | 막대 그래프, 선 차트, 파이 차트, 표 차트 |
| 페이지 조각 | 생성된 페이지 조각의 팔레트. | 페이지 머리글 및 바닥글과 같이 여러 페이지에서 반복되는 UI 요소 |
| 내 이미지 | 앱용으로 업로드된 이미지의 팔레트. | 제품 로고, 커스텀 아이콘 |
위젯 속성
각 위젯에는 편집 가능한 속성이 있어 표시되는 데이터 위치, 사용자 입력에 대한 응답 방식에 이르기까지 모든 사항을 지정할 수 있습니다. 페이지 캔버스 오른쪽에 있는 속성 편집기를 사용하여 현재 선택된 위젯의 속성을 확인하고 편집합니다.
속성 편집기는 기능별로 속성을 그룹화합니다. 각 그룹의 정확한 속성은 위젯마다 다릅니다.
| 속성 그룹 | 설명 |
|---|---|
| 위젯 이름 | 이 그룹은 이름과 데이터 소스의 두 가지 기본 위젯 속성과 위젯 기능과 관련된 하나 이상의 추가 속성으로 구성됩니다. |
| 성능 설정 | 이 그룹에는 하위 위젯이 로드되는 시기를 제어하는 단일 특성이 있습니다. 이 속성은 페이지, 레이아웃 위젯, 레이아웃 위젯이 포함된 데이터 위젯에만 나타납니다. |
| 레이아웃 | 이 그룹의 속성은 위젯의 위치와 크기를 지정합니다. |
| 간격 | 이 그룹의 속성은 위젯의 여백과 패딩을 지정합니다. |
| 이벤트 | 이 그룹의 속성은 위젯이 데이터 로드 및 사용자 입력과 같은 이벤트에 응답하는 방식을 결정합니다. |
| 데이터 검증 | 이 그룹의 속성은 텍스트 입력 위젯에 대한 유효성 검사 요구 사항을 설정합니다. 관련 입력 위젯에만 나타납니다. |
| 표시 | 이 그룹의 속성은 위젯의 모양과 공개 상태에 영향을 줍니다. |
| 플로우 | 이 그룹의 속성은 플로우 기능이 설정된 레이아웃 위젯이 하위 위젯을 배치하는 방식을 결정합니다. 레이아웃 위젯에만 나타납니다. |
| 기타 | 이 그룹의 속성은 유효성 검사 오류가 표시되고 위젯의 HTML 제목을 설정하는 방식을 제어합니다. 대부분의 브라우저에서 HTML 제목은 툴팁으로 표시됩니다. |
기본 속성
모든 위젯에는 두 가지 기본 특성이 있습니다.
- 이름 - 데이터 바인딩, 스크립트, 스타일 등에서 위젯을 참조하는 데 사용되는 식별자입니다. 위젯 이름은 페이지마다 고유해야 하며 숫자로 시작하거나 공백을 포함할 수 없습니다. App Maker는 페이지에 위젯을 추가할 때 자동으로 이름을 생성하지만 나중에 참조하기 위해 위젯의 이름을 기억하기 쉽게 바꾸는 것이 도움이 됩니다.
- 데이터 소스 - 위젯이 소스 데이터에 쉽게 액세스할 수 있도록 데이터 소스를 지정합니다. 데이터 소스는 양식 및 레이아웃 위젯에서만 지정할 수 있습니다. 다른 모든 위젯은 상위 레이아웃 위젯에서 데이터 소스를 상속합니다.
위젯 수명 주기
위젯은 단순한 수명 주기를 거칩니다. 우선 App Maker가 위젯을 만든 다음 페이지에 연결하여 표시되도록 합니다. App Maker는 위젯이 더 이상 필요하지 않을 때 연결을 해제합니다. 위젯은 여러 번 연결 및 연결 해제를 할 수 있지만 생성은 단 한 번만 할 수 있습니다.
생성
App Maker는 위젯을 만들 때 위젯의 속성을 설정하고 HTML을 빌드합니다. 위젯이 아직 페이지에 연결되지 않은 경우에도 app.pages속성을 통해 위젯 속성에 즉시 액세스할 수 있습니다. 기본적으로 App Maker는 사용자가 앱에 액세스한 직후 대부분의 위젯을 생성합니다. 목록 및 관련 위젯은 예외입니다. App Maker는 데이터 소스가 로드된 후에만 하위 요소를 생성합니다.
연결
App Maker가 위젯을 페이지에 연결하면 실제로 위젯을 페이지의 HTML 구조 또는 DOM에 삽입하여 사용자가 볼 수 있도록 합니다. App Maker는 사용자가 방문할 때 페이지 위젯의 대부분을 연결하고 사용자가 나갈 때 연결을 해제합니다. 다시 말하지만 목록 및 관련 위젯은 예외입니다. 데이터 소스가 로드된 후에만 위젯의 하위 요소가 연결되고 데이터 소스가 변경되면 새 행을 연결 및 분리할 수 있기 때문입니다.
App Maker는 위젯을 연결할 때 위젯 바인딩을 설정하고 위젯을 연결 해제할 때 위젯 바인딩을 삭제합니다. 여기에는 두 가지 의미가 있습니다. 위젯이 연결되기 전에는 값을 설정하기 위해 위젯 속성에 의존할 수 없다는 것과 데이터 소스가 로드되어 바인딩을 게재하기 때문에 위젯을 연결하면 서버 요청이 트리거되는 경우가 많다는 것입니다.
모든 위젯에는 위젯 수명 주기 변경에 응답해 코드를 실행하는 onAttach, onDetach, onDataLoad 이벤트가 있습니다. 위젯 로직에서 이러한 이벤트에 대해 자세히 알아보세요.
성능 설정
앱의 페이지와 위젯이 초기화되는 시기를 제어할 수 있습니다. 기본적으로 App Maker는 사용자가 앱을 열 때 모든 것을 다운로드합니다. 그러나 페이지를 추가할 때 앱을 여는 데 너무 오래 걸리지 않도록 일부 콘텐츠의 로드를 지연시켜야 할 수도 있습니다.
앱이 콘텐츠를 초기화하는 방법을 제어하려면 페이지 또는 패널을 클릭한 다음 속성 편집기에서 성능 설정 을 클릭합니다. 다음 옵션 중 하나를 선택합니다.
- 전체 초기화 - 사용자가 앱을 열면 App Maker가 모든 페이지와 위젯을 초기화합니다. 이것은 App Maker의 기본 설정이며 용량이 작은 앱에 가장 적합합니다. 모든 페이지에 이 옵션을 사용하면 복잡한 페이지가 있는 용량이 큰 앱을 여는 데 너무 오래 걸릴 수 있습니다.
- 부분 초기화 - 대용량 앱의 패널 또는 경량 페이지에 이 옵션을 선택합니다. 사용자가 앱을 열면 App Maker가 페이지 또는 패널의 내용과 구조를 다운로드합니다. 그러나 사용자가 상위 페이지를 열 때까지 위젯이 초기화되지 않습니다. 이 옵션을 사용하면 앱이 기본 설정보다 빠르게 로드되지만 개별 페이지의 로드 시간이 늘어날 수 있습니다.
- 초기화 연기 - 이 옵션은 대용량 앱의 복잡한 페이지에 가장 적합합니다. 사용자가 상위 페이지를 열어야만 App Maker가 페이지 또는 패널 구조를 로드합니다. App Maker가 콘텐츠를 다운로드하고 페이지를 빌드하는 동안 앱에 애니메이션 진행률 표시기가 나타납니다. 이 옵션을 사용하면 앱을 더 빨리 로드 할 수 있지만 이 설정을 사용하는 개별 페이지는 로드 속도가 느려집니다.
- 스크립트 초반 초기화 - 특정 조건이 충족될 때에만 사용되는 위젯이 앱에 포함된 경우 이 옵션을 사용합니다. 사용자가 지정된 작업을 수행할 때 createChildren를 호출하는 스크립트를 작성할 수 있습니다. 하위 위젯은 필요한 경우에만 App Maker에서 로드됩니다.
앱을 로드하는 데 시간이 너무 오래 걸리는 경우, 예를 들어 앱의 가장 중요한 페이지 설정 상태를 전체 초기화로 유지할 수 있습니다. 그런 다음 다른 페이지를 부분 초기화로 설정하여 로드를 지연시킬 수 있습니다. 앱을 로드하는 데 여전히 시간이 오래 걸리는 경우 일부 페이지를 초기화 연기로 설정합니다.
위젯이 초기화될 때까지 위젯의 속성 및 바인딩에 액세스할 수 없습니다. 이러한 변경 사항을 사용자에게 배포하기 전에 모든 커스텀 성능 설정을 철저히 테스트해야 합니다.텀
앱 디자인 권장사항에 대해 자세히 알아보세요.