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

Creeer een knoop van type cq:ClientLibraryFolder onder de /apps knoop.

Maak bijvoorbeeld het volgende knooppunt:

/apps/myAfThemes/forestTheme

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

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

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 variabele bestanden waarin u de less variabelen en less mixins definieert die worden gebruikt om de CSS-stijlen te beheren.

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

• css omslag: Bevat de .css dossiers waarin u de statische stijlen bepaalt die in het thema moeten worden gebruikt.

Minder veranderlijke dossiers: Dit zijn de dossiers waar u de variabelen bepaalt of met voeten treedt die in het bepalen van CSS stijlen worden gebruikt.

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

• /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 van less gebruiken die bij adaptieve formulieren worden geleverd, u kunt deze variabelen overschrijven of u kunt nieuwe variabelen van less 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;

Om de less variabelen 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 mixin dossiers: u kunt de functies bepalen die variabelen als argumenten goedkeuren. De uitvoer van deze functies is de resulterende stijlen. Gebruik deze combinaties in verschillende stijlen, zodat u niet telkens CSS-stijlen hoeft te herhalen.

Adaptieve formulieren bieden buitenste 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

Definitie van monstermix:

.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 Dossier: Gebruik dit dossier om alle less dossiers (variabelen, mengen, stijlen) te omvatten die u in de cliëntbibliotheek moet gebruiken.

In het volgende voorbeeldbestand styles.less kan de instructie import in 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%;
}

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

Om het thema te omvatten dat in ​ wordt gecreeerd om een adaptieve sectie van het vormthema ​ tot stand te brengen, creeer een douanepagina van 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 dat met voeten wordt getreden, aan het knooppunt toevoegen.

   Vervolgens kunt u het thema importeren dat is gemaakt in Een adaptieve sectie voor formulierthema maken van dit artikel.

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

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

3. Facultatief: In de douanepagina, treedt header.jsp, footer.jsp, en body.jsp met voeten, zoals vereist.

Maak een aangepaste sjabloon (bijvoorbeeld: /apps/myAfCustomizations/myAfTemplates/forestTemplate ) waarvan de jcr:content verwijst naar een 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 de sectie Voor het maken van een adaptief formulierthema van dit artikel.