사용자 지정 도구 모음 레이아웃 만들기

도구 모음 레이아웃

적응형 양식을 만들 때 양식의 도구 모음 레이아웃을 지정할 수 있습니다. 도구 모음 레이아웃은 양식에 있는 도구 모음의 명령과 레이아웃을 정의합니다.

도구 모음 레이아웃은 복잡한 JavaScript 및 CSS 코드로 구동되는 클라이언트측 처리에 주로 의존합니다. 이 코드의 제공을 구성하고 최적화하는 것은 복잡한 문제가 될 수 있습니다. 이 문제를 지원하기 위해 AEM에서는 클라이언트 측 코드를 리포지토리에 저장하고, 카테고리로 구성하고, 각 코드 카테고리를 클라이언트에 제공할 시기와 방법을 정의할 수 있는 클라이언트측 라이브러리 폴더를 제공합니다. 그런 다음 클라이언트측 라이브러리 시스템은 최종 웹 페이지에서 올바른 링크를 만들어 올바른 코드를 로드합니다. 자세한 내용은 AEM에서 클라이언트 측 라이브러리가 작동하는 방식을 참조하십시오.

도구 모음의 샘플 레이아웃

적응형 양식은 즉시 사용 가능한 레이아웃 세트를 제공합니다.

즉시 사용 가능한 도구 모음 레이아웃

또한 사용자 지정 도구 모음 레이아웃을 만들 수 있습니다.

다음 절차에서는 도구 모음에 세 가지 작업이 표시되고 도구 모음의 드롭다운 목록에 다른 작업이 표시되는 사용자 지정 도구 모음을 만드는 절차에 대해 자세히 설명합니다.

첨부된 컨텐츠 패키지에는 아래에 설명된 전체 코드가 들어 있습니다. 컨텐츠 패키지를 설치한 후 /content/forms/af/CustomLayoutDemo.html 을 열어 사용자 지정 도구 모음 레이아웃 데모를 봅니다.

CustomToolbarLayoutDemo.zip

FileDemo
사용자 지정 도구 모음 레이아웃 가져오기

사용자 지정 도구 모음 레이아웃을 만들려면

1. 사용자 정의 도구 모음 레이아웃을 유지할 폴더를 만듭니다. 예:

   /apps/customlayout/toolbar.

   사용자 지정 레이아웃을 만들려면 다음 폴더에서 사용할 수 있는 기본 제공 도구 모음 레이아웃 중 하나를 사용(및 사용자 지정)할 수 있습니다.

   /libs/fd/af/layouts/toolbar

   예를 들어 /libs/fd/af/layouts/toolbar 폴더의 mobileFixedToolbarLayout 노드를 /apps/customlayout/toolbar 폴더로 복사합니다.

   또한 toolbarCommon.jsp 를 /apps/customlayout/toolbar 폴더에 복사합니다.

   노트

   사용자 정의 레이아웃을 유지하기 위해 만드는 폴더는 apps 폴더와 함께 만들 수 있습니다.

2. 복사된 노드 mobileFixedToolbarLayout의 이름을 customToolbarLayout.로 변경합니다

   또한 노드에 대한 관련 설명을 제공합니다. 예를 들어, 노드의 jcr:description을 도구 모음​에 대한 사용자 지정 레이아웃​으로 변경합니다.

   노드의 guideComponentType 속성은 레이아웃 유형을 결정합니다. 이 경우 레이아웃 유형은 도구 모음이므로 도구 모음 레이아웃 선택 드롭다운에 표시됩니다.

   

   관련 설명이 있는 노드

   새 사용자 지정 도구 모음 레이아웃은 적응형 양식 도구 모음 대화 상자 구성에 표시됩니다.

   

   사용 가능한 도구 모음 레이아웃 목록

   노트

   이전 단계에서 업데이트된 설명이 레이아웃 드롭다운 목록에 표시됩니다.

