새로운 Granite UI 필드 구성 요소 만들기

Granite UI는 양식에 사용할 수 있도록 디자인된 다양한 구성 요소를 제공합니다.이러한 필드를 Granite UI 어휘의 fields​라고 합니다. 표준 Granite 양식 구성 요소는 다음 아래에서 사용할 수 있습니다.

/libs/granite/ui/components/foundation/form/*

노트

이러한 [granite UI] 양식 필드는 구성 요소 대화 상자에 사용되므로 특히 유용합니다.

노트

필드에 대한 자세한 내용은 Granite UI 설명서를 참조하십시오.

Granite UI Foundation 프레임워크를 사용하여 Granite 구성 요소를 개발 및/또는 확장합니다. 여기에는 두 가지 요소가 있습니다.

  • 서버측:

    • 기본 구성 요소 컬렉션

      • foundation - 모듈형, 합성, 레이아웃, 재사용 가능
      • 구성 요소 - Sling 구성 요소
    • 애플리케이션 개발에 도움이 되는 도움말

  • client-side:

    • Hypermedia 기반 UI를 통해 일반적인 상호 작용 패턴을 얻기 위해 몇 가지 단어(즉, HTML 언어 확장)를 제공하는 clientlibs 컬렉션

일반 Granite UI 구성 요소 field은(는) 관심 있는 두 개의 파일로 구성됩니다.

  • init.jsp:제네릭 처리를 처리합니다.필드를 렌더링할 때 필요한 양식 값을 레이블 지정, 설명 및 제공합니다.
  • render.jsp:여기서 필드의 실제 렌더링이 수행되고 사용자 정의 필드에 대해 재정의해야 합니다.에 포함된 항목 init.jsp

자세한 내용은 Granite UI documentation - Field를 참조하십시오.

예를 보려면 다음을 참조하십시오.

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

노트

이 메커니즘은 JSP, i18n 및 XSS를 사용하기 때문에 기본적으로 제공되지 않습니다. 이것은 Strings를 국제화하고 탈출해야 한다는 것을 의미합니다. 다음 디렉토리에는 표준 인스턴스의 일반 필드가 포함되어 있으며 이러한 필드를 참조로 사용할 수 있습니다.

/libs/granite/ui/components/foundation/form directory

구성 요소에 대한 서버측 스크립트 만들기

사용자 지정된 필드는 구성 요소에 대한 마크업을 제공하는 render.jsp 스크립트만 재정의해야 합니다. JSP(렌더링 스크립트)를 마크업에 대한 래퍼로 간주할 수 있습니다.

  1. sling:resourceSuperType 속성을 사용하여 상속할 새 구성 요소를 만듭니다.

    /libs/granite/ui/components/foundation/form/field

  2. 스크립트 재정의:

    render.jsp

    이 스크립트에서 클라이언트가 생성된 요소와 상호 작용하는 방법을 알 수 있도록 하이퍼미디어 마크업(즉, 하이퍼미디어 비용이 포함된 강화 마크업)을 생성해야 합니다. 이렇게 하려면 Granite UI 서버측 코딩 스타일을 따라야 합니다.

    사용자 정의할 때 다음을 사용하여 요청에서 양식 값(init.jsp에서 초기화됨)을 읽기만 하면 이(가) 이행해야 하는 유일한 계약이 됩니다.

    // Delivers the value of the field (read from the content)
    ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
    vm.get("value, String.class"); 
    

    자세한 내용은 기본 Granite UI 필드 구현을 참조하십시오.예: /libs/granite/ui/components/foundation/form/textfield

    노트

    현재, JSP는 HTL에서 쉽게 구현되지 않는 구성 요소 간에 정보를 전달하는 데 있어 선호하는 스크립팅 방법입니다. HTL에서는 JSP가 자주 사용됩니다.

구성 요소에 대한 클라이언트 라이브러리 만들기

구성 요소에 특정 클라이언트측 비헤이비어를 추가하려면:

  1. cq.authoring.dialog 범주의 clientlib을 만듭니다.

  2. cq.authoring.dialog 범주의 clientlib을 만들고 그 안에 JS/ CSS를 정의합니다.

    clientlib 내에서 JS/ CSS 정의

    노트

    현재 Granite UI는 JS 비헤이비어를 추가하는 데 직접 사용할 수 있는 즉시 사용 가능한 리스너나 후크를 제공하지 않습니다. 따라서 구성 요소에 JS 비헤이비어를 더 추가하려면 태그 생성 중에 구성 요소에 할당해야 하는 사용자 지정 클래스에 JS 후크를 구현해야 합니다.

이 페이지에서는