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

ツールバーレイアウト

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

ツールバーレイアウトは、複雑な 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}">
                      <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>
    

    CSS は 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;            
     }    
    
    }
    
メモ

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

カスタムレイアウト
ツールバーのデスクトップ表示図:カスタムレイアウトツールバーの デスクトップ表示

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now