Aangepaste aangepaste formulierthema's maken creating-custom-adaptive-form-themes

CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.
CAUTION
AEM Forms levert de Thema-editor mogelijkheden om adaptieve formulieren te maken en te wijzigen thema's. Voer de stappen uit die in dit artikel worden vermeld, slechts als u van een versie hebt bevorderd die niet heeft Thema-editor en u hebt een bestaande investering in thema's die met Minder/CSS dossiers (pre-thema redacteursmethode) worden gecreeerd.

Vereisten prerequisites

Adaptief formulierthema adaptive-form-theme

An adaptief formulierthema Dit is een AEM clientbibliotheek die u gebruikt om de stijlen (look and feel) voor een adaptief formulier te definiëren.

U maakt een adaptieve sjabloon en past u het thema toe op de sjabloon. Vervolgens gebruikt u deze aangepaste sjabloon om een adaptieve vorm.

Adaptief formulier en clientbibliotheek

Een adaptief formulierthema maken to-create-an-adaptive-form-theme

NOTE
De volgende procedure wordt beschreven gebruikend steekproefnamen voor AEM voorwerpen zoals knoop, eigenschappen, en omslagen.
Als u deze stappen met de namen uitvoert, zou het resulterende malplaatje aan de volgende momentopname gelijkaardig moeten lijken:

Adaptieve formulieropname met houtthemas
Afbeelding: Forest Theme Sample

  1. Een knooppunt van het type maken cq:ClientLibraryFolder onder de /appsknooppunt.

    Maak bijvoorbeeld het volgende knooppunt:

    /apps/myAfThemes/forestTheme

  2. Een multi-getaxeerde tekenreekseigenschap toevoegen categories naar het knooppunt en stel de waarde ervan op de juiste manier in.

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

    Opname van CRX-opslagplaats

  3. Twee mappen toevoegen less en cssen een bestand css.txt op het knooppunt dat in stap 1 is gemaakt:

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

      Deze map bestaat uit less variabele bestanden, less bestanden mixen, 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 variabelen: 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 deze variabelen ook overschrijven of nieuwe, minder variabelen maken.

    note note
    NOTE
    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:

    code language-none
    @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;
    

    Als u de opdracht lessvariabelen:

    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:

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

    Minder gemengde 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:

    code language-none
    .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;
    }
    

    Stijlen.bestand: Gebruik dit bestand om alle bestanden op te nemen die u in de clientbibliotheek nodig hebt (variabelen, mixins, stijlen).

    In het volgende voorbeeld styles.less , kan de importinstructie 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
    code language-none
    @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%;
    }
    

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

    Bijvoorbeeld:

    code language-none
    #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
    
    note note
    NOTE
    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 adaptieve vorm gebruiken to-use-a-theme-in-an-adaptive-form

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

  1. Het thema dat is gemaakt in een adaptief formulierthema maken sectie, een aangepaste pagina van het type maken cq:Component.

    Bijvoorbeeld, /apps/myAfCustomizations/myAfPages/forestPage

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

      Opname van CRX-opslagplaats

    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.

      Het volgende voorbeeldcodefragment importeert het af.theme.forest thema.

      code language-none
      <%@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 de aangepaste pagina die in de vorige stap is gemaakt (bijvoorbeeld: myAfCustomizations/myAfPages/forestPage).

    Opname van CRX-opslagplaats

  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.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da