속성 및 바인딩

GUI가 있는 애플리케이션을 개발할 때 가장 일반적인 작업 중 하나는 사용자 인터페이스와 데이터를 동기화 상태로 유지하는 것입니다. 예를 들어 기존의 개발 도구를 사용하여 고객 레코드를 탐색하고 수정하는 웹 애플리케이션을 만든다고 가정해 보겠습니다. App Maker가 없다면 다음과 같은 방식으로 애플리케이션 UI와 데이터베이스 레코드를 동기화 상태로 유지하는 방법을 개발해야 합니다.

  1. 데이터베이스의 다음 레코드가 요청되면 데이터를 표시하는 모든 UI 요소를 업데이트합니다.

  2. 모든 UI 요소에 변경 리스너를 추가하여 사용자가 변경한 사항을 고객 레코드에 반영합니다.

  3. 현재 고객 레코드를 업데이트하여 새 데이터를 수신합니다.

많은 상용구 코드를 작성하고 관리해야 하는데, 이 작업은 프로그래머에게는 번거로우며 비전문가에게는 심각한 장애물로 느껴질 수 있습니다.

App Maker에서는 이러한 상용구를 일일이 작성할 필요가 없으며, 바인딩을 사용하여 고객 레코드의 속성과 위젯의 속성이 항상 동기화되어야 한다고 지정하면 됩니다. 이 모든 작업을 편리한 시각적 인터페이스에서 수행할 수 있습니다. 복잡한 일은 App Maker가 전부 알아서 처리합니다.

UI 요소와 내부 값의 동기화를 유지하는 일반적인 시나리오 외에도 App Maker 바인딩의 용도는 다양합니다. App Maker 바인딩을 사용하여 두 개의 App Maker 속성, 예를 들어 현재 로그인한 사용자의 이메일 주소와 데이터 소스 쿼리 매개변수를 동기화할 수 있습니다. 실제로 모델, 데이터 소스, 위젯, 스크립트 등 App Maker의 거의 모든 요소에 바인딩이 있으므로 광범위한 App Maker 속성에 대해 바인딩을 사용할 수 있습니다.

속성

간단히 말해, 속성이란 App Maker 객체의 명명된 입니다. App Maker에서 속성 값을 가져오고 설정할 수 있으며, 대부분의 App Maker 객체에는 애플리케이션의 여러 부분에서 액세스 가능한 속성이 있습니다.

여러 가지 방법으로 속성을 설정할 수 있습니다.

  • App Maker UI에서 설정—위젯 이름을 설정하는 경우
  • 바인딩을 통해 설정—속성이 다른 속성의 업데이트를 반영하여 변경되는 경우
  • 스크립트에서 설정—자바스크립트로 속성 설정 가능

다음과 같은 다양한 속성에 액세스할 수 있습니다.

  • 데이터베이스 레코드의 필드
  • 현재 로그인한 사용자의 이메일 주소
  • 위치, 이름, 값 등의 위젯 속성

실제로 App Maker의 모든 요소에서 속성을 찾을 수 있으며, 가장 일반적인 위치는 속성 편집기입니다.

바인딩 선택기도 그러합니다.

객체

속성에 대한 이해를 돕기 위해 객체에 대해 설명해 보겠습니다. 객체란 App Maker와 App Maker 애플리케이션을 구성하는 '요소'이며, App Maker의 거의 모든 부분이 객체입니다. 어떠한 요소를 말하는 것일까요? UI를 구성하는 위젯, 데이터를 표현하는 레코드, 데이터를 자동으로 읽고 쓰는 데이터 소스 객체 등 매우 다양합니다. 애플리케이션 자체도 하나의 객체입니다.

예를 들어 텍스트 영역 위젯은 이름, 라벨 등의 여러 속성을 갖는 App Maker 객체입니다. 데이터 레코드는 내가 정의하는 속성을 갖는 애플리케이션 객체(예: 이름 속성을 갖는 고객 레코드)입니다.

유형

모든 App Maker 속성은 데이터 유형을 가지며 숫자, 문자열 등 특정한 종류의 값만 허용합니다. 대부분의 속성은 문자열, 숫자, 부울 등의 단순한 유형을 갖지만 복잡한 유형을 갖는 속성도 있습니다. 예를 들어 위젯의 상위 요소 속성도 위젯이며 위젯 유형으로 지정됩니다.

경로

App Maker는 바인딩 또는 스크립트에서 경로 표기법을 사용하여 속성을 참조합니다. 예를 들어 Person이라는 데이터 모델 객체의 Name이라는 속성은 Person.Name.

정의되지 않음

