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

Skapa en nod av typen cq:ClientLibraryFolder under noden /apps.

Skapa till exempel följande nod:

/apps/myAfThemes/forestTheme

Lägg till en strängegenskap categories med flera värden i noden och ange dess värde korrekt.

Ange till exempel egenskapen till: af.theme.forest.

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

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

  Den här mappen består av less variabelfiler, less mixin-filer, less filer som definierar format med hjälp av mixins och variabler. Alla dessa less filer importeras sedan i styles.less.

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

Mindre variabelfiler: Det här är de filer där du definierar eller åsidosätter variabler som används för att definiera CSS-format.

Adaptiva formulär innehåller färdiga variabler som definierats 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 variablerna less som tillhandahålls med adaptiva formulär, åsidosätta dessa variabler eller skapa nya less-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;

Så här åsidosätter du 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 blandade filer: Du kan definiera funktioner som accepterar variabler som argument. Utdata för dessa funktioner är de resulterande formaten. Använd dessa blandningar i olika format så att du slipper upprepa CSS-formaten.

Adaptiva formulär innehåller färdiga 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 less-filer (variabler, mixins, styles) som du måste använda i klientbiblioteket.

I följande exempelfil styles.less kan importsatsen 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%;
}

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

Om du vill ta med temat som skapats i för att skapa ett anpassat formulärtemaskapar du en anpassad sida av typen cq:Component.

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 kan sedan importera temat som skapats i Skapa ett adaptivt formulärtemaavsnitt i den här artikeln.

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

   code language-jsp
   <%@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 anpassad 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 avsnittet Att skapa ett adaptivt formulärtema i den här artikeln.