데이터에 위젯 결합

App Maker를 사용하면 데이터 결합을 통해 앱의 UI를 데이터에 쉽게 연결할 수 있습니다. 데이터 결합은 위젯 속성과 데이터 소스 간의 양방향 연결을 설정합니다. 이 연결을 통해 위젯은 모델, 관계, 기타 App Maker 속성의 데이터에 액세스하고 업데이트할 수 있습니다.

데이터 소스

위젯은 데이터 소스를 통해 데이터에 간편하게 액세스할 수 있습니다. 데이터 소스는 일종의 데이터(일반적으로 데이터 모델 레코드 또는 레코드 관계)를 나타내는 items 목록을 제공합니다. 또한 items 목록에서 현재 선택된 항목을 나타내는 단일 item도 있습니다. 위젯은 이 목록을 사용하여 레코드 액세스, 관계 수정 등의 작업을 수행합니다.

속성 편집기의 datasource 속성에서 위젯의 현재 데이터 소스를 볼 수 있습니다. 위젯은 명시적으로 지정된 다른 위젯이 없으면 상위 위젯에서 데이터 소스를 상속받습니다. 레이아웃 위젯의 데이터 소스만 할당할 수 있습니다. 다른 모든 위젯은 데이터 소스를 상속받으므로 레이아웃 위젯을 사용하여 다른 위젯을 시각적으로, 논리적으로 그룹화하면 대부분의 경우에 유용합니다.

모델 데이터 소스

App Maker는 개발자가 모델을 추가할 때마다 모델 데이터 소스를 자동으로 만듭니다. 모델 데이터 소스는 앱의 위젯과 서버의 데이터를 연결하는 가교 역할을 합니다. 데이터 소스는 서버에 전송된 쿼리로 items 목록을 작성합니다. 그러면 위젯이 해당 목록을 사용하여 모델의 레코드 생성, 읽기, 업데이트, 삭제를 수행할 수 있습니다.

모델 데이터 소스에 대해 자세히 읽어보기

관계 데이터 소스

관계 데이터 소스는 모델 데이터 소스의 확장형으로, 선택된 모델의 관계에 액세스하고 수정하는 데 사용됩니다. 상속을 통해 상위 위젯의 데이터 소스에서 현재 선택된 레코드를 찾고 해당 레코드의 관련 레코드 목록을 검색합니다.

관계 데이터 소스의 items 속성은 상위 위젯의 현재 레코드와 관련된 모든 레코드의 목록입니다. item은 해당 목록의 단일 레코드입니다. 관계 데이터 소스의 item은 레코드이므로 다른 관계 데이터 소스에 기반을 둔 관계 데이터 소스를 가질 수 있습니다.

관계 데이터 소스에 대해 자세히 읽어보기

추가 데이터 소스

모델 및 관계 데이터 소스가 가장 보편적이지만 App Maker를 사용하면 앱의 모든 속성을 데이터 소스로 사용할 수 있습니다. 예를 들어 사용자 그룹이나 커스텀 속성을 데이터 소스로 사용할 수 있습니다. 다른 데이터 소스에 액세스하려면 데이터 소스 선택 팝업의 하단에 있는 고급을 클릭하세요.

결합

결합은 위젯 속성과 다른 속성(일반적으로 해당 데이터 소스의 속성) 간의 양방향 연결입니다. 결합은 양방향이므로 결합된 속성 하나를 변경하면 다른 속성도 변경됩니다. 예를 들어 텍스트 상자의 value 속성을 온보딩 앱의 모델 데이터 소스에 있는 EmployeeName 필드에 결합할 수 있습니다. 사용자는 텍스트 상자를 사용하여 서버의 직원 이름을 업데이트할 수 있습니다. 또한 서버의 이름을 변경하면 텍스트 상자에 표시되는 텍스트가 자동으로 업데이트됩니다.

결합 추가

결합 선택기를 열려면 속성 편집기에서 위젯 속성 옆에 있는 결합를 클릭한 후 속성을 클릭합니다. 결합가 이미 표시되어 있으면 속성을 클릭하기만 하면 됩니다.

