Condition préalable

Connaissance des dispositions qui vous permet de créer et utiliser une disposition personnalisée. Voir Modification de la disposition de panneau.

Composant de disposition de panneau de formulaire adaptatif

Le composant de disposition de panneau de formulaire adaptatif contrôle la disposition des composants d'un formulaire adaptatif dans un panneau par rapport à l'interface utilisateur.

Création d'une disposition de panneau personnalisée

  1. Accédez à l'emplacement /crx/de.

  2. Copiez une disposition de l'emplacement  /libs/fd/af/layouts/panel (par exemple, tabbedPanelLayout) dans /apps (par exemple,/apps/af-custom-layout).

  3. Renommez la disposition que vous avez copiée en customPanelLayout. Modifiez les propriétés des nœuds qtipt et jcr:description. Par exemple, remplacez-les par Disposition personnalisée - Onglets de basculement.

    qtip
    Instantané de la disposition de panneau personnalisée CRX DE

    Remarque :

    La définition de la propriété guideComponentType sur la valeur fd/af/layouts/panel indique que la disposition est une disposition de panneau.

  4. Renommez le fichier tabbedPanelLayout.jsp sous la nouvelle disposition en customPanelLayout.jsp.

  5. Pour ajouter de nouveaux styles et un nouveau comportement, créez une bibliothèque cliente sous le nœud etc. Par exemple, créez à l'emplacement/etc/af-custom-layout-clientlib le nœud client-library. Attribuez au nœud la propriété de catégories af.panel.custom. Elle comporte les fichiers .css et .js suivants :

    /** 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. Pour améliorer l'aspect et le comportement, vous pouvez inclure une bibliothèque cliente.

    De plus, mettez à jour les chemins d'accès aux scripts inclus dans les fichiers .jsp. Par exemple, mettez à jour le fichier customPanelLayout.jsp comme suit :

    < container="container"  encapsulating="encapsulating"  divs="divs"  navigator="navigator"  jsp="jsp"  panel="panel"  and="and"  ="_--" >
    
    <include file="/libs/fd/af/components/guidesglobal.jsp"  _="_" >
    <includeclientlib categories="af.panel.custom" ></includeclientlib>
    <div>
        <div class="row" >
            <div onclick="toggleNav();"  class="col-md-2 col-sm-2 hidden-xs menu-nav glyphicon glyphicon-align-justify" ></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" >
                <include script="/apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp" ></include>
            </div>
            <div class="col-md-10" >
                <if test="${fn:length(guidePanel.description) &gt; 0}" >
                    <div class="&lt;%=GuideConstants.GUIDE_PANEL_DESCRIPTION%&gt;" >
                        ${guide:encodeForHtml(guidePanel.description,xssAPI)}
                            <include script="/libs/fd/af/components/panel/longDescription.jsp" ></include>
                    </div>
                </if>
                <include script="/apps/af-custom-layout/customPanelLayout/panelContainer.jsp" ></include>
            </div>
        </div>
    </div></include></>

    Fichier /apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp :

    < governing="governing"  navigation="navigation"  jsp="jsp"  ="_--"  part="part"  the="the" >
    
    <include file="/libs/fd/af/components/guidesglobal.jsp"  _="_" >
    <_ page="page"  _="_"  import="com.adobe.aemds.guide.utils.StyleUtils" >
    < navigation="navigation"  tabs="tabs"  ="_--" >
    <ul id="${guidePanel.id}_guide-item-nav-container"  edit="reorderItems"  role="tablist"  class="tab-navigators tab-navigators-vertical in" ><foreach var="panelItem"  items="${guidePanel.items}" >
            <set var="isNestedLayout"  value="${guide:hasNestablePanelLayout(guidePanel,panelItem)}" ></set>
            <li path="${panelItem.path}"  controls="${panelItem.id}_guide-item"  id="${panelItem.id}_guide-item-nav"  role="tab"  title="${guide:encodeForHtmlAttr(panelItem.navTitle,xssAPI)}" >
                <set var="panelItemCss"  value="${panelItem.cssClassName}" ></set>
                <_ string="string"  panelitemcss="(String)"  pagecontext.getattributepanelitemcss="pagecontext.getattributepanelitemcss" >
                <a _nav="_nav"  toggle="tab"  _="_"  shape="rect"  class="&lt;%= StyleUtils.addPostfixToClasses(panelItemCss," > guideNavIcon nested_${isNestedLayout}"&gt;${guide:encodeForHtml(panelItem.navTitle,xssAPI)}</a>
                <if test="${isNestedLayout}" >
                    <initializebean classname="com.adobe.aemds.guide.common.GuidePanel"  name="guidePanel"  resourcepath="${panelItem.path}"  restoreonexit="true" >
                        <include resourcetype="/apps/af-custom-layout/customPanelLayout/defaultNavigatorLayout.jsp"  path="${panelItem.path}" ></include>
                    </initializebean>
                </if>
                <em></em>
            </_></li>
        </foreach></ul></></_></include></>

    Fichier /apps/af-custom-layout/customPanelLayout/panelContainer.jsp mis à jour :

    < governing="governing"  jsp="jsp"  content="content"  panel="panel"  ="_--"  the="the" >
    
    <include file="/libs/fd/af/components/guidesglobal.jsp"  _="_" >
    
    <div id="${guidePanel.id}_guide-item-container"  class="tab-content" >
        <if test="${guidePanel.hasToolbar &amp;&amp; (guidePanel.toolbarPosition == 'Top') }" >
            <include path="${guidePanel.toolbar.path}" ></include>
        </if>
    
    <foreach var="panelItem"  items="${guidePanel.items}" >
        <div id="${panelItem.id}_guide-item"  role="tabpanel"  class="tab-pane" >
            <set var="isNestedLayout"  value="${guide:hasNestablePanelLayout(guidePanel,panelItem)}" ></set>
            <if test="${isNestedLayout}" >
                <set var="guidePanelResourceType"  scope="request"  value="/apps/af-custom-layout/customPanelLayout/panelContainer.jsp" ></set>
            </if>
            <include resourcetype="${panelItem.resourceType}"  path="${panelItem.path}" ></include>
        </div>
    </foreach>
    <if test="${guidePanel.hasToolbar &amp;&amp; (guidePanel.toolbarPosition == 'Bottom')}" >
        <include path="${guidePanel.toolbar.path}" ></include>
    </if>
    </div></include></>
  7. Ouvrez un formulaire adaptative en mode création. La disposition de panneau que vous avez définie est ajoutée à la liste pour la configuration des dispositions de panneau.

    La disposition de panneau personnalisée apparaît dans la liste des dispositions de panneau.
    Capture d'écran du formulaire adaptatif utilisant la disposition de panneau personnalisée
    Capture d'écran montrant la fonctionnalité de basculement de la disposition personnalisée

Telechargement

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne