Creación de un diseño de barra de herramientas personalizado

Diseños de la barra de herramientas

Cuando se crea un formulario adaptable, se puede especificar una presentación de barra de herramientas para el formulario. La presentación de la barra de herramientas define los comandos y la presentación de la barra de herramientas del formulario.

El diseño de la barra de herramientas se basa en gran medida en el procesamiento del lado del cliente impulsado por código CSS y JavaScript complejo. Organizar y optimizar el servicio de este código puede ser un problema complicado. Para ayudar a resolver este problema, AEM proporciona carpetas de biblioteca del lado del cliente, que le permiten almacenar el código del lado del cliente en el repositorio, organizarlo en categorías y definir cuándo y cómo se debe servir cada categoría de código al cliente. A continuación, el sistema de biblioteca del lado del cliente se encarga de producir los vínculos correctos en la página web final para cargar el código correcto. Para obtener información detallada, consulte Cómo funcionan las bibliotecas del lado del cliente en AEM.

Diseño de muestra de la barra de herramientas
Figura: Diseño de muestra de la barra de herramientas

Los formularios adaptables proporcionan un conjunto de diseños integrados:

Diseños de la barra de herramientas disponibles para usar
Figura: Diseños de la barra de herramientas disponibles para usar

Además, puede crear un diseño de barra de herramientas personalizado.

El siguiente procedimiento detalla los pasos para crear una barra de herramientas personalizada que muestre tres acciones en la barra de herramientas y las demás acciones en una lista desplegable de la barra de herramientas.

El paquete de contenido adjunto contiene todo el código que se describe a continuación. Después de instalar el paquete de contenido, abra /content/forms/af/CustomLayoutDemo.html para ver la demostración de diseño de la barra de herramientas personalizada.

CustomToolbarLayoutDemo.zip

Obtener archivo
Mostrar diseño de barra de herramientas personalizado

Creación de un diseño de barra de herramientas personalizado

  1. Cree una carpeta para mantener los diseños personalizados de la barra de herramientas. Por ejemplo:

    /apps/customlayout/toolbar.

    Para crear un diseño personalizado, puede utilizar (y personalizar) uno de los diseños de la barra de herramientas predeterminados disponibles en la siguiente carpeta:

    /libs/fd/af/layouts/toolbar

    Por ejemplo, copie el mobileFixedToolbarLayout desde el nodo /libs/fd/af/layouts/toolbar a la /apps/customlayout/toolbar carpeta.

    Además, copie toolbarCommon.jsp en el /apps/customlayout/toolbar carpeta.

    NOTA

    La carpeta que cree para mantener los diseños personalizados se puede crear con la variable apps carpeta.

  2. Cambie el nombre del nodo copiado. mobileFixedToolbarLayout, a customToolbarLayout.

    Además, proporcione una descripción relevante para el nodo. Por ejemplo, cambie jcr:description del nodo a Diseño personalizado para la barra de herramientas.

    La variable guideComponentType la propiedad del nodo determina el tipo de diseño. En este caso, el tipo de diseño es la barra de herramientas, por lo que aparece en la lista desplegable de selección de diseño de la barra de herramientas.

    Un nodo con una descripción relevante

    Un nodo con una descripción relevante

    El nuevo diseño personalizado de la barra de herramientas se muestra en la sección Barra de herramientas de formulario adaptable configuración del cuadro de diálogo.

    Lista de diseños de barra de herramientas disponibles

    Lista de diseños de barra de herramientas disponibles

    NOTA

    La descripción actualizada en el paso anterior se muestra en la lista desplegable Diseño .

  3. Seleccione este diseño de barra de herramientas personalizado y haga clic en Aceptar.

    Agregue clientlib (javascript y css) en la variable /etc/customlayout e incluya la referencia de la clientlib en la variable customToolbarLayout.jsp.

    Ruta del archivo customToolbarLayout.css

    Ruta del archivo customToolbarLayout.css

    Muestra 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>
    
    NOTA

    Añada la clase de guía para el diseño. El estilo predeterminado de la barra de herramientas se define con respecto a la clase de guía.

    Muestra 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>
    

    CSS presente dentro del nodo clientlib:

    .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;
     }
    
    }
    
NOTA

La descripción actualizada en el paso anterior se muestra en la lista desplegable Diseño .

Vista de escritorio de la barra de herramientas de diseño personalizado
Figura: Vista de escritorio de la barra de herramientas de diseño personalizado

En esta página