위젯 로직

UI에 추가 논리를 제공하는 방법으로 이벤트 및 입력 제약조건이라는 두 가지 방법이 있습니다.

이벤트

이벤트에 대한 응답으로 위젯의 동작을 정의하여 UI를 보다 동적으로 만들 수 있습니다. 예를 들어 버튼 위젯의 onClick 이벤트는 사용자가 버튼을 클릭하면 수행할 작업을 결정합니다.

대부분의 위젯에는 최소한 onAttach , onDetach, onDataLoad라는 3가지 이벤트가 있습니다. 일부 위젯에는 올바른 용도와 관련된 추가 이벤트가 있습니다. 예를 들어 텍스트 필드 위젯에는 onValueChanged 이벤트가 있지만 onClick 이벤트는 없습니다.

속성 편집기의 이벤트 섹션을 사용하여 위젯이 이벤트에 응답하는 방법을 정의합니다. 이벤트 이름 옆에 있는 화살표를 클릭하여 이벤트 선택 대화상자를 엽니다. 여기서 사전 제작된 스크립트를 선택하거나 커스텀 작업을 클릭하여 자체 스크립트를 작성합니다.

이벤트 이름 설명
onAttach 위젯이 DOM에 연결되면 스크립트를 실행합니다.
예: 앱의 기본 패널에 있는 onAttach 이벤트는 보기가 로드될 때 쿠키를 읽어서 상태를 초기화할 수 있습니다.
onDetach 위젯이 DOM에서 분리되면 스크립트를 실행합니다.
예: 앱의 기본 패널에 있는 onDetach 이벤트는 사용자가 떠날 때 쿠키에 데이터를 써서 보기의 현재 상태를 저장할 수 있습니다.
onDataLoad 위젯과 데이터가 로드되면 스크립트를 실행합니다.
예: 목록 위젯의 onDataLoad 이벤트는 쿼리 결과를 기반으로 패널의 특정 행을 숨길 수 있습니다.
onClick 사용자가 위젯을 클릭하면 스크립트를 실행합니다. 버튼, 링크, 기타 클릭 가능한 위젯에서 사용할 수 있습니다.
예: 버튼의 onClick 이벤트는 사용자를 다른 보기로 데려갈 수 있습니다.
onValueChange 위젯의 value 속성이 변경되면 스크립트를 실행합니다.
예: 텍스트 필드의 onValueChange 이벤트는 사용자가 쿼리 입력을 마친 후 필드의 데이터 소스에서 검색을 실행할 수 있습니다.
onValueEdit 사용자가 위젯의 값을 수정하면 스크립트를 실행합니다. onValueChange와 달리 이 이벤트는 결합 또는 프로그래매틱 변경사항에 대한 응답으로 실행되지 않습니다.
예: 텍스트 필드의 onValueEdit 이벤트는 검색어에 대한 응답으로 일치하는 검색어를 강조표시할 수 있습니다.
onValidate 위젯의 값이 변경되거나 다른 스크립트가 유효성 검사를 트리거하면 스크립트를 실행합니다. 새 값이 위젯의 제약조건을 충족하는 경우에만 스크립트가 실행됩니다.
유효성 검사 관련 참고 사항: 값이 유효하면 빈 문자열, null 또는 undefined가 반환됩니다. 값이 유효하지 않으면 오류 메시지와 함께 비어 있지 않은 문자열이 반환됩니다.

입력 유효성 검사

사용자 입력을 데이터베이스에 저장하기 전에 유효성을 검사하는 것이 유용한 경우가 많습니다. 예를 들어 입력된 전화번호의 자릿수가 정확하거나 사용자의 성 및 이름 필드가 모두 채워져 있어야 유효한 앱이 있을 수 있습니다. App Maker에서 제약조건을 사용하여 입력의 유효성을 검사하거나 onValidate 이벤트 중에 실행되는 자체 유효성 검사 스크립트를 작성할 수 있습니다.

제약조건을 사용한 유효성 검사