경로 및 속성 값은 정의되지 않을 수 있습니다. 이 상태는 null과는 다릅니다. 정의되지 않은 속성의 예로는 아직 로드되지 않은 레코드 관련 속성이 있습니다. datasource.item.Name과 같은 경로가 정의되지 않은 경우는 마지막 속성(Name)이 정의되지 않았거나 datasource 또는 item 등의 부분이 정의되지 않음 또는 null상태일 때 입니다. 일반적으로 App Maker는 정의되지 않은 값을 null로 취급합니다. 그러나 입력 위젯은 값이 정의되지 않음으로 설정되면 자신을 사용 중지합니다. 예를 들어 다음 스크립트를 사용하여 입력란의 값을 지우고 사용 중지할 수 있습니다.

textBox.value = undefined;
    

예시 시나리오

이 예시에서는 두 가지 복합 속성인 PersonAddress를 보여줍니다. 이러한 속성은 직접 만든 모델에 정의할 수 있는 특수 유형으로서, App Maker에 기본적으로 포함된 유형이 아닙니다.

Person
속성 이름유형
Name문자열
Age숫자
AddressAddress
Address
속성 이름유형
Street문자열
City문자열
Zip문자열

Person의 Address 속성은 Address 유형이므로 경로 표기법을 사용하여 사람의 위치를 참조할 수 있습니다. 예를 들면 Person.Address.City와 같습니다.

바인딩

바인딩은 두 속성을 동기화 상태로 유지하는 메커니즘입니다. App Maker 개발자가 두 속성, 예를 들어 입력란의 값과 레코드의 필드를 바인딩 상태로 선언하면 App Maker가 자동으로 두 속성을 동기화 상태로 유지합니다. 즉, 속성 중 하나가 변경되면 다른 속성이 설정됩니다.

App Maker의 모든 속성은 관찰 가능합니다. 즉, 속성의 변경을 리슨할 수 있습니다. 두 속성 사이에 바인딩이 만들어지면 바인딩은 각 속성의 변경을 관찰, 즉 리슨하면서 속성 중 하나가 변경될 때 다른 하나를 업데이트합니다.

App Maker에서 바인딩의 일반적인 예는 텍스트 입력 값을 데이터 소스의 항목 속성에 바인딩하는 경우입니다. App Maker 속성 편집기에서 바인딩을 수행하지만, 코드로 작성하면 다음과 같습니다.

@widget.text <-> @datasource.item.MyField
    

바인딩된 값의 유형 변환기

속성에는 유형과 값이 있습니다. 값 자체에도 유형이 있으며, 이 유형은 속성의 값과 일치해야 합니다. 예를 들어 위젯의 Name 속성은 문자열 유형이므로 이름 값은 문자열이며 정수로 취급할 수 없습니다.

두 속성을 서로 바인딩하려면 유형이 동일하거나 한 유형에서 다른 유형으로 값을 변환할 수 있어야 합니다. 이러한 변환을 유형 변환이라고 합니다.

예를 들어 위젯의 "6" 속성에 Name을 값으로 지정하면 "6"은 숫자가 아닌 문자열로 취급됩니다. 이 속성을 유형이 정수인 다른 속성에 바인딩할 수 있으며, App Maker에 내장된 유형 변환기는 이러한 두 속성 간에 값 유형을 변환하려고 시도합니다.

App Maker에는 다양한 유형 변환이 기본적으로 포함되어 있으므로 대부분의 바인딩은 문제없이 작동합니다. 변환기는 양방향으로 작동하며, 값을 한 유형에서 다른 유형으로 변환하기 위해 최선의 시도를 합니다.

원본대상조건
문자열숫자원본을 정수로 파싱할 수 있어야 합니다.
문자열부울원본이 'true' 또는 'false'여야 하며 대소문자를 구분하지 않습니다.
문자열날짜원본이 YYYY-MM-DD 형식의 날짜여야 합니다.
숫자부울0은 false로, 다른 값은 true로 변환됩니다.
배열<A>배열<B>A와 B가 호환되어야 합니다.

변환기

두 속성을 바인딩할 때 커스텀 데이터 변환을 적용해야 하는 경우가 있습니다. 예를 들어 레코드의 필드를 UI의 텍스트 필드에 바인딩하면서 사용자 입력에서 공백을 잘라낸 후에 데이터베이스에 저장해야 할 수 있습니다. 또는 날짜를 문자열로 변환하면서 App Maker의 기본 유형 변환에서 사용하는 것과 다른 날짜 패턴을 사용해야 할 수 있습니다. 변환기를 사용하면 속성 경로에 변환을 지정할 수 있습니다. 각 변환기는 입력 값을 취하여 출력 값을 생성하며, 대부분의 변환기는 출력 값을 취하여 입력 값으로 역변환할 수도 있습니다. 이러한 변환을 서로 연쇄할 수 있습니다. 예를 들어 문자열 경로의 입력 및 출력에서 공백을 잘라내려면 텍스트 필드의 value 속성을 데이터 소스 레코드의 Name 필드에 다음과 같이 바인딩합니다.

