적응형 양식 작업에 대한 우수 사례 best-practices-for-working-with-adaptive-forms

Apache Maven 사용 aem-project-archetype AEM 프로젝트의 구조를 만들고 관리하려면 AEM 프로젝트에 대한 권장 구조 및 템플릿을 만듭니다. 또한 프로젝트를 관리하는 데 도움이 되도록 빌드 자동화 및 변경 제어 시스템을 제공합니다.

• maven 사용 archetype:generate 초기 구조를 생성하는 명령.
• Maven 사용 eclipse:eclipse eclipse 프로젝트 파일을 생성하고 프로젝트를 eclipse로 가져오기 위한 명령입니다.

FileVault 도구 또는 VLT는 CRX 또는 AEM 인스턴스의 컨텐츠를 파일 시스템에 매핑하는 데 도움이 됩니다. AEM 프로젝트 콘텐츠 체크인 및 체크아웃 등의 변경 제어 관리 작업을 제공합니다. 자세한 내용은 VLT 도구 사용 방법.

Eclipse 통합 개발 환경을 사용하는 경우 AEM 개발자 도구를 사용하여 AEM 인스턴스와 Eclipse IDE를 원활하게 통합하여 AEM 애플리케이션을 만들 수 있습니다. 자세한 내용은 Eclipse용 AEM 개발자 도구.

적응형 양식 템플릿은 적응형 양식의 구조와 머리글 바닥글 정보를 정의하는 전문 AEM 페이지입니다. 템플릿에는 적응형 양식의 사전 구성된 레이아웃, 스타일 및 기본 구조가 있습니다. AEM Forms은 적응형 양식을 작성하는 데 사용할 수 있는 기본 템플릿 및 구성 요소를 제공합니다. 그러나 요구 사항에 따라 사용자 지정 템플릿 및 구성 요소를 만들 수 있습니다. 적응형 양식에 필요한 추가 템플릿 및 구성 요소에 대한 요구 사항을 수집하는 것이 좋습니다. 자세한 내용은 적응형 양식 및 구성 요소 사용자 지정.

AEM Forms에서는 다음 양식 모델을 기반으로 적응형 양식을 만들 수 있습니다. 양식 모델은 양식과 AEM 시스템 간의 데이터 교환을 위한 인터페이스 역할을 하며 적응형 양식 내/외부에서 데이터 흐름을 위한 XML 기반 구조를 제공합니다. 또한 양식 모델은 스키마 및 XFA 제한 형태로 적응형 양식에 규칙과 제한을 적용합니다.

• 없음: 이 옵션을 사용하여 만든 적응형 양식에서는 양식 모델을 사용하지 않습니다. 해당 양식에서 생성된 데이터 XML에는 필드와 해당 값이 포함된 기본 구조가 있습니다.
• XML 또는 JSON 스키마: XML 및 JSON 스키마는 조직의 백엔드 시스템에서 데이터를 생성하거나 사용하는 구조를 나타냅니다. 스키마를 적응형 양식에 연결하고 해당 요소를 사용하여 적응형 양식에 동적 컨텐츠를 추가할 수 있습니다. 스키마의 요소는 적응형 양식을 작성할 컨텐츠 브라우저의 데이터 모델 개체 탭에서 사용할 수 있습니다. 스키마 요소를 드래그하여 놓아 양식을 작성할 수 있습니다.
• XFA 양식 템플릿: XFA 기반 HTML5 양식에 투자를 한 경우 이상적인 양식 모델입니다. XFA 기반 양식을 적응형 양식으로 전환하는 직접적인 방법을 제공합니다. 기존 XFA 규칙은 연결된 적응형 양식에 유지됩니다. 결과 적응형 양식은 유효성 검사, 이벤트, 속성 및 패턴과 같은 XFA 구문을 지원합니다.
• 양식 데이터 모델: 데이터베이스, 웹 서비스 및 AEM 사용자 프로필과 같은 백엔드 시스템을 통합하여 적응형 양식을 미리 작성하고 제출된 양식 데이터를 다시 백엔드 시스템에 기록하려는 경우 기본 양식 모델입니다. 양식 데이터 모델 편집기를 사용하면 적응형 양식을 만드는 데 사용할 수 있는 양식 데이터 모델에서 엔티티와 서비스를 정의하고 구성할 수 있습니다. 자세한 내용은 AEM Forms 데이터 통합.

AEM Forms은 적응형 양식을 만드는 데 사용할 수 있는 기본 적응형 양식 템플릿을 제공합니다. 자신만의 템플릿을 만들 수도 있습니다. AEM은 정적 및 편집 가능한 템플릿을 제공합니다.

• 정적 템플릿은 개발자가 정의하고 구성합니다.
• 편집 가능한 템플릿은 템플릿 편집기를 사용하여 작성자가 만듭니다. 템플릿 편집기를 사용하면 기본 구조와 초기 컨텐츠를 템플릿에 정의할 수 있습니다. 구조 레이어의 수정 사항은 해당 템플릿을 사용하는 모든 양식에 반영됩니다. 초기 컨텐츠에는 사전 구성된 테마, 미리 채우기 서비스, 제출 작업 등이 포함될 수 있습니다. 그러나 양식 편집기를 사용하여 양식에 대해 이러한 설정을 수정할 수 있습니다. 자세한 내용은 적응형 양식 템플릿.

특정 필드 또는 패널 인스턴스에 스타일을 지정하는 경우 인라인 스타일. 또는 CSS 파일에서 클래스를 정의하고 구성 요소의 CSS 클래스 속성에 클래스 이름을 지정할 수 있습니다.

구성 요소에 클라이언트 라이브러리를 포함하여 해당 구성 요소를 사용하는 적응형 양식 또는 조각에 스타일을 일관되게 적용합니다. 자세한 내용은 적응형 양식 페이지 구성 요소 만들기.

클라이언트 라이브러리에 정의된 스타일을 적용하여 적응형 양식 컨테이너 속성의 CSS 파일 경로 필드에서 클라이언트 라이브러리에 대한 경로를 지정하여 적응형 양식을 선택합니다.

스타일의 클라이언트 라이브러리를 만들려면 테마 편집기 기본 clientlib 또는 양식 컨테이너 속성에서 사용자 지정 CSS 파일을 구성할 수 있습니다.

적응형 양식은 응답형, 탭, 아코디언 및 마법사와 같은 패널 레이아웃을 제공하여 패널에서 양식 구성 요소를 레이아웃하는 방법을 제어합니다. 사용자 정의 패널 레이아웃을 만들고 양식 작성자가 사용할 수 있도록 만들 수 있습니다. 자세한 내용은 적응형 양식을 위한 사용자 지정 레이아웃 구성 요소 만들기.

필드 및 패널 레이아웃과 같은 특정 적응형 양식 구성 요소를 사용자 지정할 수도 있습니다.

• 를 사용하십시오 오버레이 구성 요소의 사본을 수정하는 AEM 의 기능입니다. 기본 구성 요소를 수정하지 않는 것이 좋습니다.
• /libs에서 바로 사용 가능한 적응형 양식 구성 요소의 레이아웃을 사용자 지정하려면 사용자 지정 레이아웃 구성 요소 만들기 그리고 기본 레이아웃.
• 사용자 지정 위젯 또는 모양을 만들어 사용자 지정 상호 작용을 도입합니다. 기본 구성 요소를 수정하지 않는 것이 좋습니다. 자세한 내용은 모양 프레임워크.

자세한 내용은 개인 식별 정보 처리 참조하십시오.

사이드바의 객체 브라우저를 사용하여 양식 계층 구조의 필드에 빠르게 액세스합니다. 검색 상자를 사용하여 폼이나 객체 트리에서 개체를 검색하여 한 객체에서 다른 객체로 이동할 수 있습니다.

사이드바의 구성 요소 브라우저에서 구성 요소의 속성을 보고 편집하려면 구성 요소를 선택하고 을 클릭합니다 . 구성 요소를 두 번 클릭하여 속성 브라우저에서 해당 속성을 볼 수도 있습니다.

키보드 단축키를 사용하여 양식에 빠른 작업을 수행할 수 있습니다. 자세한 내용은 AEM Forms 키보드 단축키.

적응형 양식 구성 요소는 적응형 양식 페이지에서만 사용하는 것이 좋습니다. 구성 요소는 상위 계층에 종속되어 있습니다. 따라서 AEM 페이지에서 이러한 매개 변수를 사용하지 마십시오.

