적응형 및 HTML5 양식의 모양 프레임워크 appearance-framework-for-adaptive-and-html-forms

CAUTION
AEM 6.4가 확장 지원이 종료되었으며 이 설명서는 더 이상 업데이트되지 않습니다. 자세한 내용은 기술 지원 기간. 지원되는 버전 찾기 여기.

Forms(적응형 양식 및 HTML 5 양식) 사용 jQuery, Backbone.js 및 Underscore.js 모양 및 스크립팅을 위한 라이브러리. 양식은 또한 jQuery UI 위젯 양식의 모든 대화형 요소(예: 필드 및 단추)에 대한 아키텍처입니다. 이 아키텍처를 통해 Form 개발자는 Forms에서 사용 가능한 다양한 jQuery 위젯 및 플러그인을 사용할 수 있습니다. leadDigits/trailDigits 제한이나 그림 조항 구현과 같은 사용자로부터 데이터를 캡처하는 동안 양식별 로직을 구현할 수도 있습니다. 양식 개발자는 사용자 지정 api를 만들고 사용하여 데이터 캡처 경험을 향상하고 사용자에게 더 친숙한 환경을 만들 수 있습니다.

이 문서는 jQuery 및 jQuery 위젯에 대한 충분한 지식이 있는 개발자를 위한 것입니다. 모양 프레임워크에 대한 통찰력을 제공하고 개발자가 양식 필드에 대한 대체 모양을 만들 수 있도록 해줍니다.

모양 프레임워크는 다양한 옵션, 이벤트(트리거) 및 함수를 사용하여 양식에서 사용자 상호 작용을 캡처하고 모델 변경에 응답하여 최종 사용자에게 알립니다. 또한

  • 프레임워크는 필드 모양을 위한 옵션 세트를 제공합니다. 이러한 옵션은 키-값 쌍이며, 두 가지 카테고리로 구분됩니다. 일반 옵션 및 필드 유형 특정 옵션.
  • 계약의 일부로 표시되는 모양은 Enter 키 및 종료와 같은 일련의 이벤트를 트리거합니다.
  • 함수 집합을 구현하려면 모양새가 필요합니다. 일부 함수는 일반적이지만, 다른 함수는 필드 유형 함수에만 사용됩니다.

일반적인 옵션 common-options

다음은 글로벌 옵션 설정입니다. 이러한 옵션은 모든 필드에 사용할 수 있습니다.

속성
설명
이름
스크립트 표현식에서 이 개체나 이벤트를 지정하는 데 사용되는 식별자입니다. 예를 들어 이 속성은 호스트 응용 프로그램의 이름을 지정합니다.
값
필드의 실제 값입니다.
displayValue
이 필드 값이 표시됩니다.
screenReaderText
화면 Reader은 이 값을 사용하여 필드에 대한 정보를 내레이션합니다. 양식은 값을 제공하며 값을 재정의할 수 있습니다.
tabIndex
양식의 탭 시퀀스에서 필드의 위치입니다. 양식의 기본 탭 순서를 변경하려는 경우에만 tabIndex를 무시합니다.
역할
요소의 역할(예: 제목 또는 테이블).
높이
위젯의 높이입니다. 픽셀로 지정됩니다.
폭
위젯의 폭입니다. 픽셀로 지정됩니다.
액세스
하위 양식과 같은 컨테이너 개체의 내용에 액세스하는 데 사용되는 컨트롤입니다.
paraStyles
위젯에 대한 XFA 요소의 para 속성입니다.
dir
텍스트 방향입니다. 가능한 값은 ltr(왼쪽에서 오른쪽) 및 rtl(오른쪽에서 왼쪽)입니다.

이러한 옵션 외에도 프레임워크는 필드 유형에 따라 달라지는 몇 가지 다른 옵션을 제공합니다. 필드별 옵션에 대한 세부 사항은 아래에 나와 있습니다.

양식 프레임워크와의 상호 작용 interaction-with-forms-framework

양식 프레임워크와 상호 작용하기 위해 위젯은 일부 이벤트를 트리거하여 양식 스크립트가 작동하도록 합니다. 위젯에서 이러한 이벤트를 throw하지 않으면 해당 필드에 대해 양식에 작성된 스크립트 중 일부가 작동하지 않습니다.

위젯에 의해 트리거된 이벤트 events-triggered-by-widget

