Creazione di temi di moduli adattivi personalizzati creating-custom-adaptive-form-themes

Creare un nodo di tipo cq:ClientLibraryFolder sotto il nodo /apps.

Ad esempio, crea il seguente nodo:

/apps/myAfThemes/forestTheme

Aggiungere una proprietà stringa multivalore categories al nodo e impostarne il valore in modo appropriato.

Impostare ad esempio la proprietà su: af.theme.forest.

Aggiungere due cartelle, less e css, e un file css.txt al nodo creato nel passaggio 1:

• Cartella less: contiene i file delle variabili less in cui si definiscono le variabili less e less mixins utilizzate per gestire gli stili .css.

  Questa cartella è costituita da less file di variabili, less file mixin, less file che definiscono gli stili utilizzando mixin e variabili. Tutti questi file less vengono quindi importati in styles.less.

• csscartella: contiene i file .css in cui si definiscono gli stili statici da utilizzare nel tema.

Meno file di variabili: si tratta dei file in cui si definiscono o si sovrascrivono le variabili utilizzate per definire gli stili CSS.

I moduli adattivi forniscono variabili pronte all’uso definite nei seguenti .less file:

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

I moduli adattivi forniscono anche variabili di terze parti definite in:

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

È possibile utilizzare le variabili less fornite con i moduli adattivi, ignorarle o creare nuove variabili less.

Esempio di variabili di sostituzione:

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

Per ignorare le less variabili:

1. Importa variabili modulo adattive predefinite:

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

2. Quindi importa il file meno che include le variabili sovrascritte.

Esempio di nuove definizioni di variabili:

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

Meno file mixin: È possibile definire le funzioni che accettano le variabili come argomenti. L’output di queste funzioni è rappresentato dagli stili risultanti. Utilizza questi mixin in stili diversi, per evitare di ripetere gli stili CSS.

I moduli adattivi forniscono mixin predefiniti definiti in:

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

I moduli adattivi forniscono anche mixin di terze parti definiti in:

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

Definizione mixin di esempio:

.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;
}

File Styles.less: Utilizzare questo file per includere tutti i file less (variabili, mixin, stili) che è necessario utilizzare nella libreria client.

Nel seguente file styles.less di esempio, l'istruzione di importazione può essere inserita in qualsiasi ordine.

Le istruzioni per importare i seguenti file .less sono obbligatorie:

• 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 contiene i percorsi dei file .css da scaricare per la libreria.

Ad esempio:

#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

Per includere il tema creato in per creare una sezione del tema del modulo adattivo, crea una pagina personalizzata di tipo cq:Component.

Ad esempio /apps/myAfCustomizations/myAfPages/forestPage

1. Aggiungere una proprietà sling:resourceSuperType e impostarne il valore come fd/af/components/page/base.

   

2. Per utilizzare un tema nella pagina, devi aggiungere al nodo un file library.jsp che esegue l’override.

   Puoi quindi importare il tema creato in Per creare una sezione del tema per moduli adattivi in questo articolo.

   Il seguente frammento di codice di esempio importa il tema af.theme.forest.

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

3. Facoltativo: nella pagina personalizzata, eseguire l'override di header.jsp, footer.jsp e body.jsp, come richiesto.

Creare un modello personalizzato (ad esempio: /apps/myAfCustomizations/myAfTemplates/forestTemplate) il cui jcr:content punta alla pagina personalizzata creata nel passaggio precedente (ad esempio: myAfCustomizations/myAfPages/forestPage).

Crea un modulo adattivo utilizzando il modello creato nel passaggio precedente. L’aspetto del modulo adattivo è definito dal tema creato nella sezione Per creare un tema per modulo adattivo di questo articolo.