Erstellen eines benutzerdefinierten Symbolleistenlayouts

Erstellen Sie einen Ordner für Ihre benutzerdefinierten Symbolleistenlayouts. Beispiel:

/apps/customlayout/toolbar.

Um ein benutzerdefiniertes Layout zu erstellen, können Sie eines der standardmäßigen Symbolleistenlayouts verwenden (und anpassen), die im folgenden Ordner verfügbar sind:

/libs/fd/af/layouts/toolbar

Kopieren Sie zum Beispiel den Knoten mobileFixedToolbarLayout aus dem Ordner /libs/fd/af/layouts/toolbar in den Ordner /apps/customlayout/toolbar.

Kopieren Sie außerdem „toolbarCommon.jsp“ in den Ordner /apps/customlayout/toolbar/.

HINWEIS

Der Ordner, den Sie für die benutzerdefinierten Layouts erstellen, muss mit dem Ordner apps erstellt werden.
Benennen Sie den kopierten Knoten mobileFixedToolbarLayout in customToolbarLayout. um.

Geben Sie außerdem eine relevante Beschreibung für den Knoten an. Beispiel: Ändern Sie jcr:description des Knotens in Benutzerdefiniertes Layout für Symbolleiste.

Die Eigenschaft guideComponentType des Knotens legt den Layouttyp fest. In diesem Fall ist der Layouttyp „Symbolleiste“. Daher wird er in der Auswahl-Dropdown-Liste für das Symbolleistenlayout angezeigt.

Ein Knoten mit relevanter Beschreibung

Das neue benutzerdefinierte Symbolleistenlayout wird im Dialogfeld Adaptive Form Toolbar (Symbolleiste des adaptiven Formulars) angezeigt.

Liste der verfügbaren Symbolleistenlayouts

HINWEIS

Die Beschreibung, die im vorherigen Schritt aktualisiert wurde, wird in der Dropdown-Liste „Layout“ angezeigt.

Wählen Sie dieses benutzerdefinierte Symbolleistenlayout und klicken Sie auf „OK“.

Fügen Sie clientlib (javascript und css) im Knoten /etc/customlayout hinzu und nehmen Sie den Verweis der clientlib in customToolbarLayout.jsp auf.

Pfad der Datei customToolbarLayout.css

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

HINWEIS

Fügen Sie die guidetoolbar-Klasse für das Layout hinzu. Die standardmäßigen Stile für die Symbolleiste werden im Hinblick auf die guidetoolbar-Klasse definiert.

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

Die CSS innerhalb des Knotens 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;
 }

}

HINWEIS

Die Beschreibung, die im vorherigen Schritt aktualisiert wurde, wird in der Dropdown-Liste „Layout“ angezeigt.

Abbildung: Desktop-Ansicht der Symbolleiste mit benutzerdefiniertem Layout