Event
설명
XFA_ENTER_EVENT
이 이벤트는 필드가 포커스에 있을 때마다 트리거됩니다. 여기에서 "enter" 스크립트를 필드에서 실행할 수 있습니다. 이벤트를 트리거하는 구문은 다음과 같습니다.
(위젯)._trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT
이 이벤트는 사용자가 필드를 나갈 때마다 트리거됩니다. 이를 통해 엔진은 필드의 값을 설정하고 해당 "종료" 스크립트를 실행할 수 있습니다. 이벤트를 트리거하는 구문은 다음과 같습니다.
(위젯)._trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT
이 이벤트는 엔진이 필드에 작성된 "change" 스크립트를 실행할 수 있도록 트리거됩니다. 이벤트를 트리거하는 구문은 다음과 같습니다.
(위젯)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT
이 이벤트는 필드를 클릭할 때마다 트리거됩니다. 이를 통해 엔진은 필드에 작성된 "click" 스크립트를 실행할 수 있습니다. 이벤트를 트리거하는 구문은 다음과 같습니다.
(위젯)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

위젯에 의해 구현된 API apis-implemented-by-widget

모양 프레임워크는 사용자 지정 위젯에서 구현된 위젯의 일부 함수를 호출합니다. 위젯은 다음 함수를 구현해야 합니다.

함수
설명
포커스: function()
필드에 초점을 둡니다.
클릭: function()
필드에 초점을 맞추고 XFA_CLICK_EVENT를 호출합니다.

markError:function(errorMessage, errorType)

errMessage: string 오류 표시
errorType: 문자열("warning"/"error")

참고: HTML5 양식에만 적용됩니다.

위젯에 오류 메시지 및 오류 유형을 보냅니다. 위젯에 오류가 표시됩니다.

clearError: function()

참고: HTML5 양식에만 적용됩니다.

필드의 오류가 해결된 경우 호출됩니다. 위젯은 오류를 숨깁니다.

필드 유형에 대한 옵션 options-specific-to-type-of-field

모든 사용자 지정 위젯은 위의 사양을 준수해야 합니다. 다양한 필드의 기능을 사용하려면 위젯이 특정 필드에 대한 지침을 따라야 합니다.

텍스트 편집: 텍스트 필드 textedit-text-field

옵션
설명
여러 줄
필드가 줄바꿈 문자 입력을 지원하는 경우 True이고, 그렇지 않으면 false입니다.
maxChars
필드에 입력할 수 있는 최대 문자 수입니다.

limitLengthToVisibleArea

참고: HTML5 양식에만 적용 가능

텍스트 너비가 위젯의 너비를 초과할 때 텍스트 필드의 동작을 지정합니다.

선택 목록: DropDownList, ListBox choicelist-dropdownlist-listbox

옵션
설명
값
선택한 값의 배열입니다.
항목
옵션으로 표시할 객체의 배열입니다. 각 객체에는 두 개의 속성이 포함됩니다.
저장: 저장할 값, 표시 값: 표시할 값입니다.

편집 가능

참고: HTML5 양식에만 적용됩니다.

값이 true면 위젯에서 사용자 지정 텍스트 항목이 활성화됩니다.
displayValue
표시할 값의 배열입니다.
다중 선택
여러 항목을 선택할 수 있으면 True이고, 그렇지 않으면 false입니다.

API api

함수
설명
addItem: function(itemValues)
itemValues: 표시 및 저장 값을 포함하는 개체
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}
목록에 항목을 추가합니다.
deleteItem : function(nIndex)
인덱스: 목록에서 제거할 항목의 인덱스
목록에서 옵션을 삭제합니다.
clearItems: function()
목록에서 모든 옵션을 지웁니다.

숫자 편집: NumericField, DecimalField numericedit-numericfield-decimalfield

옵션
설명
dataType
필드의 데이터 유형을 나타내는 문자열(정수/십진수).
leadDigits
소수 자릿수에 허용되는 최대 행간 자리수입니다.
frcDigits
소수 자릿수에서 허용되는 최대 분수입니다.
제로
필드의 로케일에서 0을 나타내는 문자열 표현입니다.
십진수
필드의 로케일에서 소수점 표시 문자열

확인 단추: RadioButton, CheckBox checkbutton-radiobutton-checkbox

옵션
설명
values

값의 배열(온/오프/중립)입니다.

checkButton의 여러 상태에 대한 값의 배열입니다. value[0]은(는) 상태가 ON이면 값이고, 값[1]은(는) 상태가 OFF이면 값입니다.
values[2]은(는) 상태가 NEUTRAL이면 값입니다. 값 배열의 길이는 상태 옵션 값과 같습니다.

주

허용되는 상태 수입니다.

적응형 양식의 경우 2개(설정, 해제)와 HTML5 양식의 경우 3개(설정, 해제, 중립)입니다.

상태

요소의 현재 상태입니다.

적응형 양식의 경우 2개(설정, 해제)와 HTML5 양식의 경우 3개(설정, 해제, 중립)입니다.

DateTimeEdit: (DateField) datetimeedit-datefield

옵션
설명
일
해당 필드에 대한 현지화된 일 이름입니다.
개월
해당 필드의 현지화된 월 이름입니다.
제로
숫자 0에 대한 현지화된 텍스트입니다.
clearText
지우기 단추에 대한 현지화된 텍스트입니다.
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da