ツールバーレイアウト

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

ツールバーレイアウトは、複雑な JavaScript と CSS コードによるクライアントサイドのプロセッシングに大きく依存しています。このコードの提供を管理し最適化する作業は複雑な問題を伴うことがあります。この問題に対処するために、AEM はクライアントサイドライブラリフォルダーを提供しています。これによりユーザーはクライアントサイドコードをリポジトリに保存したり、それをカテゴリに分類したり、各カテゴリのコードをいつどのようにクライアントに提供するかを定義したりできます。クライアントサイドライブラリスステムは、最終的 Web ページで正しいコードをロードするための正しいリンクを生成する作業を担当します。詳細については、「AEM におけるクライアントサイドライブラリの機能」を参照してください。

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

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

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

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

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

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

ダウンロード

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

  1. カスタムツールバーレイアウトを入れておくフォルダーを作成します。例えば、次のように指定します。

    /apps/customlayout/toolbar

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

    /libs/fd/af/layouts/toolbar

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

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

    注意:

    カスタムレイアウトを保存するために作成したフォルダーは、アプリフォルダーで作成されたものでなければなりません。

  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" %>
    <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="http://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;            
    	}    
    
    }

注意:

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー