Criação de layout personalizado da barra de ferramentas

Layouts da barra de ferramentas

Ao criar um formulário adaptável, é possível especificar um layout da barra de ferramentas para o formulário. O layout da barra de ferramentas define os comandos e o layout da barra de ferramentas no formulário.

O layout da barra de ferramentas depende muito do processamento no lado do cliente impulsionado por códigos complexos de JavaScript e CSS. Organizar e otimizar a veiculação desse código pode ser um problema complicado. Para ajudar a lidar com esse problema, o AEM fornece Pastas de biblioteca do lado do cliente, que permitem armazenar o código do lado do cliente no repositório, organizá-lo em categorias e definir quando e como cada categoria de código deve ser apresentada ao cliente. O sistema de biblioteca do lado do cliente cuida da produção dos links corretos na página da Web final para carregar o código correto. Para obter informações detalhadas, consulte Como as bibliotecas do lado do cliente funcionam no AEM.

Layout de exemplo da barra de ferramentas

Os formulários adaptáveis fornecem um conjunto de layouts prontos para uso:

Layouts de barra de ferramentas disponíveis prontos para uso

Além disso, é possível criar um layout personalizado da barra de ferramentas.

O procedimento a seguir detalha as etapas para criar uma barra de ferramentas personalizada que exibe três ações na barra de ferramentas e as outras ações em uma lista suspensa na barra de ferramentas.

O pacote de conteúdo anexado contém o código inteiro descrito abaixo. Após instalar o pacote de conteúdo, abra /content/forms/af/CustomLayoutDemo.html para exibir a demonstração do layout personalizado da barra de ferramentas.

CustomToolbarLayoutDemo.zip

Obter arquivo
Layout da barra de ferramentas personalizada de demonstração

Para criar um layout personalizado da barra de ferramentas

1. Crie uma pasta para manter os layouts personalizados da barra de ferramentas. Por exemplo:

   /apps/customlayout/toolbar.

   Para criar um layout personalizado, você pode usar (e personalizar) um dos layouts predefinidos da barra de ferramentas disponíveis na seguinte pasta:

   /libs/fd/af/layouts/toolbar

   Por exemplo, copie a variável mobileFixedToolbarLayout nó a partir do /libs/fd/af/layouts/toolbar para /apps/customlayout/toolbar pasta.

   Além disso, copie a barra de ferramentasCommon.jsp para o /apps/customlayout/toolbar pasta.

   OBSERVAÇÃO

   A pasta que você cria para manter os layouts personalizados pode ser criada com o apps pasta.

2. Renomeie o nó copiado, mobileFixedToolbarLayoutpara customToolbarLayout.

   Além disso, forneça uma descrição relevante para o nó. Por exemplo, altere jcr:description do nó para Layout personalizado para a barra de ferramentas.

   O guideComponentType a propriedade do nó determina o tipo de layout. Nesse caso, o tipo de layout é a barra de ferramentas, portanto, ele aparece na lista suspensa de seleção do layout da barra de ferramentas.

   

   Um nó com descrição relevante

   O novo layout personalizado da barra de ferramentas é exibido no Barra de ferramentas de formulário adaptável configuração da caixa de diálogo.

   

   Lista de layouts disponíveis da barra de ferramentas

   OBSERVAÇÃO

   A descrição atualizada na etapa anterior é exibida na lista suspensa Layout .

3. Selecione este layout personalizado da barra de ferramentas e clique em OK.

   Adicione clientlib (javascript e css) na /etc/customlayout e incluir a referência da clientlib na customToolbarLayout.jsp.

   

   Caminho do arquivo customToolbarLayout.css

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

   OBSERVAÇÃO

   Adicione a classe da barra de ferramentas de guia para o layout. O estilo pronto para uso da barra de ferramentas é definido em relação à classe da barra de ferramentas de guidetolbar.

   Amostra 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"></code></button>
                       <button type="button" class="btn btn-primary dropdown-toggle icon" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></code></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>
   

   O CSS presente no nó 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;
    }
   
   }
   

Exibição de desktop da barra de ferramentas de layout personalizada

Recursos do Business.Adobe.com

Personalized Communications Mobile Forms Web Content Management Content Management Digital Rights Management Content Management System