Aangepaste aangepaste formulierthema's maken

Vereisten

• Kennis van het LESS-framework (Leaner CSS)
• Een clientbibliotheek maken in Adobe Experience Manager
• Een aangepaste formuliersjabloon maken voor het gebruik van het thema dat u maakt

Adaptief formulierthema

Een adaptief formulierthema is een AEM clientbibliotheek waarmee u de stijlen (look and feel) voor een adaptief formulier kunt definiëren.

U maakt een adaptieve sjabloon en past het thema toe op de sjabloon. Vervolgens gebruikt u deze aangepaste sjabloon om een adaptief formulier te maken.

Een adaptief formulierthema maken

momentopname van bosbestandAfbeelding:Voorbeeld van bosthema

1. Creëer een knooppunt van het type cq:ClientLibraryFolder onder het /appsknooppunt.

   Maak bijvoorbeeld het volgende knooppunt:

   /apps/myAfThemes/forestTheme

2. Voeg een multi-getaxeerde koordbezit categories aan de knoop toe en plaats geschikt zijn waarde.

   Stel de eigenschap bijvoorbeeld in op: af.theme.forest.

   

3. Voeg twee mappen, less en css, en een bestand css.txt toe aan het knooppunt dat in stap 1 wordt gemaakt:

   • less map: Bevat de less veranderlijke dossiers waarin u de less variabelen bepaalt en less mixins die worden gebruikt om de .css stijlen te beheren.

     Deze map bestaat uit less variabele bestanden, less gemengde bestanden, less bestanden die stijlen definiëren met behulp van mixins en variabelen. En al deze minder dossiers worden dan ingevoerd in styles.less.

   • cssmap: Bevat de CSS-bestanden waarin u de statische stijlen definieert die in het thema moeten worden gebruikt.

   Minder variabelebestanden: Dit zijn de bestanden waarin u de variabelen definieert of overschrijft die worden gebruikt bij het definiëren van CSS-stijlen.

   Adaptieve formulieren bieden OTB-variabelen die zijn gedefinieerd in de volgende bestanden zonder .less:

   • /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
   • /apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

   Adaptieve formulieren bevatten ook variabelen van derden die zijn gedefinieerd in:

   /apps/clientlibs/fd/af/third-party/less/variables.less

   U kunt de variabelen gebruiken waarvoor minder nodig is, maar u kunt ook deze variabelen overschrijven of nieuwe, minder variabelen maken.

   OPMERKING

   Geef tijdens het importeren van de bestanden van de mindere voorprocessor in de instructie import het relatieve pad van de bestanden op.

   Voorbeeld overschrijvende variabelen:

   @button-background-color: rgb(19, 102, 44);
   @button-border-color: rgb(19, 102, 44);
   @button-border-size: 0px;
   @button-padding: 10px 15px;
   @button-font-color: #ffffff;
   

   Om de lessvariabelen met voeten te treden:

   1. Standaardadaptieve formuliervariabelen importeren:

      /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

   2. Importeer vervolgens het bestand met de waarde Minder, dat overschreven variabelen bevat.

   Voorbeeld van nieuwe definities van variabelen:

   @button-focus-bg-color: rgb(40, 208, 90);
   @button-hover-bg-color: rgb(30, 156, 67);
   

   Minder gecombineerde bestanden: u kunt de functies definiëren die variabelen als argumenten accepteren. De uitvoer van deze functies is de resulterende stijlen. Gebruik deze combinaties in verschillende stijlen om te voorkomen dat CSS-stijlen worden herhaald.

   Adaptieve formulieren bieden OTB-mixen die zijn gedefinieerd in:

   • /apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less

   Aangepaste formulieren bieden ook mengsels van derden, zoals gedefinieerd in:

   • /apps/clientlibs/fd/af/third-party/less/mixins.less

   Bemonsteringsmixterdefinitie:

   .rounded-corners (@radius) {
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     -ms-border-radius: @radius;
     -o-border-radius: @radius;
     border-radius: @radius;
   }
   
   .border(@color, @type, @size) {
      border: @color @size @type;
   }
   

   Styles.less File: Gebruik dit bestand om alle minder bestanden (variabelen, mixins, stijlen) op te nemen die u in de clientbibliotheek moet gebruiken.

   In het volgende voorbeeld van het styles.less-bestand kan de instructie import in elke willekeurige volgorde worden geplaatst.

   De instructies voor het importeren van de volgende .less-bestanden zijn verplicht:

   • globalvariables.less
   • layoutvariables.less
   • components.less
   • layouts.less

   @import "../../../clientlibs/fd/af/guidetheme/common/less/globalvariables.less";
   @import "../../../clientlibs/fd/af/guidetheme/common/less/layoutvariables.less";
   @import "forestTheme-variables";
   @import "../../../clientlibs/fd/af/guidetheme/common/less/components.less";
   @import "../../../clientlibs/fd/af/guidetheme/common/less/layouts.less";
   
   /* custom styles */
   
   .guidetoolbar {
     input[type="button"], button, .button {
       .rounded-corners (@button-radius);
       &:hover {
         background-color: @button-hover-bg-color;
       }
       &:focus {
         background-color: @button-focus-bg-color;
       }
     }
   }
   
   form {
       background-image: url(../images/forest.png);
    background-repeat: no-repeat;
    background-size: 100%;
   }
   

   Het css.txt bevat de paden van CSS-bestanden die voor de bibliotheek moeten worden gedownload.

   Bijvoorbeeld:

   #base=/apps/clientlibs/fd/af/third-party/css
   bootstrap.css
   
   #base=less
   styles.less
   
   #base=/apps/clientlibs/fd/xfaforms/xfalib/css
   datepicker.css
   listboxwidget.css
   scribble.css
   dialog.css
   

   OPMERKING

   Het bestand styles.less is niet verplicht. Dit betekent dat u dit bestand niet hoeft te maken als u geen aangepaste stijlen, variabelen of mixen hebt gedefinieerd.

   Als u echter geen bestand style.less maakt, moet u de commentaarmarkering in het bestand css.txt op de volgende regel verwijderen:

   #base=less

   En becommentariëer de volgende lijn:

   styles.less