규칙을 작성하는 동안 발생할 수 있는 충돌을 방지하려면 양식 필드 및 구성 요소에 의미 있고 고유한 이름을 사용하십시오.

사용 this 규칙 표현식에서 자체를 참조할 구성 요소의 연산자입니다. 이렇게 하면 구성 요소 이름이 변경되더라도 규칙이 유효하게 유지됩니다. (예: field1.valueCommit script: this.value > 10)

다른 양식 구성 요소를 참조할 때 구성 요소 이름을 사용합니다. 를 사용하십시오 value 필드 또는 구성 요소의 값을 가져올 속성입니다. (예: field1.value)

충돌을 방지하려면 상대적 고유 계층별로 구성 요소를 참조합니다. (예: parentName.fieldName)

복잡하거나 일반적으로 사용되는 규칙을 처리할 때 적응형 양식 간에 지정하고 재사용할 수 있는 별도의 클라이언트 라이브러리에서 비즈니스 논리를 함수로 쓰는 것이 좋습니다. 클라이언트 라이브러리는 자체 포함된 라이브러리여야 하며 jQuery 및 Underscore.js를 제외하고 외부 종속성이 없어야 합니다. 클라이언트 라이브러리를 사용하여 서버측 재유효성 검사 섹션에 있는 마지막 항목이 될 필요가 없습니다.

적응형 양식은 적응형 양식과 통신하고 작업을 수행하는 데 사용할 수 있는 API 세트를 제공합니다. 일부 주요 API는 다음과 같습니다. 자세한 내용은 응용 Forms에 대한 JavaScript 라이브러리 API 참조.

• guideBridge.reset(): 양식을 재설정합니다.

• guideBridge.submit(): 양식을 제출합니다.

• guideBridge.setFocus(somExp, focusOption, runCompletionExp): 포커스를 필드에 설정합니다.

• guideBridge.validate(errorList, somExpression, focus): 양식의 유효성을 검사합니다.

• guideBridge.getDataXML(options): 양식 데이터를 XML로 가져옵니다.

• guideBridge.resolveNode(somExpression): 양식 개체를 가져옵니다.

• guideBridge.setProperty(somList, propertyName, valueList): 양식 개체의 속성을 설정합니다.

• 또한 다음 필드 속성을 사용할 수 있습니다.

  • field.value 필드의 값을 변경하려면 다음을 수행하십시오.
  • f ield.enabled 필드를 활성화/비활성화합니다.
  • field.visible 필드의 표시 여부를 변경하려면 다음을 수행하십시오.

적응형 양식 작성자는 비즈니스 논리를 양식으로 구축하려면 JavaScript 코드를 작성해야 할 수 있습니다. JavaScript는 강력하고 효과적이지만, 보안 기대치를 손상시킬 수 있습니다. 따라서 양식을 프로덕션에 넣기 전에 양식 작성자가 신뢰할 수 있는 인물이고 JavaScript 코드를 검토하고 승인하는 프로세스가 있는지 확인해야 합니다. 관리자는 역할 또는 기능을 기반으로 사용자 그룹에 대한 규칙 편집기 액세스 권한을 제한할 수 있습니다. 자세한 내용은 사용자 그룹을 선택하는 규칙 편집기 액세스 권한 부여.

규칙의 표현식을 사용하여 적응형 양식을 동적으로 만들 수 있습니다. 모든 표현식은 유효한 JavaScript 표현식이며, 적응형 양식 스크립팅 모델 API를 사용합니다. 이러한 표현식은 특정 유형의 값을 반환합니다. 표현식 및 그에 대한 우수 사례에 대한 자세한 내용은 적응형 양식 표현식.

XFA를 적응형 양식으로 전환할 때에도 XSD 양식 데이터 모델을 사용하여 적응형 양식을 만드는 것이 좋습니다.

사용자의 정보를 캡처하는 적응형 양식에 이러한 필드와 패널만 포함하십시오. 정적 콘텐츠를 최소한으로 유지하거나 URL을 사용하여 별도의 창에서 여는 것이 좋습니다.

