Tutorial

Template

CRXDE

  • CRXDE는 AEM Instance에 직접 접속해야 사용 가능함.

    • 디스패쳐 세팅된 포트는 해당 경로를 deny시킴.

  • Tools > CRXDE Lite 클릭

  • http://[domain]:[port]/crx/de/index.jsp URL의 새 창(또는 새 탭) 생성

    CRXDE


Project create

  1. 좌측 메뉴에서 Root 경로 우클릭...

  2. Create... > Create Project... 클릭

  3. 입력 필드 채우고 Create 클릭

  4. 페이지 확인 : http://[domain]:[port]/content/[Project Name].html


Create

  1. /[Project Name]/templates 폴더 우클릭...

    • 폴더 생성 방법은 별도 가이드 안함.

  2. Create... > Create Template... 클릭

  3. 입력 필드 채우고 Next...

    • Label : 템플릿 노드명 - URL 성격
    • Title : 템플릿 타이틀
    • Resource Type : 템플릿 소스 경로
    • Ranking : 템플릿 정렬 우선순위

  4. 입력 필드 채우고 Next...

    • 템플릿이 노출될 Path를 설정한다.

  5. Next...

    • 템플릿이 특정 템플릿 하위에서 노출되도록 설정한다.

  6. Ok

    • 템플릿 하위에 노출될 템플릿을 설정한다.

  7. Save All (Ctrl + S)

  8. /[Project Name]/components/structure 폴더 우클릭...

  9. Create... > Create Component... 클릭

    • 위 3번에서 Resource Type에서 입력한 경로에 컴퍼넌트를 생성한다.

  10. 입력 필드 채우고 Next...

    • Label : 컴퍼넌트 노드명 - URL 성격
    • Title : 컴퍼넌트 타이틀
    • Super Type : 상속받을 컴퍼넌트 경로
    • Group : 컴퍼넌트 그룹

  11. Next...

    • Is Container : 확인 안됨
    • No Decoration : AEM에서 컴퍼넌트를 DIV로 한번 감싸는 기능을 OFF
    • Cell Name : 확인 안됨
    • Dialog Path : 컴퍼넌트의 다이얼로그 경로 - Default: 컴퍼넌트 하위 dialog node

  12. Next...

    • 특정 컴퍼넌트 하위에서 사용되도록 설정한다.

  13. OK

    • 컴퍼넌트 하위에 사용될 컴퍼넌트를 설정한다.

  14. Save All (Ctrl + S)

  15. 생성된 컴퍼넌트 하위의 jsp 파일 제거

    • 상속받은 컴퍼넌트의 기능을 활용하기 위해 제거되어야 한다.

  16. Save All (Ctrl + S)


Check

  1. http://[domain]:[port]/sites.html/content 페이지 열기

  2. Create > Create Page

  3. Default template 선택 > Next

  4. 입력 필드 채우고 Create

    • Name : URL
    • Title : 페이지명
    • 이 외의 입력 필드는 기획에 따라 기능을 추가하는 부분이다.

  5. Open page

    • AEM의 기본 템플릿을 상속받았으므로 컴퍼넌트 Drag 영역이 나타남을 확인할 수 있다.