텍스트 필드 및 텍스트 영역 위젯의 속성 편집기에는 데이터 유효성 검사 섹션이 있습니다. 이러한 제약조건은 위젯의 값이 변경될 때 트리거되고, 제약조건이 충족되지 않으면 오류를 표시할 수 있습니다. 제약조건은 명시적 값, 데이터 결합 또는 결합 표현식을 허용합니다.

속성 설명
required 사용 설정된 경우 필수 입력이라는 의미입니다.
minLength 공백을 포함한 문자열의 최소 허용 문자 길이를 정의합니다. 선행 또는 후행 공백은 문자 수에 포함되지 않습니다.
maxLength 공백을 포함한 문자열의 최대 문자 길이를 정의합니다. 선행 또는 후행 공백은 문자 수에 포함되지 않습니다.
regexp 사용자 입력의 유효성을 검사하는 정규 표현식을 정의합니다. 자바스크립트 정규 표현식 라이브러리를 사용합니다.
예: 미국 우편번호 형식과 일치하는 표현식: ^\d{5}(-\d{4})?$.

onValidate 이벤트를 사용한 유효성 검사

onValidate 이벤트를 사용하면 자체 유효성 검사 스크립트를 작성할 수 있습니다. 다음과 같은 경우에 사용하는 것이 가장 좋습니다.

  • 위젯과 필드 제약조건만으로는 감당할 수 없는 복잡한 사용 사례인 경우
  • 오류 커스텀 메시지를 제공해야 하는 경우
  • 다른 값이나 위젯의 값에 따라 유효성 검사 결과가 달라지는 경우

onValidate 이벤트는 값이 제약조건을 전달하는 경우에만 트리거되므로 제약조건과 함께 작동합니다.

예: 호텔 예약 앱에서 사용자가 층 번호에 1과 21 사이의 값 중 13을 제외한 모든 값을 입력할 수 있게 하려고 합니다.

이 경우 min length 제약조건을 1로, max length 제약조건을 21로 설정하고 위젯의 onValidate 이벤트에서 불운의 숫자(13)가 있는지 확인합니다.

      if (newValue == 13) {
        return "Please select a number with a bit more luck.";
      }
    

validate 메소드를 사용하여 유효성 검사 트리거

제약조건 및 onValidate 스크립트는 위젯의 값이 변경될 때만 트리거되는데, 이것만으로 부족한 경우가 있습니다. 예를 들어 모든 필드에 유효성 검사가 포함된 양식이 있는데 사용자가 필드 하나를 채우지 않고 Submit를 클릭해도 유효성 확인 검사가 실행되지 않는 경우가 있습니다.

이 시나리오를 방지하려면 validate 메소드를 사용하여 유효성 검사를 트리거하면 됩니다. Submit 버튼이 유효성 검사가 완료된 필드와 동일한 패널에 있다고 가정한다면 위의 예시를 사용하여 Submit 버튼의 onClick 이벤트에 다음 코드를 연결할 수 있습니다.

      if (widget.parent.validate()) {
        // We passed validation! Do whatever you want here...
      }
    

또는 각 위젯의 유효성 검사를 명시적으로 수행할 수 있습니다.

      if (widget.parent.children.WidgetToValidate.validate()) {
        // We passed validation! Do whatever you want here...
      }
    

유효성 검사 우선순위

App Maker는 다음 순서로 위젯의 유효성을 검사합니다.

  1. 위젯 제약조건:
    • 필수
    • 최대/최소 길이/수
    • 정규 표현식
  2. onValidate 이벤트
  3. 필드 제약조건과 같은 결합된 속성 제약조건

유효성 검사 도중에 유효하지 않은 값이 발견되면 유효성 검사가 즉시 중지됩니다. 예를 들어 required 제약조건을 선택하면 onValidate 이벤트는 null 값을 수신하지 않습니다. 제약조건 검사 중에 해당 값이 유효성 검사에 실패하기 때문입니다.

결합된 속성은 새 값이 유효성 검사를 통과할 때까지 업데이트되지 않습니다. validate() 호출의 결과로 초기 검사가 실패한 후에 위젯이 유효해지면 value 속성과 관련된 결합이 적절히 업데이트됩니다.