3. 이 사용자 지정 도구 모음 레이아웃을 선택하고 확인을 클릭합니다.

   /etc/customlayout 노드에 clientlib(javascript 및 css)을 추가하고 customToolbarLayout.jsp에 clientlib의 참조를 포함합니다.

   

   customToolbarLayout.css 파일의 경로

   샘플 customToolbarLayout.jsp:

   <%@include file="/libs/fd/af/components/guidesglobal.jsp" %>
   <cq:includeClientLib categories="customtoolbarlayout" />
   <c:if test="${isEditMode}">
           <cq:includeClientLib categories="customtoolbarlayoutauthor" />
   </c:if>
   <div class="guidetoolbar mobileToolbar mobilecustomToolbar" data-guide-position-class="guide-element-hide">
       <div data-guide-scroll-indicator="true"></div>
       <%@include file="../toolbarCommon.jsp" %>
   </div>
   

   노트

   레이아웃에 대한 guidetoolbar 클래스를 추가합니다. 도구 모음에 대한 기본 스타일 지정은 guidtoolbar 클래스와 관련하여 정의됩니다.

   샘플 toolBarCommon.jsp:

   <%@taglib prefix="fn" uri="https://java.sun.com/jsp/jstl/functions"%>
   <%--------------------
   This code iterates over all the tool bar items using the guideToolbar bean.
   If the number of toolbar items are more than 3, then we create a dropdown menu using bootstrap for other actions present in the toolbar.
   In both desktop and mobile devices, the layout is different.
   ---------------------------------%>
   
   <c:forEach items="${guideToolbar.items}" var="toolbarItem" varStatus="loop">
       <c:choose>
         <c:when test="${loop.index gt 2}">
      <c:choose>
       <c:when test="${loop.index eq 3}">
                     <div class="btn-group dropdown">
                       <button type="button" class="btn btn-primary dropdown-toggle label" data-toggle="dropdown">Actions <span class="caret"></code></button>
                       <button type="button" class="btn btn-primary dropdown-toggle icon" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></code></button>
             <ul class="dropdown-menu" role="menu">
                           <li>
                               <div id="${toolbarItem.id}_guide-item">
                                 <sling:include path="${toolbarItem.path}" resourceType="${toolbarItem.resourceType}"/>
                              </div>
                           </li>
                           <c:if test="${loop.index eq (fn:length(guideToolbar.items)-1)}">
                                </ul>
                                </div>
                           </c:if>
       </c:when>
       <c:when test="${loop.index eq (fn:length(guideToolbar.items)-1)}">
                          <li>
                                     <div id="${toolbarItem.id}_guide-item">
                                         <sling:include path="${toolbarItem.path}" resourceType="${toolbarItem.resourceType}"/>
                                     </div>
                           </li>
                       </ul>
                     </div>
   
       </c:when>
       <c:otherwise>
         <li>
          <div id="${toolbarItem.id}_guide-item">
           <sling:include path="${toolbarItem.path}" resourceType="${toolbarItem.resourceType}"/>
          </div>
         </li>
       </c:otherwise>
      </c:choose>
         </c:when>
         <c:otherwise>
     <div id="${toolbarItem.id}_guide-item">
           <sling:include path="${toolbarItem.path}" resourceType="${toolbarItem.resourceType}"/>
        </div>
         </c:otherwise>
    </c:choose>
   </c:forEach>
   

   clientlib 노드 내에 있는 CSS입니다.

   .mobilecustomToolbar .dropdown {
       display: inline-block;
   }
   
   .mobilecustomToolbar .dropdown {
       float: right;
   }
   
   .mobilecustomToolbar .dropdown > button {
      padding: 6px 12px;
   }
   
   .mobilecustomToolbar .dropdown .guideFieldWidget, .mobilecustomToolbar .dropdown .guideFieldWidget button {
       width: 100%;
   }
   
   .mobilecustomToolbar .dropdown .caret{
       border-bottom: 6px solid;
       border-right: 6px solid transparent;
       border-left: 6px solid transparent;
    border-top: transparent;
   }
   
   .mobilecustomToolbar .dropdown-menu{
    top: auto;
    bottom: 100%;
   }
   
   .mobilecustomToolbar .btn-group {
    vertical-align: super;
   }
   
   .mobilecustomToolbar .glyphicon {
    font-size: 24px;
   }
   
   @media (max-width: 767px){
   
    .mobilecustomToolbar .dropdown .guideButton .iconButton-icon {
      display: none;
       }
   
       .mobilecustomToolbar .dropdown .guideButton .iconButton-label {
      display: inline-block;
       }
   
       .mobilecustomToolbar .dropdown .guideButton button {
      background-color: #013853;
       }
   
    .mobilecustomToolbar .btn-group {
     vertical-align: top;
    }
   
   }
   

사용자 정의 레이아웃 도구 모음의 데스크탑 보기