Skapa anpassade adaptiva formulärteman creating-custom-adaptive-form-themes

Skapa en nod av typen cq:ClientLibraryFolder under /appsnod.

Skapa till exempel följande nod:

/apps/myAfThemes/forestTheme

Lägga till en flervärdessträngsegenskap categories till noden och ange dess värde korrekt.

Ställ till exempel in egenskapen på: af.theme.forest.

Lägg till två mappar, less och cssoch en fil css.txt till noden som skapades i steg 1:

• less mapp: Innehåller less variabelfiler där du definierar less variabler och less mixins som används för att hantera css-format.

  Mappen består av less variabelfiler, less mixin filer, less filer som definierar format med hjälp av blandningar och variabler. Alla dessa mindre filer importeras sedan i styles.less.

• cssmapp: Innehåller de css-filer i vilka du definierar statiska format som ska användas i temat.

Mindre variabelfiler: Detta är filerna, där du definierar eller åsidosätter variablerna som används för att definiera CSS-format.

Adaptiva formulär innehåller OTB-variabler som definieras i följande .less-filer:

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

Anpassningsbara formulär innehåller även variabler från tredje part som definieras i:

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

Du kan använda mindre variabler som finns i adaptiva formulär, åsidosätta dessa variabler eller skapa nya mindre variabler.

Exempel på åsidosättningsvariabler:

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

Åsidosätta lessvariabler:

1. Importera standardvariabler för anpassningsbara formulär:

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

2. Importera sedan den mindre filen som innehåller åsidosatta variabler.

Exempel på nya variabeldefinitioner:

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

Mindre filer: Du kan definiera de funktioner som accepterar variabler som argument. Utdata för dessa funktioner är de resulterande formaten. Använd dessa blandningar i olika format för att undvika att CSS-formaten upprepas.

Adaptiva former innehåller OTB-blandningar som definieras i:

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

Anpassningsbara formulär innehåller även tredjepartsmixar som definieras i:

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

Samplingsdefinition:

.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: Använd den här filen för att inkludera alla färre filer (variabler, mixins, styles) som du behöver använda i klientbiblioteket.

I följande exempel styles.less -filen kan importprogramsatsen placeras i vilken ordning som helst.

Programsatserna för att importera följande .less-filer är obligatoriska:

• 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%;
}

The css.txt innehåller sökvägarna till css-filer som ska hämtas för biblioteket.

Till exempel:

#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

Inkludera temat som skapats i skapa ett anpassat formulärtema avsnitt, skapa en anpassad sida av typen cq:Component.

Till exempel, /apps/myAfCustomizations/myAfPages/forestPage

1. Lägg till en sling:resourceSuperType egenskap och ange dess värde som fd/af/components/page/base.

   

2. Om du vill använda ett tema på sidan måste du lägga till en åsidosatt fil library.jsp i noden.

   Du importerar sedan temat som skapats i Skapa ett anpassat formulärtemaavsnitt i den här artikeln.

   Följande exempelkodfragment importerar af.theme.forest tema.

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

3. Valfritt: På den anpassade sidan åsidosätter du header.jsp, footer.jsp och body.jsp efter behov.

Skapa en egen mall (till exempel: /apps/myAfCustomizations/myAfTemplates/forestTemplate) vars jcr:content pekar på en anpassad sida som skapades i föregående steg (till exempel: myAfCustomizations/myAfPages/forestPage).

Skapa ett adaptivt formulär med hjälp av mallen som skapades i föregående steg. Utseendet och känslan hos det adaptiva formuläret definieras av det tema som skapas i Skapa ett adaptivt formulärtemaavsnitt i den här artikeln.