모든 양식은 특정 용도로 디자인되지만, 대부분의 양식에는 몇 가지 공통 세그먼트가 있습니다. 예를 들어, 개인 세부 사항, 주소, 고용 세부 사항 등이 있습니다. 만들기 적응형 양식 조각 일반적인 양식 요소 및 섹션의 경우 이를 양식에서 사용합니다. 기존 양식의 패널을 조각으로 저장할 수도 있습니다. 조각의 모든 변경 사항은 연관된 모든 적응형 양식에 반영됩니다. 여러 작성자가 양식을 구성하는 서로 다른 조각에서 동시에 작업할 수 있으므로 공동 작성을 촉진합니다.

• 적응형 양식과 유사하게 모든 조각 관련 스타일 및 사용자 지정 스크립트가 조각 컨테이너 대화 상자를 사용하여 클라이언트 라이브러리에 정의된 것이 좋습니다. 또한 외부 객체에 의존하지 않는 자족적 조각을 만들어 보십시오.
• 교차 조각 스크립팅을 사용하지 마십시오. 참조하는 조각 외부에 개체가 있는 경우 해당 개체를 상위 양식의 일부로 만들려고 합니다. 개체가 여전히 다른 조각에 있어야 하는 경우 스크립트에서 해당 이름으로 참조합니다.

자동 저장으로 저장 및 다시 시작 을 사용하여 적응형 양식을 주기적으로 저장하고 사용자가 나중에 다시 방문하여 양식을 완료할 수 있도록 하십시오.

지연을 로드하도록 조각을 구성합니다. 런타임 시 느리게 로드되도록 표시된 조각이 필요한 경우에만 렌더링됩니다. 큰 양식의 로드 시간을 크게 줄입니다. 반복 가능한 패널이 있는 조각에서도 지원됩니다. 자세한 내용은 지연 로드 구성.

• 응답형 격자 레이아웃 또는 첫 번째 패널에서 조각에 대한 레이지 로드를 구성하지 마십시오.
• 파일 첨부 파일 및 약관 구성 요소는 느리게 로드된 조각에서 지원되지 않습니다.
• 지연 로드 패널의 값을 포함 패널을 언로드할 때 해당 값을 사용할 수 있도록 양식의 다른 부분에서 이 값을 사용할 경우 값 전역적으로 사용 으로 표시합니다.
• 조건을 기반으로 표시하거나 숨겨야 하는 조각에 대한 가시성 규칙 작성을 고려하십시오.

AEM Forms은 사전 정의된 데이터 XML 파일에서 데이터를 읽고 적응형 양식의 필드를 미리 채우기 XML 파일의 컨텐츠로 미리 채우기 위한 미리 채우기 서비스를 제공합니다.

미리 채우기 데이터 XML은 적응형 양식과 연결된 양식 모델의 스키마와 호환되어야 합니다.

포함 afBoundedData 및 afUnBoundedData 미리 채우기 XML의 섹션을 추가하여 적응형 양식의 바인딩되지 않은 필드와 필드를 모두 미리 채웁니다.

양식 데이터 모델을 기반으로 하는 적응형 양식의 경우 AEM Forms에서는 기본 양식 데이터 모델 미리 채우기 서비스를 제공합니다. 미리 채우기 서비스는 적응형 양식의 데이터 모델 개체에 대한 데이터 소스를 쿼리하고 양식을 렌더링할 때 필드 값을 미리 채웁니다.

파일, crx, 서비스 또는 http 프로토콜을 사용하여 적응형 양식을 미리 채울 수도 있습니다.

AEM Forms은 적응형 양식을 미리 채우기 위해 OSGi 서비스로 로그인할 수 있는 사용자 지정 미리 채우기 서비스를 지원합니다.

적응형 양식의 기반이 되는 양식 데이터 모델에 따라 다음과 같이 DoR에 대한 템플릿을 구성할 수 있습니다.

• XFA 양식 템플릿: 연결된 XDP 파일을 DoR 템플릿으로 사용합니다.
• XSD 스키마: 적응형 양식에서 사용하는 것과 동일한 XML 스키마를 사용하는 관련 XFA 템플릿을 사용합니다.
• 없음: 자동 생성된 DoR을 사용합니다.

적응형 양식 편집기의 레코드 문서 탭에서 머리글, 바닥글, 이미지, 색상, 글꼴 등을 바로 구성합니다.

사용 DoRService 프로그래밍 방식으로 DoR을 생성합니다.

DoR에서 숨김 필드를 제외합니다.

사용 afAcceptLang 다른 로케일에서 DoR을 보기 위한 요청 매개 변수입니다.

양식에서 일반적인 요소에 적용형 양식 조각을 사용하고 조각을 현지화합니다. 조각을 한 번 현지화하면 현지화된 조각이 사용되는 모든 양식에 반영됩니다.

새 구성 요소 추가 또는 현지화된 양식의 스크립트 적용과 같은 수정 사항은 자동으로 현지화되지 않습니다. 따라서 현지화 주기를 여러 번 사용하지 않으려면 양식을 현지화하기 전에 완료해야 합니다.

사용 afAcceptLang 요청 매개 변수를 사용하여 브라우저 로케일을 재정의하고 지정된 로케일에서 양식을 렌더링합니다. 예를 들어 다음 URL은 브라우저 설정에 지정된 로케일에 관계없이 일본어 로케일로 양식을 렌더링합니다.

https://[*server*]:[*port*]/<*contextPath*>/<*formFolder*>/<*formName*>.html?wcmmode=disabled&afAcceptLang=ja

AEM Forms은 현재 영어(en), 스페인어(es), 프랑스어(fr), 이탈리아어(it), 독일어(de), 일본어(ja), 포르투갈어(pt-BR), 중국어(zh-CN), 중국어(zh-TW) 및 한국어(ko-KR) 로케일로 적응형 양식 컨텐츠의 지역화를 지원합니다. 그러나 런타임 시 적응형 양식에 대한 새 로케일 지원을 추가할 수 있습니다. 자세한 내용은 적응형 양식 현지화를 위한 새 로케일 지원.

Felix 콘솔에서 JavaScript 및 CSS에 대한 HTML 클라이언트 라이브러리 압축을 활성화합니다.

모든 클라이언트 라이브러리 캐시 /etc.clientlibs/fd 및 AEM Dispatcher의 모든 추가 사용자 지정 클라이언트 라이브러리를 사용하여 게시된 양식의 응답성과 보안을 개선합니다. 자세한 내용은 Dispatcher.

캐시 안 함 /content/forms/af/ 및 /content/dam/formsanddocuments/* 경로. 적응형 양식 캐싱 구성에 대한 자세한 내용은 다음을 참조하십시오. 적응형 양식 캐싱.

웹 서버 압축 모듈을 통해 HTML을 활성화합니다. 자세한 내용은 AEM Forms 서버의 성능 조정.

큰 양식에 대한 요청당 호출 수를 늘립니다. 자세한 내용은 크고 복잡한 양식의 성능 최적화.

만들기 오류 처리기에 표시된 사용자 지정 오류 페이지.

보안 AEM Forms 서버.

• 사용 nosamplecontent 프로덕션 서버에 배포된 샘플 컨텐츠 및 샘플 사용자가 없도록 모드를 실행합니다. 자세한 내용은 프로덕션 준비 모드에서 AEM 실행.

힙의 크기를 최소 8GB로 유지합니다. 기타 설정에 대해서는 AEM Forms 서버의 성능 조정.

서비스 수준 작업을 실행하려면 관리자 세션 대신 서비스 사용자 세션을 사용합니다. 자세한 내용은 서비스 인증.

초안 데이터 저장: 적응형 양식의 초안 기능을 사용하는 경우 SPI(사용자 지정 서비스 제공 인터페이스)를 구현하여 초안 데이터를 데이터베이스와 같은 보다 안전한 저장소에 저장해야 합니다. 자세한 내용은 초안 및 제출 구성 요소와 데이터베이스를 통합하기 위한 샘플.

제출 데이터 저장: Form Portal 제출 저장소를 사용하는 경우 사용자 지정 SPI를 구현하여 제출 데이터를 데이터베이스에 저장해야 합니다. 자세한 내용은 초안 및 제출 구성 요소와 데이터베이스를 통합하기 위한 샘플 샘플 통합을 참조하십시오.

또한 양식 데이터와 첨부 파일을 보안 저장소에 저장하는 사용자 지정 제출 작업을 작성할 수 있습니다. 자세한 내용은 적응형 양식에 대한 사용자 지정 제출 작업 쓰기 추가 정보.