App Builder 그리드 열 템플릿 시작하기

데이터 원본에 이름과 성 및 주소 세부 정보(예: 거리, 도시 및 우편 번호)에 대한 다양한 필드가 있다고 상상해 보십시오. 최신 ​^{App Builder TM}  Ultimate 23.1 릴리스를 사용하면 모두 하나의 셀 표시 값으로 결합하고 표시되는 열을 줄일 수 있습니다. 그리고 열 템플릿에 대한 이 App Builder 방법 자습서에서는 유사한 항목을 처리하고 기본 그리드에서 템플릿이 있는 그리드(표시 템플릿)로 이동하는 방법을 보여줍니다.

시작하자.

기본 그리드 vs. 템플릿이 있는 그리드 소개

"그리드"는 일반적으로 콘텐츠 또는 UI 요소를 2차원 그리드와 같은 패턴으로 구성하는 레이아웃 구조를 나타냅니다. 앱의 레이아웃을 앱의 목적에 따라 서로 다른 데이터를 포함하는 행과 열로 나눕니다. 이 자습서에서는 몇 가지 기본 템플릿과 함께 제공되는 기본 그리드로 시작합니다. 또한 필터링, 정렬 및 고정과 같은 기능을 구현하여 그리드 위에서 매우 쉽게 활성화하고 사용할 수 있습니다.

이를 보다 발전되고 맞춤화된 그리드로 전환하기 위해 다음을 사용합니다.

• 표시를 위한 1열 템플릿입니다.
• 그리고 특정 셀을 편집할 때 어떻게 보여야 하는지 처리하는 또 다른 것입니다.

열 템플릿이란 무엇인가요?

Grid Column Templates는 특정 열 내에서 사용자 지정된 레이아웃과 콘텐츠를 만드는 데 사용됩니다. 웹 응용 프로그램이든 웹 기반 UI가 있는 모바일 앱이든 앱을 빌드할 때 그리드 열 템플릿을 사용하면 다음과 같은 몇 가지 이점을 얻을 수 있습니다.

• 응답성을 달성하고 다양한 화면 크기에서 열의 동작을 정의합니다.
• 일관된 시각적 경험을 통해 보다 일관되고 유지 관리하기 쉬운 그리드 구조를 구축합니다.
• 모든 화면 해상도에 맞는 조정 가능한 열 너비로 레이아웃 내에서 공간을 보다 효율적으로 사용할 수 있습니다.
• ​복잡한 UI 요소를 정렬하고 다양한 항목을 정렬 할 때 앱의 시각적 모양에 대한 유연성과 정밀한 제어를 제공합니다.
• ​그리드 영역에 대해 더 명확한 이름을 설정하여 코드의 가독성과 유지 관리 용이성을 향상시킵니다.
• ​모듈식 레이아웃을 만들 수 있도록 하여 재사용성을 유도합니다.
• ​다중 열 레이아웃을 지원하며, 이는 콘텐츠가 많은 UI 또는 대시보드에 매우 유용합니다.

App Builder의 새로운 열 템플릿 기능으로 무엇을 할 수 있습니까?

• 이제 URL 데이터 필드를 사용자 지정 이미지 구성 요소와 연결할 수 있습니다.
• Rating 구성 요소를 표시하고 특정 숫자 값에 대한 시각적 단서를 제공합니다.
• 특정 열에 전화 번호가 포함되어 있음을 보다 시각적으로 나타낼 수 있는 방법을 제공합니다.

App Builder 그리드 열 템플릿 시작하기

그리드에 영상 가져오기

가장 빠른 방법은 App Builder (그리드에서 시간 경험 편집)의 편집기로 돌아가는 것이며, 각 그리드에 대해 모든 자식 요소는 열이며, 그리드 열 속성을 표시하는 아바타 URL을 선택할 수 있습니다. 또 다른 옵션은 "표시 형식"에서 "이미지"를 선택하면 이름과 성이 있는 아바타를 갖도록 추가로 사용자 지정할 수 있는 이미지로 자동 교체됩니다.

우리의 경우 아바타, 이름 및 성을 보여 드리겠습니다. 그런 다음 필요한 것은 "표시"이므로 App Builder 내에서 활성화해야 합니다. 왼쪽 상단 모서리에 드롭 콘텐츠에 대한 힌트가 있습니다. 툴박스에서 아바타 컴포넌트(Avatar Component) 를 드래그 앤 드롭하여 제자리에 추가할 수 있습니다.

그런 다음 셀 표시 템플릿을 계속 편집하고, 두 개의 텍스트 요소를 추가하고, 특정 크기를 설정합니다. 그런 다음 첫 번째 텍스트 요소를 "이름"에 바인딩하고 두 번째 텍스트 요소를 "성"에 바인딩하고 아바타의 경우 아이콘에서 선택하고 바인딩 옵션을 노출하는 이미지를 선택할 수 있습니다. 바인딩 옵션에서 이 특정 데이터 소스에는 간단히 연결하기만 하면 되는 필요한 아바타 URL이 있습니다.

레이아웃 제어

기본적으로 템플릿은 레이아웃 방향을 제공하지 않습니다. 따라서 레이아웃을 제어하려면 내부에 자신의 레이아웃을 추가 한 다음 구성 요소를 삭제하거나 사실 이후에 수행해야합니다.

그런 다음 정렬, 간격 속성, 여백 등을 지정할 수 있는 기본 Flex 컨테이너를 가져옵니다.

바인딩 및 칩 구성 요소

이제 우리가 할 또 다른 빠른 일은 전화 번호 안에 칩 구성 요소를 넣는 것입니다. 계속해서 디자이너를 선택하고 주소 전화를 클릭하고 이름을 지정한 다음 열 내부의 셀 표시 템플릿을 변경합니다. 공백이 됩니다. 그런 다음 칩 컴포넌트(Chip Component) 를 드롭하고 항목을 선택하여 휴대폰 기능을 추가합니다. 칩의 실제 내용(기본 바인딩과 함께 표시됨)은 "전화번호"로 추가로 지정할 수 있습니다.

제목 영역을 변경하여 선택 상자 표시

프로세스는 거의 동일합니다. 제목을 선택하고 셀 상단에 표시되는 표시와 편집 사이를 전환합니다. 편집할 때 깨끗한 선택 상자를 거기에 놓습니다. 그런 다음 옵션을 선택할 수 있습니다. 결국, 그리드에 Display Template과 Edit Template이 있고 멋지고 깨끗한 Select Box가 있습니다.

그리고 모든 설정이 완료되었습니다. 미리보기를 클릭하여 빌드한 항목을 확인합니다.

마무리…

이 빠른 사용법 App Builder 튜토리얼에서는 디스플레이 템플릿을 사용하여 사용자 지정 레이아웃을 만드는 방법과 템플릿 편집을 수정하여 다른 구성 요소를 만드는 방법을 보여주었습니다. 이렇게 하면 모든 그리드에 대해 사용자 지정된 레이아웃을 만들고 동일한 성능으로 그리드를 경험할 수 있지만 이제 템플릿의 이점을 누릴 수 있습니다.

모든 단계를 보여주는 웨비나를 시청할 수도 있습니다.