您查看的帮助内容对应的版本是:

Prerequisite

Knowledge of layouts, which enables you to create/use a custom layout. See Changing Panel Layout.

Adaptive Form Panel Layout component

The Adaptive Form Panel Layout component controls the way adaptive form components are laid out in a panel relative to the user interface.

Creating a custom panel layout

  1. Navigate to the location /crx/de.

  2. Copy a panel layout from the location /libs/fd/af/layouts/panel (for example, tabbedPanelLayout) to /apps (for example, /apps/af-custom-layout).

  3. Rename the layout you copied to customPanelLayout. Change the properties of the nodes qtip and jcr:description. For example, change them to Custom layout - Toggle tabs.

    qtip
    Custom Panel Layout CRX DE Snapshot

    注意:

    Setting the property guideComponentType to the value fd/af/layouts/panel determines that the layout is a panel-layout.

  4. Rename the file tabbedPanelLayout.jsp under the new layout to customPanelLayout.jsp.

  5. To introduce new styles and behavior, create a client library under the etc node. For example, at the location /etc/af-custom-layout-clientlib, create the node client-library. Let the node have the categories property af.panel.custom. It has following .css and .js files:

    /** 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());
                    }
            );
        }
    });
  6. To enhance the appearance and behavior, you can include a client library.

    In addition, update the paths of included scripts in .jsp files. For example, update the customPanelLayout.jsp file as follows:

    <%-- jsp encapsulating navigator container and panel container divs --%>
    
    <%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
    <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"/>
                    </div>
                </c:if>
                <cq:include script = "/apps/af-custom-layout/customPanelLayout/panelContainer.jsp"/>
            </div>
        </div>
    </div>

    The /apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp file:

    <%-- jsp governing the navigation part --%>
    
    <%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
    <%@ 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"/>
                    </guide:initializeBean>
                </c:if>
                <em></em>
            </li>
        </c:forEach>
    </ul>

    The updated /apps/af-custom-layout/customPanelLayout/panelContainer.jsp:

    <%-- jsp governing the panel content --%>
    
    <%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
    
    <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" 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>
  7. Open an adaptive form in the Authoring mode. The panel-layout you defined is added to the list for configuring panel layouts.

    Custom Panel layout shows up in the panel layout list
    Screen shot of adaptive form, using custom panel layout
    Screenshot demonstrating toggle functionality of the custom layout

下载

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略