アダプティブフォームのカスタムレイアウトコンポーネントの作成

前提条件

カスタムレイアウトの作成および使用を可能にするレイアウトについての知識が必要です。「パネルレイアウトの変更」を参照してください。

アダプティブフォームのパネルレイアウトのコンポーネント

アダプティブフォームのパネルレイアウトのコンポーネントは、ユーザーインターフェイスに考慮して、パネル内のアダプティブフォームのコンポーネントをどのようにレイアウトするかをコントロールします。

カスタムパネルレイアウトの作成

  1. /crx/deに移動します。
  2. パネルレイアウトを/libs/fd/af/layouts/panel(例:tabbedPanelLayout)から/apps(例:/apps/af-custom-layout)にコピーします。
  3. コピーしたレイアウトの名前をcustomPanelLayoutに変更します。 ノードqtipjcr:descriptionのプロパティを変更します。 例えば、Custom layout - Toggle tabsに変更します。

qtip

カスタムパネルレイアウトの CRX DE スナップショット

メモ

プロパティguideComponentTypeを値fd/af/layouts/panelに設定すると、レイアウトがパネルレイアウトになります。

  1. 新しいレイアウトの下のファイルtabbedPanelLayout.jspの名前をcustomPanelLayout.jspに変更します。

  2. 新しいスタイルおよび動作を追加するには、etc ノードでクライアントライブラリを作成します。例えば、/etc/af-custom-layout-clientlibで、ノードclient-libraryを作成します。 このノードにカテゴリのプロパティ af.panel.custom を設定します。このプロパティには次の .css ファイルと .js ファイルがあります。

    /** CSS defining new styles used by custom layout **/
    
    .menu-nav {
        background-color: rgb(198, 38, 76);
        height: 30px;
     width: 30px;
     font-size: 2em;
     color: white;
        -webkit-transition: -webkit-transform 1s;  /* For Safari 3.1 to 6.0 */
     transition: transform 1s;
    }
    
    .tab-content {
     border: 1px solid #08b1cf;
    }
    
    .custom-navigation {
        -webkit-transition: width 1s, height 1s, -webkit-transform 1s;  /* For Safari 3.1 to 6.0 */
     transition: width 1s, height 1s, transform 1s;
    }
    
    .panel-name {
        padding-left: 30px;
        font-size: 20px;
    }
    
    @media (min-width: 992px) {
     .nav-close {
      width: 0px;
        }
    }
    
    @media (min-width: 768px) and (max-width: 991px) {
     .nav-close {
      height: 0px;
        }
    }
    
    @media (max-width: 767px) {
     .menu-nav, .custom-navigation {
         display: none;
        }
    }
    
    /** function for toggling the navigators **/
    var toggleNav = function () {
    
        var nav = $('.custom-navigation');
        if (nav) {
            nav.toggleClass('nav-close');
        }
    }
    
    /** function to populate the panel title **/
    $(window).on('load', function() {
        if (window.guideBridge) {
            window.guideBridge.on("elementNavigationChanged",
            function (evntName, evnt) {
                        var activePanelSom = evnt.newText,
                            activePanel = window.guideBridge._guideView.getView(activePanelSom);
                        $('.panel-name').html(activePanel.$itemNav.find('a').html());
                    }
            );
        }
    });
    
  3. 外観と動作をより良くするために、client libraryを含めることができます。

    さらに、.jps ファイルに含まれるスクリプトのパスを更新します。例えば、customPanelLayout.jspファイルを次のように更新します。

    <%-- jsp encapsulating navigator container and panel container divs --%>
    
    <%@include file="/libs/fd/af/components/guidesglobal.jsp?lang=ja"%>
    <cq:includeClientLib categories="af.panel.custom"/>
    <div>
        <div class="row">
            <div class="col-md-2 col-sm-2 hidden-xs menu-nav glyphicon glyphicon-align-justify" onclick="toggleNav();"></div>
            <div class="col-md-10 col-sm-10 hidden-xs panel-name"></div>
        </div>
        <div class="row">
            <div class="col-md-2 hidden-xs guide-tab-stamp-list custom-navigation">
                <cq:include script = "/apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp" />
            </div>
            <div  class="col-md-10">
                <c:if test="${fn:length(guidePanel.description) > 0}">
                    <div class="<%=GuideConstants.GUIDE_PANEL_DESCRIPTION%>">
                        ${guide:encodeForHtml(guidePanel.description,xssAPI)}
                            <cq:include script="/libs/fd/af/components/panel/longDescription.jsp?lang=ja"/>
                    </div>
                </c:if>
                <cq:include script = "/apps/af-custom-layout/customPanelLayout/panelContainer.jsp"/>
            </div>
        </div>
    </div>
    

    /apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jspファイル:

    <%-- jsp governing the navigation part --%>
    
    <%@include file="/libs/fd/af/components/guidesglobal.jsp?lang=ja"%>
    <%@ page import="com.adobe.aemds.guide.utils.StyleUtils" %>
    <%-- navigation tabs --%>
    <ul id="${guidePanel.id}_guide-item-nav-container" class="tab-navigators tab-navigators-vertical in"
        data-guide-panel-edit="reorderItems" role="tablist">
        <c:forEach items="${guidePanel.items}" var="panelItem">
            <c:set var="isNestedLayout" value="${guide:hasNestablePanelLayout(guidePanel,panelItem)}"/>
            <li id="${panelItem.id}_guide-item-nav" title="${guide:encodeForHtmlAttr(panelItem.navTitle,xssAPI)}" data-path="${panelItem.path}" role="tab" aria-controls="${panelItem.id}_guide-item">
                <c:set var="panelItemCss" value="${panelItem.cssClassName}"/>
                <% String panelItemCss = (String) pageContext.getAttribute("panelItemCss");%>
                <a data-guide-toggle="tab" class="<%= StyleUtils.addPostfixToClasses(panelItemCss, "_nav") %> guideNavIcon nested_${isNestedLayout}">${guide:encodeForHtml(panelItem.navTitle,xssAPI)}</a>
                <c:if test="${isNestedLayout}">
                    <guide:initializeBean name="guidePanel" className="com.adobe.aemds.guide.common.GuidePanel"
                        resourcePath="${panelItem.path}" restoreOnExit="true">
                        <sling:include path="${panelItem.path}"
                                       resourceType="/apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp?lang=ja"/>
                    </guide:initializeBean>
                </c:if>
                <em></em>
            </li>
        </c:forEach>
    </ul>
    

    更新された/apps/af-custom-layout/customPanelLayout/panelContainer.jsp:

    <%-- jsp governing the panel content --%>
    
    <%@include file="/libs/fd/af/components/guidesglobal.jsp?lang=ja"%>
    
    <div id="${guidePanel.id}_guide-item-container" class="tab-content">
        <c:if test="${guidePanel.hasToolbar && (guidePanel.toolbarPosition == 'Top') }">
            <sling:include path="${guidePanel.toolbar.path}"/>
        </c:if>
    
    <c:forEach items="${guidePanel.items}" var="panelItem">
        <div class="tab-pane" id="${panelItem.id}_guide-item" role="tabpanel">
            <c:set var="isNestedLayout" value="${guide:hasNestablePanelLayout(guidePanel,panelItem)}"/>
            <c:if test="${isNestedLayout}">
                <c:set var="guidePanelResourceType" value="/apps/af-custom-layout/customPanelLayout/panelContainer.jsp?lang=ja" scope="request"/>
            </c:if>
            <sling:include path="${panelItem.path}" resourceType="${panelItem.resourceType}"/>
        </div>
    </c:forEach>
    <c:if test="${guidePanel.hasToolbar && (guidePanel.toolbarPosition == 'Bottom')}">
        <sling:include path="${guidePanel.toolbar.path}"/>
    </c:if>
    </div>
    
  4. オーサリングモードでアダプティブフォームを開きます。定義したパネルレイアウトがパネルレイアウト設定用のリストに追加されます。

    パネルレイアウトリストに表示されたカスタムパネルレイアウトアダプティブフォームの スクリーンショットカスタムパネル レイアウトを使用したスクリーンショットカスタムレイアウトの切り替え機能を示したスクリーンショット

カスタムパネルレイアウトとカスタムパネルレイアウトを使用したアダプティブフォームのサンプル ZIP ファイル。

ファイルを入手

このページ

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