Criação de layout personalizado da barra de ferramentas creating-custom-toolbar-layout
Layouts da barra de ferramentas layout
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.
Figura: Layout de exemplo da barra de ferramentas
Os formulários adaptáveis fornecem um conjunto de layouts prontos para uso:
Figura: 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 layout-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.note note NOTE A pasta que você cria para manter os layouts personalizados pode ser criada com o apps
pasta. -
Renomeie o nó copiado,
mobileFixedToolbarLayout
paracustomToolbarLayout.
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
note note NOTE A descrição atualizada na etapa anterior é exibida na lista suspensa Layout . -
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 nacustomToolbarLayout.jsp
.Caminho do arquivo customToolbarLayout.css
Amostra
customToolbarLayout.jsp
:code language-php <%@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>
note note NOTE 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
:code language-php <%@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>
O CSS presente no nó clientlib:
code language-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; } }
Figura: Exibição de desktop da barra de ferramentas de layout personalizada