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

Diseños de la barra de herramientas

Al crear un formulario adaptable, 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.

Los usos del diseño de la barra de herramientas dependen en gran medida del 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 solucionar 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 proporcionar cada categoría de código al cliente. El sistema de biblioteca 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
herramientasFigura: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
de inmediato:diseños de la barra de herramientas disponibles de inmediato

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

El procedimiento siguiente 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 en la barra de herramientas.

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

CustomToolbarLayoutDemo.zip

Obtener diseño
de barra de herramientas personalizado de FileDemo

Para crear 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 integrados disponibles en la carpeta siguiente:

    /libs/fd/af/layouts/toolbar

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

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

    NOTA

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

  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 toolbar.

    La propiedad guideComponentType del nodo determina el tipo de diseño. En este caso, el tipo de diseño es 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 de la barra de herramientas personalizada se muestra en la configuración del cuadro de diálogo Barra de herramientas de formulario adaptable.

    Lista de los diseños de barra de herramientas disponibles

    Lista de los 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.

    Añada clientlib (javascript y css) en el nodo /etc/customlayout e incluya la referencia de clientlib en el customToolbarLayout.jsp.

    Ruta del archivo customToolbarLayout.css

    Ruta del archivo customToolbarLayout.css

    Muestra customToolbarLayout.jsp:

    <%@include file="/libs/fd/af/components/guidesglobal.jsp?lang=es" %>
    <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 la maquetación. 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 en el 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 personalizadaFigura:vista de escritorio de la barra de herramientas de diseño personalizada

En esta página

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