Example

  1. 부모 템플릿의 다이얼로그만 상속받는 상태로 만들기

    1. /apps/[Project name]/components/structure/[template-source-name] 하위에 [template-source-name].html 파일 생성

    2. 확인

  2. 현재 페이지 정보 출력하기

    1. [template-source-name].html에 다음 내용 Body에 추가

       <ul>
     <li>Page propertie : ${properties }</li>
     <li>Page properties node path : ${properties.path }</li>
     <li>Page title : ${properties.jcr:title }</li>
     <li>Page template path : ${properties.cq:template }</li>
     <li>Page template source path : ${properties.sling:resourceType }</li>
     <li>Page creator : ${properties.jcr:createdBy }</li>
 </ul>
 <ul>
     <li>Page : ${currentPage }</li>
     <li>Page path : ${currentPage.path }</li>
     <li>Page title : ${currentPage.title }</li>
     <li>Page name(url) : ${currentPage.name }</li>
 </ul>

    2. 확인

  3. Parsys 컴퍼넌트 include하기

    1. [template-source-name].html에 다음 내용 입력

       <!DOCTYPE html>
 <html>
     <head>
         <sly data-sly-include="author.html" />
     </head>
     <body>
         <sly data-sly-use.body="body.js" data-sly-resource="${body.resourcePath @ resourceType='wcm/foundation/components/parsys'}"/>
     </body>
 </html>

    2. 확인

  4. 파일 나누기

    현재 템플릿(또는 컴퍼넌트)를 상속하여 개발될 컴퍼넌트가 필요한 부분만 수정하여 사용할 수 있게 하기 위함

    1. 다음의 구조로 폴더 및 파일 생성

    2. 각 파일의 소스코드 입력

      • home.html

          <!DOCTYPE html>
  <html>
      <sly data-sly-include="partials/head.html" />
      <sly data-sly-include="partials/body.html" />
  </html>

      • patials/body.html

          <!-- BODY -->
  <body>
      <sly data-sly-include="partials/content.html" />
      <sly data-sly-include="partials/footlib.html" />
  </body>
  <!-- //BODY -->

      • patials/content.html

          <!-- CONTENT -->
  <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/parsys'}"/>
  <!-- //CONTENT -->

      • patials/footlib.html

          <!-- FOOTLIB -->
  <sly data-sly-test="${!wcmInit.wcmmode.disabled}">
  <sly data-sly-use.wcmInit="wcm/foundation/components/page/initwcm.js"
        data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"
        data-sly-test="${!wcmInit.wcmmode.disabled && wcmInit.isTouchAuthoring}" data-sly-call="${clientLib.js @ categories='cq.authoring.page'}" />
  <sly data-sly-test="${!wcmInit.wcmmode.disabled && !wcmInit.isTouchAuthoring}" data-sly-call="${clientLib.js @ categories='cq.wcm.edit'}" />
  <script data-sly-test="${!wcmInit.wcmmode.disabled && !wcmInit.isTouchAuthoring}" type="text/javascript">
      (function() {

          var cfg = ${wcmInit.undoConfig @ context='unsafe'};
          cfg.pagePath = "${currentPage.path @ context='uri'}";

          if (CQClientLibraryManager.channelCB() != "touch") {
              cfg.enabled = ${wcmInit.wcmmode.edit @ context="scriptString"};
              CQ.undo.UndoManager.initialize(cfg);
              CQ.Ext.onReady(function() {
                  CQ.undo.UndoManager.detectCachedPage((new Date()).getTime());
              });
          }
      })();

      CQ.WCM.launchSidekick("${currentPage.path @ context='uri'}", {
          propsDialog: "${wcmInit.dialogPath @ context='uri'}",
          locked: ${currentPage.locked @ context="scriptString"}
      });
  </script>
  <!--/* WCM initialization code end */-->
  <sly data-sly-test="${!wcmInit.wcmmode.disabled}" data-sly-call="${clientLib.js @ categories='cq.wcm.foundation-main'}" />
  <!-- //FOOTLIB -->

      • patials/head.html

          <!-- HEAD -->
  <head>
      <sly data-sly-include="partials/headlib.html" />
  </head>
  <!-- //HEAD -->

      • patials/headlib.html 

          <!-- HEADLIB -->
  <sly data-sly-test="${!wcmInit.wcmmode.disabled}">
  <sly data-sly-use.wcmInit="wcm/foundation/components/page/initwcm.js"
        data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"
        data-sly-test="${!wcmInit.wcmmode.disabled && wcmInit.isTouchAuthoring}" data-sly-call="${clientLib.css @ categories='cq.authoring.page'}" />
  <sly data-sly-test="${!wcmInit.wcmmode.disabled && !wcmInit.isTouchAuthoring}" data-sly-call="${clientLib.css @ categories='cq.wcm.edit'}" />

  <!--/* WCM initialization code end */-->
  <sly data-sly-test="${!wcmInit.wcmmode.disabled}" data-sly-call="${clientLib.css @ categories='cq.wcm.foundation-main'}" />
  <!-- //HEADLIB -->

    3. 확인

      • Authoring 화면

      • 소스코드

Exercise

  1. headlib.html과 footlib.html에서 따로 include 되는 CSS와 JS를 headlib.html에서 한번에 include하도록 수정하시오.
  2. Example에서 생성한 템플릿을 상속하여 About me 템플릿을 만드시오.
  3. About me 템플릿의 content.html에 WCMMode edit일 경우에만 노출되는 코드를 아무거나 넣으시오.
  4. About me 템플릿의 body tag안에 타이틀 컴퍼넌트를 include하시오.

results matching ""

    No results matching ""