创建自定义工具栏布局

工具栏布局

创建自适应表单时,可以为表单指定工具栏布局。 工具栏布局定义表单上的命令和工具栏的布局。

工具栏布局使用时严重依赖由复杂的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-Hans" %>
    <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}”>


</c:if>
</c:when>
<c:when test=“${loop.index eq (fn:length(guideToolbar.items)-1)}”>


  • <sling:include path=“${toolbarItem.path}” resourceType=“${toolbarItem.resourceType}”/>



  •    </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:
    
    ```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;
     }
    
    }
    
    注意

    在上一步中更新的说明将显示在布局下拉列表中。

    自定义布局工具栏的桌面视图

    自定义布局工具栏的桌面视图

    On this page

    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