カスタムツールバーレイアウトの作成

ツールバーレイアウト

アダプティブフォームの作成時に、フォームのツールバーレイアウトを指定できます。ツールバーレイアウトは、フォーム上のツールバーのコマンドとレイアウトを定義します。

ツールバーレイアウトは、複雑な JavaScript と CSS コードによるクライアントサイドのプロセッシングに大きく依存しています。このコードの提供を編成および最適化することが厄介な問題となることがあります。この問題への対処に役立つように、AEM では、クライアント側ライブラリフォルダーが提供されています。これにより、クライアント側コードをリポジトリに格納し、カテゴリ別に整理して、それぞれのコードカテゴリをクライアントに保存するタイミングと方法を定義することができます。その後、クライアント側ライブラリシステムにより、最終的な Web ページで、正しいコードを読み込むための正しいリンクが作成されます。詳細については、「AEM におけるクライアントサイドライブラリの機能」を参照してください。

ツールバーのサンプルレイアウト

ツールバーのサンプルレイアウト

アダプティブフォームには、購入してすぐに使える一連のレイアウトが含まれています。

直ぐに使用できるツールバーレイアウト

直ぐに使用できるツールバーレイアウト

カスタムのツールバーレイアウトを作成することもできます。

次の手順では、カスタムツールバーを作成する手順を示します。ここでは、3 つのアクションがツールバーに表示され、その他のアクションはツールバーのドロップダウンリストに表示されます。

付属のコンテンツパッケージには、以下に示すコード全体が含まれています。コンテンツパッケージをインストールした後、/content/forms/af/CustomLayoutDemo.htmlを開いてカスタムツールバーレイアウトデモを表示します。

CustomToolbarLayoutDemo.zip

Get
FileDemoカスタムツールバーレイアウト

カスタムツールバーレイアウトを作成するには

  1. カスタムツールバーレイアウトを入れておくフォルダーを作成します。例:

    /apps/customlayout/toolbar

    カスタムレイアウトを作成するには、次のフォルダーに用意されている既成のツールバーレイアウトの 1 つを使用(およびカスタマイズ)できます。

    /libs/fd/af/layouts/toolbar

    例えば、mobileFixedToolbarLayoutノードを/libs/fd/af/layouts/toolbarフォルダーから/apps/customlayout/toolbarフォルダーにコピーします。

    また、toolbarCommon.jspを/apps/customlayout/toolbarフォルダーにコピーします。

    メモ

    カスタムレイアウトを管理するために作成するフォルダーは、appsフォルダーで作成されるものが多くあります。

  2. コピーしたノードmobileFixedToolbarLayoutの名前をcustomToolbarLayout.に変更します

    また、ノードのための適切な説明も与えます。例えば、ノードの jcr:description を​ツールバーのカスタムレイアウト に変更します。

    ノードの guideComponentType プロパティによりレイアウトタイプが決まります。この場合、レイアウトタイプはツールバーなので、ツールバーレイアウト選択ドロップダウンに表示されます。

    適切な説明を付けたノード

    適切な説明を付けたノード

    新しいカスタムツールバーレイアウトは、アダプティブフォームツールバー​ダイアログ設定に表示されます。

    使用可能なツールバーレイアウトのリスト

    使用可能なツールバーレイアウトのリスト

    メモ

    前のステップで更新された説明は、レイアウトドロップダウンリストに表示されます。

  3. このカスタムツールバーレイアウトを選択し、「OK」をクリックします。

    追加clientlib (javascriptとcss)を/etc/customlayoutノードに追加し、clientlibの参照をcustomToolbarLayout.jspに含めます。

    customToolbarLayout.css ファイルのパス

    customToolbarLayout.css ファイルのパス

    サンプル customToolbarLayout.jsp:

    <%@include file="/libs/fd/af/components/guidesglobal.jsp?lang=ja" %>
    <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>
    
    メモ

    レイアウトの guidetoolbar クラスを追加します。ツールバー用の直ちに使用可能なスタイリングは、guidetoolbar クラスに関して定義されます。

    サンプル 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}”>


</c:if>
</c:when>
<c:when test=“${loop.index eq (fn:length(guideToolbar.items)-1)}”>


  • <sling:include path=“${toolbarItem.path}” resourceType=“${toolbarItem.resourceType}”/>



  •    </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 は clientlib ノード内に存在します:
    
    ```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;
     }
    
    }
    
    メモ

    前のステップで更新された説明は、レイアウトドロップダウンリストに表示されます。

    カスタムレイアウトツールバーのデスクトップビュー

    カスタムレイアウトツールバーのデスクトップビュー

    このページ