建立自訂工具列版面

工具列版面

當您建立最適化表單時,可以指定表單的工具列版面。 工具欄佈局定義了窗體中工具欄的命令和佈局。

工具列版面配置使用時,主要依賴由複雜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.css檔案的路徑

    範例 customToolbarLayout.jsp:

    <%@include file="/libs/fd/af/components/guidesglobal.jsp?lang=zh-Hant" %>
    <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>
    
    注意

    新增版面的指南工具列類別。 工具列的出廠設定樣式是相對於指導工具欄類定義的。

    範例 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"></span></button>
                        <button type="button" class="btn btn-primary dropdown-toggle icon" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></span></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;            
     }    
    
    }
    
注意

「版面」下拉式清單中會顯示在上一步驟中更新的說明。

自訂版面工具列的案頭檢
視圖:自 訂版面工具列的案頭檢視

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now