创建自定义工具栏布局

工具栏布局

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

工具栏布局使用的方式严重依赖由复杂的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.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;
    }
   
   }
   

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

Business.Adobe.com 资源

Cms Cloud Embedded Charts Document Generation Managed Cloud Version History Web Content Management