Creazione di temi di moduli adattivi personalizzati creating-custom-adaptive-form-themes
Prerequisiti prerequisites
- Conoscenza del framework LESS (Leaner CSS)
- Come creare una libreria client in Adobe Experience Manager
- Creazione di un modello di modulo adattivo per utilizzare il tema creato
Tema modulo adattivo adaptive-form-theme
Un tema modulo adattivo è una libreria client AEM che puoi utilizzare per definire gli stili (look and feel) di un modulo adattivo.
Crea un’ modello adattivo e applica il tema al modello. Puoi quindi utilizzare questo modello personalizzato per creare un’ modulo adattivo.
Per creare un tema per moduli adattivi to-create-an-adaptive-form-theme
Figura: Esempio di tema foresta
-
Creare un nodo di tipo
cq:ClientLibraryFolder
sotto/apps
nodo.Ad esempio, crea il seguente nodo:
/apps/myAfThemes/forestTheme
-
Aggiungere una proprietà stringa multivalore
categories
sul nodo e impostarne il valore in modo appropriato.Ad esempio, imposta la proprietà su:
af.theme.forest
. -
Aggiungi due cartelle,
less
ecss
e un filecss.txt
al nodo creato nel passaggio 1:-
less
cartella: contieneless
file di variabili in cui definireless
variabili eless mixins
utilizzati 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. E tutti questiless
I file vengono quindi importati in styles.less. -
css
cartella: contiene i file .css in cui si definiscono gli stili statici da utilizzare nel tema.
Meno file variabili: questi sono i file in cui definisci o sostituisci le variabili utilizzate nella definizione degli 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
less
variabili fornite con i moduli adattivi, è possibile ignorare queste variabili o crearne di nuoveless
variabili.note note NOTE Durante l'importazione dei file del pre-processore meno, nell'istruzione di importazione specificare il percorso relativo dei file. Esempio di variabili di sostituzione:
code language-css @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
less
Variabili:-
Importa variabili modulo adattive predefinite:
/apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
-
Quindi importa il file meno che include le variabili sovrascritte.
Esempio di nuove definizioni di variabili:
code language-css @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:
code language-css .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: Usa questo file per includere tutti
less
file (variabili, mixin, stili) da utilizzare nella libreria client.Nell’esempio seguente
styles.less
file, l’istruzione di importazione può essere inserita in qualsiasi ordine.Le istruzioni per importare quanto segue
.less
i file sono obbligatori:globalvariables.less
layoutvariables.less
components.less
layouts.less
code language-css @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%; }
Il
css.txt
contiene i percorsi dei file .css da scaricare per la libreria.Ad esempio:
code language-javascript #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
note note NOTE Il file styles.less non è obbligatorio. Ciò significa che non è necessario creare questo file, se non sono stati definiti stili, variabili o mixin personalizzati. Tuttavia, se non si crea un file style.less, nel file css.txt è necessario rimuovere il commento dalla riga seguente: #base=less
E commenta la seguente riga: styles.less
-
Per utilizzare un tema in un modulo adattivo to-use-a-theme-in-an-adaptive-form
Dopo aver creato un tema per moduli adattivi, effettua le seguenti operazioni per utilizzarlo in un modulo adattivo:
-
Per includere il tema creato in per creare un tema per moduli adattivi , crea una pagina personalizzata di tipo
cq:Component
.Ad esempio
/apps/myAfCustomizations/myAfPages/forestPage
-
Aggiungi un
sling:resourceSuperType
e impostarne il valore comefd/af/components/page/base
. -
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 frammento di codice di esempio seguente importa
af.theme.forest
tema.code language-jsp <%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <cq:includeClientLib categories="af.theme.forest"/>
-
Facoltativo: nella pagina personalizzata, esegui l’override di header.jsp, footer.jsp e body.jsp, come richiesto.
-
-
Crea 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.