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

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

Maak bijvoorbeeld het volgende knooppunt:

/apps/myAfThemes/forestTheme

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.

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.

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;

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:

@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:

.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

@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:

#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

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.

   

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.

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).

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.