创建自定义工具栏布局

工具栏布局

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

工具栏布局使用的方式严重依赖由复杂的JavaScript和CSS代码驱动的客户端处理。 组织和优化此代码的服务可能是一个复杂的问题。 为了帮助解决此问题,AEM提供了客户端库文件夹,用于将客户端代码存储在存储库中,将其组织成各个类别,并定义何时以及如何将每个类别的代码提供给客户端。 然后,客户端库系统会负责在最终网页中生成正确的链接,以加载正确的代码。 有关详细信息,请参阅客户端库在AEM中的工作方式。

工具栏布局示
例图: 工具栏布局示例

自适应表单提供一组现成的布局:

可用的现成工具栏布局图:
工具栏布局可用的现成布局

此外,您还可以创建自定义工具栏布局。

以下过程详细介绍了创建自定义工具栏的步骤,该工具栏在工具栏中显示三个操作,在工具栏的下拉列表中显示其他操作。

附加的内容包包含下面描述的整个代码。 安装内容包后,打开/content/forms/af/CustomLayoutDemo.html以查看自定义工具栏布局演示。

CustomToolbarLayoutDemo.zip

获取FileDemo自
定义工具栏布局

创建自定义工具栏布局

  1. 创建文件夹以维护自定义工具栏布局。 例如:

    /apps/customlayout/toolbar

    要创建自定义布局,您可以使用(和自定义)以下文件夹中提供的一个现成工具栏布局:

    /libs/fd/af/layouts/toolbar

    例如,将mobileFixedToolbarLayout节点从/libs/fd/af/layouts/toolbar文件夹复制到/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" %>
    <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;            
     }    
    
    }
    
注意

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

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

在此页面上