결합 선택기를 사용하면 현재 위젯과 관계 있는 결합된 속성이 있는 위치를 App Maker에 알려주는 결합 경로를 선언하여 결합을 추가할 수 있습니다. 선택기에는 두 가지 모드가 있습니다.

  • 단순: 단순 결합 선택기는 데이터 소스의 현재 항목 속성을 나열하고 선택 항목에 따라 자동으로 결합 경로를 만듭니다. 결합이 정의되지 않았거나 정의된 결합이 선택 항목과 일치하는 경우 데이터 소스가 있는 모든 위젯에서 기본적으로 이 선택기가 열립니다.

  • 고급: 고급 결합 선택기를 사용하여 앱의 모든 속성을 결합할 수 있습니다. 선택기 상단에 있는 마법사를 사용하여 경로를 생성하거나 하단에 있는 결합 표현식 필드에 직접 작성할 수 있습니다. 단순 결합 선택기에서 고급 선택기 열기를 클릭하면 고급 선택기에 액세스할 수 있습니다. 또한 데이터 소스가 있지만 정의된 결합이 단순 결합 선택기의 선택 항목과 일치하지 않는 위젯과 데이터 소스가 없는 위젯에서 기본적으로 이 선택기가 열립니다. 단순 결합 선택기를 표시하려면 간략히...를 클릭하세요.

결합 표현식

결합 표현식은 결합 경로 출력에 대한 작업을 수행할 수 있게 해주는 자바스크립트 표현식입니다. 단일 결합 표현식에 여러 결합 경로가 포함될 수 있지만 자바스크립트 표현식은 하나만 포함할 수 있습니다. 자바스크립트 표현식이 두 개 이상 필요한 경우 결합 표현식을 사용하여 클라이언트 스크립트를 호출하고 결합 경로를 매개변수로 지정하세요.

App Maker는 표현식의 결합 경로 값이 변경되면 결합 표현식을 다시 계산합니다. 결합 표현식은 위젯이 데이터를 표시하는 방법에만 영향을 주며 결합 경로의 실제 데이터는 변경할 수 없습니다. 따라서 입력 위젯의 value 필드에는 결합 표현식을 사용할 수 없습니다. 단순 결합 경로를 대신 사용하세요.

결합 표현식 샘플: "Hello, " + @user.username + ". My name is " + @widget.name + "."

프로젝션

프로젝션을 사용하면 데이터 소스의 items 목록에 있는 레코드의 속성에 액세스할 수 있습니다. 고급 결합 마법사에서 ..projections.. 옵션을 사용하거나 결합 경로에 프로젝션 연산자 ..를 사용하면 프로젝션에 액세스할 수 있습니다. 예를 들어 Employees 데이터 소스(name 속성이 @datasources.Employee.items..name)는 모든 직원의 이름이 포함된 목록을 반환합니다.

커스텀 속성

커스텀 속성은 단일 사용자 세션의 데이터를 저장하는 페이지 수준의 속성입니다. 커스텀 속성은 여러 위젯의 속성을 단일 값에 결합해야 할 때 유용합니다. 예를 들어 여러 메뉴 위젯의 visible 속성을 부울 ShowAll 커스텀 속성에 결합하여 해당 위젯의 표시 유형을 그룹으로 전환합니다.

페이지의 기본 패널을 선택하고 속성 편집기에서 커스텀 속성 그룹을 클릭하여 커스텀 속성을 만듭니다. 마법사의 properties 옵션 또는 결합 표현식의 @properties 바로가기를 사용하여 고급 결합 선택기의 커스텀 속성에 액세스할 수 있습니다. 다른 페이지의 커스텀 속성에 액세스하려면 마법사의 page 옵션이나 @pages 바로가기를 사용하세요.

추가 자료

  1. 속성 및 결합: 속성 및 결합을 개념적으로 자세히 살펴봅니다.
  2. 데이터 소스: 모델 및 관계 데이터 소스에 대해 자세히 알아봅니다.
  3. 데이터 모델 연결 가이드: 관계 데이터 소스를 실제로 다뤄봅니다.
  4. Client API - 데이터 소스: 클라이언트 스크립트에서 사용 가능한 모든 데이터 소스 속성 및 메서드를 확인할 수 있습니다.