@value <-> @datasource.item.Name#trim()
    

텍스트 필드의 value 속성을 데이터베이스의 날짜 필드인 timestamp에 바인딩하면서 커스텀 날짜-문자열 변환 형식을 지정할 수도 있습니다.

@value <--> @datasource.item.TimeStamp#formatDate('yyyy/MM/dd HH:mm:ss');
    

다음과 같이 여러 변환기를 연쇄할 수 있습니다.

@value <-> @datasource.item.Name#nullToEmpty()#trim()
    

내장 변환기의 전체 목록은 여기를 참조하세요.

배열 자체가 아닌 배열의 요소에 변환기를 적용할 수도 있습니다. 드롭다운 위젯의 name 속성에 프로젝션의 항목을 입력하는 경우를 예로 들 수 있습니다. 구문은 동일하지만 해시 기호 1개가 아닌 2개를 사용합니다.

@names <-> @datasources.items..TimeStamp##formatDate('yyyy/MM/dd HH:mm:ss')
    

바인딩의 최상위 속성

객체의 속성(예: 위젯 이름)을 바인딩할 때는 바인딩 선택도구로 사용 가능한 속성을 탐색합니다. App Maker는 바인딩을 시작하는 객체에 따라 사용 가능한 속성을 자동으로 조정합니다. 따라서 자주 사용되는 특정 속성에 대한 바인딩이 간편해집니다. 예를 들어 버튼 위젯의 값을 바인딩하는 경우 바인딩 선택도구는 기본적으로 위젯의 datasource.item 속성을 자동으로 선택하며, 이 속성은 일반적으로 모델의 필드를 포함합니다.

그러나 위젯 등의 객체를 바인딩 선택도구에서 자동으로 제시하는 속성이 아닌 다른 속성에 바인딩해야 하는 경우도 있습니다. 이러한 경우 애플리케이션의 객체를 바인딩할 때 탐색 가능한 일반적인 두 가지 속성 카테고리를 이해하면 도움이 됩니다.

전역적으로 사용 가능한 속성

애플리케이션의 모든 속성에 바인딩할 수 있습니다. 일반적으로 app 객체를 통해 이러한 속성에 액세스합니다. 바인딩 시 app 객체의 모든 속성이 카테고리에 포함되어 바인딩을 위해 노출됩니다. 모든 속성에 대한 자세한 내용은 app 객체 API 문서를 참조하세요.

위젯에서 사용 가능한 속성

위젯은 app 객체의 모든 속성 및 추가적인 두 가지 속성에 바인딩될 수 있습니다.

  • widget - 위젯 자체
  • datasource - 위젯의 데이터 소스(위젯에 가장 일반적으로 바인딩되는 객체). @widget.datasource로도 표현할 수도 있지만 UI 편집기의 바인딩 선택도구에서는 편의상 datasource로 표시됩니다.

바인딩 표현식

두 속성을 직접 서로 바인딩하는 것만으로는 충분하지 않은 경우도 있습니다. App Maker UI의 바인딩 편집기에서 표현식을 사용하면 바인딩과 자바스크립트를 조합하여 바인딩 대상 값을 변환할 수 있습니다. App Maker는 표현식에 사용된 속성 중 하나가 변경될 때 항상 표현식을 평가합니다. 참고: 이렇게 하면 바인딩이 단방향이 됩니다.

MyDeleteButton이라는 삭제 버튼이 있으며, 데이터베이스에 삭제할 레코드가 없으면 버튼을 사용 중지하는 바인딩을 만들려는 경우를 예로 들어보겠습니다. 문제는 이러한 개념을 직접적으로 표현하는 속성이 없다는 것입니다. enabled 속성과 @datasource.item 속성이 있으며, 항목이 없으면 항목 값이 null이 된다는 점은 알고 있습니다. 따라서 이러한 정보를 바탕으로 다음과 같은 바인딩을 만들 수 있습니다.

@widget.enabled <-> @datasource.item != null
    

이제 레코드가 있을 때만 버튼이 사용 설정됩니다.

추가 자료

바인딩 표현식 작성에 대한 자세한 내용은 바인딩 표현식클라이언트 측 스크립트를 참조하세요. 위젯 및 클라이언트 객체에서 사용 가능한 모든 속성과 메서드에 대한 자세한 내용은 Widgets APIClient API를 참조하세요.