Een thema in een aangepaste vorm gebruiken

Nadat u een adaptief formulierthema hebt gemaakt, voert u de volgende stappen uit om dit thema in een adaptieve vorm te gebruiken:

1. Als u het thema wilt opnemen dat is gemaakt in sectie voor het maken van een adaptief formulierthema, maakt u een aangepaste pagina van het type cq:Component.

   Bijvoorbeeld, /apps/myAfCustomizations/myAfPages/forestPage

   1. Voeg een eigenschap sling:resourceSuperType toe en stel de waarde ervan in als fd/af/components/page/base.

      

   2. Als u een thema op de pagina wilt gebruiken, moet u een bestand library.jsp overschrijven aan het knooppunt.

      Vervolgens importeert u het thema dat u hebt gemaakt in Een adaptieve sectie met formulierthema's van dit artikel maken.

      Met het volgende voorbeeldcodefragment wordt het thema af.theme.forest geïmporteerd.

      <%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
      <cq:includeClientLib categories="af.theme.forest"/>
      

   3. Optioneel: Hef op de aangepaste pagina de header.jsp, footer.jsp en de body.jsp op, al naar gelang de vereisten.

2. Een aangepaste sjabloon maken (bijvoorbeeld: /apps/myAfCustomizations/myAfTemplates/forestTemplate) waarvan jcr:content verwijst naar een aangepaste pagina die in de vorige stap is gemaakt (bijvoorbeeld: myAfCustomizations/myAfPages/forestPage).

   

3. Maak een adaptief formulier met de sjabloon die u in de vorige stap hebt gemaakt. De vormgeving van het adaptieve formulier wordt bepaald door het thema dat is gemaakt in Een adaptieve sectie voor formulierthema maken van dit artikel.

Business.Adobe.com-bronnen

Multichannel Communication Ecommerce Integrations Customer Communications Asset Collections Version History Headless Cms