구성 요소 만들기

구성 요소 확장 예제는 실제로 두 구성 요소로 구성된 주석 시스템을 사용합니다

• 주석 - 페이지에 배치된 구성 요소인 감싸는 주석 시스템입니다.
• 주석 - 게시된 댓글의 인스턴스를 캡처하는 구성 요소입니다.

두 구성 요소를 모두 배치해야 합니다. 특히 게시된 메모의 모양을 사용자 지정할 때 이러한 기능이 적용되어야 합니다.

댓글 구성 요소 만들기

이러한 지침은 구성 요소 브라우저(사이드 킥함)에서 구성 요소를 사용할 수 있도록 Group 이외의 값을 지정합니다..hidden

자동 생성된 JSP 파일의 삭제는 기본 HBS 파일이 대신 사용되기 때문입니다.

1. CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)로 이동합니다.

2. 사용자 정의 응용 프로그램의 위치를 만듭니다.

   • /apps 노드를 선택합니다

     • 사용자 지정 폴더 만들기

   • /apps/custom 노드를 선택합니다

     • 폴더 이름이 지정된 구성 요소 만들기

3. /apps/custom/components 노드를 선택합니다

   • 만들기 > 구성 요소…

     • 레이블: 댓글
     • 제목: 대체 댓글
     • 설명: 대체 댓글 스타일
     • 수퍼 유형: social/commons/components/hbs/comments
     • 그룹: 사용자 지정

   • 다음​을 선택합니다

   • 다음​을 선택합니다

   • 다음​을 선택합니다

   • 확인 선택

4. 방금 생성된 노드를 확장합니다./apps/custom/components/comments

5. 모두 저장 선택

6. comments.jsp 마우스 오른쪽 단추 클릭

7. 삭제 선택

8. 모두 저장 선택

하위 주석 구성 요소 만들기

다음 지침은 상위 구성 요소만 페이지 내에 포함해야 하므로 그룹​을 .hidden로 설정합니다.

자동 생성된 JSP 파일의 삭제는 기본 HBS 파일이 대신 사용되기 때문입니다.

1. /apps/custom/components/comments 노드로 이동합니다.

2. 노드를 마우스 오른쪽 단추로 클릭합니다.

   • 만들기 > 구성 요소… 를 선택합니다.

     • 레이블: 댓글
     • 제목: 대체 주석
     • 설명: 대체 주석 스타일
     • 수퍼 유형: social/commons/components/hbs/comments/comment
     • 그룹: *.hidden*

   • 다음​을 선택합니다

   • 다음​을 선택합니다

   • 다음​을 선택합니다

   • 확인 선택

3. 방금 생성된 노드를 확장합니다./apps/custom/components/comments/comment

4. 모두 저장 선택

5. comment.jsp 마우스 오른쪽 단추 클릭

6. 삭제 선택

7. 모두 저장 선택

기본 HBS 스크립트 복사 및 수정

CRXDE Lite 사용:

• 복사 comments.hbs

  • /libs/social/commons/components/hbs/comments에서
  • 대상 /apps/custom/components/comments

• comments.hbs 편집 대상:

  • data-scf-component 특성 값 변경(~20행):

    • 시작 social/commons/components/hbs/comments
    • 끝 /apps/custom/components/comments

  • 사용자 지정 주석 구성 요소(~75행)를 포함하도록 수정합니다.

    • 바꾸기 {{include this resourceType='social/commons/components/hbs/comments/comment'}}
    • 사용 {{include this resourceType='/apps/custom/components/comments/comment'}}

• 복사 comment.hbs

  • /libs/social/commons/components/hbs/comments/comment에서
  • 대상 /apps/custom/components/comments/comment

• comment.hbs 편집 대상:

  • data-scf-component 속성(~ 라인 19)의 값을 변경합니다.

    • 시작 social/commons/components/hbs/comments/comment
    • 끝 /apps/custom/components/comments/comment

• /apps/custom 노드 선택

• 모두 저장 선택

클라이언트 라이브러리 폴더 만들기

이 클라이언트 라이브러리를 명시적으로 포함해야 하지 않도록 하기 위해 기본 주석 시스템의 clientlib에 대한 카테고리 값을 사용할 수 있습니다( cq.social.author.hbs.comments). 그러나 이 clientlib은 기본 구성 요소의 모든 인스턴스에도 포함됩니다.

CRXDE Lite 사용:

• /apps/custom/components/comments 노드 선택

• 노드 만들기 를 선택합니다.

  • 이름: clientlibs

  • 유형: cq:ClientLibraryFolder

  • 속성 탭에 추가:

    • ​​categories ​​String NameTypeValue cq.social.author.hbs.comments Multi
    • ​​dependencies ​​String NameTypeValue cq.social.scf Multi

• 모두 저장 선택

• /apps/custom/components/comments/clientlibs 노드를 선택한 상태에서 3개의 파일을 만드십시오.

  • 이름: css.txt
  • 이름: js.txt
  • 이름:customexsystem.js

• js.txt의 콘텐츠로 'customcommentsystem.js'를 입력합니다.

• 모두 저장 선택

SCF 모델 및 보기 등록

SCF 구성 요소를 확장(재정의)할 때 resourceType은 다릅니다(오버레이하면 resourceType이 동일하게 유지되도록 /libs 전에 /apps을 통해 검색하는 상대 검색 메커니즘을 사용합니다.). 따라서 사용자 지정 resourceType에 대해 SCF JS 모델을 등록하고 보기를 등록하기 위해 클라이언트 라이브러리에서 JavaScript를 작성해야 합니다.

다음 텍스트를 customcommentsystem.js 의 컨텐츠로 입력합니다.

customexsystem.js

(function($CQ, _, Backbone, SCF) {
    "use strict";

    var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
    var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;

    var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
    var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;

    SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
    SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);

})($CQ, _, Backbone, SCF);

• 모두 저장 선택

앱 게시

게시 환경에서 확장 구성 요소를 경험하려면 사용자 지정 구성 요소를 복제해야 합니다.

한 가지 방법은 다음과 같습니다.

• 전역 탐색에서

  • 도구 > 배포 > 복제​를 선택합니다.
  • 트리 활성화 선택
  • Start Path 을 /apps/custom(으)로 설정
  • Only Modified​의 선택을 취소합니다.
  • 활성화 단추 선택