Show Menu
화제×

HTML5 양식에 사용자 정의 모양 만들기

사용자 정의 위젯을 모바일 양식에 연결할 수 있습니다. 기존 jQuery 위젯을 확장하거나 모양 프레임워크를 사용하여 사용자 정의 위젯을 개발할 수 있습니다. XFA 엔진은 다양한 위젯을 사용합니다. 자세한 내용은 적응형 및 HTML5 양식에 대한 모양 프레임워크를 참조하십시오.
: 기본 및 사용자 정의 위젯의 예

HTML5 양식과 사용자 정의 위젯 통합

프로필 만들기

프로파일을 만들거나 기존 프로파일을 선택하여 사용자 정의 위젯을 추가할 수 있습니다. 프로필 만들기에 대한 자세한 내용은 사용자 정의 프로필 만들기를 참조하십시오 .

위젯 만들기

HTML5 양식은 새로운 위젯을 만들기 위해 확장할 수 있는 위젯 프레임워크의 구현을 제공합니다. 구현은 jQuery 위젯 abstractWidget 으로 확장하여 새 위젯을 작성할 수 있습니다. 새 위젯은 아래에 언급된 기능을 확장/무시해야만 작동할 수 있습니다.
함수/클래스 설명
render render 함수는 위젯의 기본 HTML 요소에 대한 jQuery 객체를 반환합니다. 기본 HTML 요소는 포커스 가능한 유형이어야 합니다. 예: <a>, <input> 및 <li>. 반환된 요소는 $userControl로 사용됩니다. $userControl이 위의 제약 조건을 지정하는 경우 AbstractWidget 클래스의 함수는 예상대로 작동하며, 그렇지 않으면 일반적인 API(focus, click) 중 일부는 변경이 필요합니다.
getEventMap HTML 이벤트를 XFA 이벤트로 변환하는 맵을 반환합니다. { blur:XFA_EXIT_EVENT, } 이 예에서는 흐림 효과가 HTML 이벤트이고 XFA_EXIT_EVENT가 해당 XFA 이벤트임을 보여줍니다.
getOptionsMap 옵션 변경 시 수행할 작업을 자세히 제공하는 맵을 반환합니다. 키는 위젯에 제공되는 옵션이며 값은 해당 옵션이 변경될 때마다 호출되는 함수입니다. 위젯은 모든 일반적인 옵션(값 및 displayValue 제외)에 대한 핸들러를 제공합니다.
getCommitValue 위젯 프레임워크는 위젯의 값이 XFAModel에 저장될 때마다(예: textField의 종료 이벤트) 함수를 로드합니다. 구현은 위젯에 저장된 값을 반환해야 합니다. 처리기에 옵션에 대한 새 값이 제공됩니다.
showValue 기본적으로 XFA에서 시작 이벤트가 발생하면 필드의 rawValue가 표시됩니다. 이 함수는 사용자에게 rawValue를 표시하기 위해 호출됩니다.
showDisplayValue 기본적으로 종료 이벤트의 XFA에서 필드의 formattedValue가 표시됩니다. 이 함수가 호출되어 사용자에게 formattedValue를 표시합니다.
위젯을 만들려면 위에서 만든 프로필에 재정의된 함수와 새로 추가된 함수가 들어 있는 JavaScript 파일의 참조를 포함합니다. 예를 들어 sliderNumericFieldWidget 숫자 필드의 위젯입니다. 머리글 섹션의 프로필에서 위젯을 사용하려면 다음 줄을 포함합니다.
window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

XFA 스크립팅 엔진을 사용하여 사용자 정의 위젯 등록

사용자 정의 위젯 코드가 준비되면 Form Bridge용 API를 사용하여 스크립팅 registerConfig 엔진에 위젯을 등록합니다 . widgetConfigObject가 입력으로 사용됩니다.
window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject

위젯 구성은 키가 필드를 식별하고 값이 해당 필드에 사용할 위젯을 나타내는 JSON 개체(키 값 쌍의 컬렉션)로 제공됩니다. 샘플 구성은 다음과 같습니다.
{
"identifier1" :"customwidgetname", "identifier2" :"customwidgetname2", .. }
여기서 "identifier"는 특정 필드, 특정 유형의 필드 집합 또는 모든 필드를 나타내는 jQuery CSS 선택기입니다. 다음은 여러 가지 경우에 식별자 값을 나열합니다.
식별자 유형
식별자
설명
이름 fieldname이 있는 특정 필드
식별자:"div.fieldname"
이름이 'fieldname'인 모든 필드는 위젯을 사용하여 렌더링됩니다.
'type' 유형의 모든 필드(여기서 type은 NumericField, DateField 등)입니다.:
식별자:"div.type"
Timefield 및 DateTimeField의 경우 이러한 필드는 지원되지 않으므로 type은 textfield입니다.
모든 필드
식별자:"div.field"