Creazione di un layout della barra degli strumenti personalizzato

Layout della barra degli strumenti

Quando si crea un modulo adattivo, è possibile specificare il layout di una barra degli strumenti per il modulo. Il layout della barra degli strumenti definisce i comandi e il layout della barra degli strumenti sul modulo.

Gli utilizzi del layout della barra degli strumenti dipendono in larga misura dall'elaborazione sul lato client, gestita da codice JavaScript e CSS complessi. L'organizzazione e l'ottimizzazione della gestione di questo codice può essere un problema complicato. Per risolvere il problema, AEM fornisce Cartelle libreria lato client che consentono di memorizzare il codice lato client nell'archivio, organizzarlo in categorie e definire quando e come ciascuna categoria di codice deve essere distribuita al client. Il sistema di libreria lato client si occupa quindi di generare i collegamenti corretti nella pagina Web finale per caricare il codice corretto. Per informazioni dettagliate, consultate Funzionamento delle librerie lato client in AEM.

Esempio di layout della barra degli strumenti​Figura: Esempio di layout della barra degli strumenti

I moduli adattivi forniscono una serie di layout predefiniti:

Layout della barra degli strumenti disponibili ​Figura: Layout della barra degli strumenti disponibili out-of-the-box

È inoltre possibile creare un layout personalizzato per la barra degli strumenti.

La procedura seguente illustra i passaggi necessari per creare una barra degli strumenti personalizzata in cui sono visualizzate tre azioni nella barra degli strumenti e le altre in un elenco a discesa nella barra degli strumenti.

Il pacchetto di contenuti allegato contiene l’intero codice descritto di seguito. Dopo aver installato il pacchetto di contenuti, aprite /content/forms/af/CustomLayoutDemo.html per visualizzare la demo del layout della barra degli strumenti personalizzata.

CustomToolbarLayoutDemo.zip

Ottieni layout barra degli strumenti personalizzato Demo file

Per creare un layout personalizzato della barra degli strumenti

  1. Create una cartella per mantenere i layout personalizzati della barra degli strumenti. Ad esempio:

    /apps/customlayout/toolbar.

    Per creare un layout personalizzato, potete utilizzare (e personalizzare) uno dei layout predefiniti della barra degli strumenti disponibili nella cartella seguente:

    /libs/fd/af/layouts/toolbar

    Ad esempio, copiate il mobileFixedToolbarLayout nodo dalla /libs/fd/af/layouts/toolbar cartella alla /apps/customlayout/toolbar cartella.

    Inoltre, copiate toolbarCommon.jsp nella /apps/customlayout/toolbar cartella.

    Nota

    La cartella creata per mantenere i layout personalizzati molto da creare con la apps cartella.

  2. Rinominare il nodo copiato in mobileFixedToolbarLayout customToolbarLayout.

    Fornire inoltre una descrizione pertinente per il nodo. Ad esempio, modificare jcr:description del nodo in Layout personalizzato per la barra degli strumenti.

    Il tipo di layout è determinato dalla guideComponentType proprietà del nodo. In questo caso, il tipo di layout è barra degli strumenti, per cui viene visualizzato nel menu a discesa di selezione del layout della barra degli strumenti.

    Un nodo con la relativa descrizione

    Un nodo con la relativa descrizione

    Il nuovo layout della barra degli strumenti personalizzata viene visualizzato nella configurazione della finestra di dialogo della barra degli strumenti modulo adattiva.

    Elenco dei layout disponibili per le barre degli strumenti

    Elenco dei layout disponibili per le barre degli strumenti

    Nota

    La descrizione aggiornata nel passaggio precedente viene visualizzata nell'elenco a discesa Layout.

  3. Selezionare il layout personalizzato della barra degli strumenti e fare clic su OK.

    Aggiungi clientlib (javascript e css) nel /etc/customlayout nodo e include il riferimento della clientlib nel customToolbarLayout.jsp.

    Percorso del file customToolbarLayout.css

    Percorso del file customToolbarLayout.css

    Esempi 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

    Aggiungete la classe guidetoolbar per il layout. Lo stile predefinito per la barra degli strumenti è definito in relazione alla classe guidetoolbar.

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

    Il CSS presente nel 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 descrizione aggiornata nel passaggio precedente viene visualizzata nell'elenco a discesa Layout.

Vista desktop della barra degli strumenti​del layout personalizzato Figura: Vista desktop della barra degli strumenti del layout personalizzato

In questa pagina