Creazione di temi modulo adattivo personalizzati

ATTENZIONE

AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

ATTENZIONE

AEM Forms fornisce Editor tema capacità di creare e modificare moduli adattivi temi. Esegui i passaggi elencati in questo articolo, solo se hai effettuato l’aggiornamento da una versione che non ha Editor tema e disponi di un investimento esistente nei temi creati utilizzando i file Less/CSS (metodo dell'editor pre-theme).

Prerequisiti

Tema modulo adattivo

Un tema modulo adattivo è una libreria client AEM utilizzata per definire gli stili (aspetto e aspetto) di un modulo adattivo.

Crea un modello adattivo e applica il tema al modello. Quindi utilizza questo modello personalizzato per creare un modulo adattivo.

Moduli adattivi e libreria client

Per creare un tema modulo adattivo

NOTA

La procedura seguente viene descritta utilizzando nomi di esempio per oggetti AEM quali nodo, proprietà e cartelle.

Se si seguono questi passaggi utilizzando i nomi, il modello risultante dovrebbe essere simile al seguente snapshot:

Snapshot dei moduli adattivi a tema foresta
Figura: Esempio di tema della foresta

  1. Crea un nodo di tipo cq:ClientLibraryFolder in /appsnodo.

    Ad esempio, crea il seguente nodo:

    /apps/myAfThemes/forestTheme

  2. Aggiungi una proprietà stringa con più valori categories sul nodo e impostarne il valore in modo appropriato.

    Ad esempio, impostare la proprietà su: af.theme.forest.

    Snapshot archivio CRX

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

    • less cartella: Contiene la less file variabili in cui si definiscono i less variabili e less mixins utilizzati per gestire gli stili .css.

      Questa cartella è costituita da less file variabili, less file misti, less file che definiscono gli stili utilizzando mixin e variabili. E tutti questi file in meno vengono importati in style.less.

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

    Meno file variabili: Si tratta dei file , in cui definisci o sovrascrivi le variabili utilizzate nella definizione degli stili CSS.

    I moduli adattivi forniscono variabili OOTB definite nei seguenti file .less:

    • /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 minori fornite con i moduli adattivi, sovrascrivere queste variabili o creare nuove variabili minori.

    NOTA

    Durante l’importazione dei file dei meno preprocessori, nell’istruzione di importazione specificare il percorso relativo dei file.

    Esempio di variabili di override:

    @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 il lessvariabili:

    1. Importa variabili di modulo adattivo predefinite:

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

    2. Quindi importa il file less che include le variabili sostituite.

    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: Puoi definire le funzioni che accettano le variabili come argomenti. L'output di queste funzioni sono gli stili risultanti. Utilizza questi mixin all’interno di stili diversi, per evitare di ripetere stili CSS.

    I moduli adattivi forniscono mixer OOTB 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 del mixin campione:

    .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 i file minori (variabili, mixin, stili) che devi utilizzare nella libreria client.

    Nel seguente esempio: styles.less file, l'istruzione import 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%;
    }
    

    La 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
    
    NOTA

    Il file Styles.less non è obbligatorio. Questo significa che non devi creare questo file, se non hai definito stili, variabili o mixin personalizzati.

    Tuttavia, se non si crea un file style.less, nel file css.txt, è necessario rimuovere il commento dalla seguente riga:

    #base=less

    E commenta la seguente riga:

    styles.less

Per utilizzare un tema in un modulo adattivo

Dopo aver creato un tema del modulo adattivo, esegui i seguenti passaggi per utilizzare questo tema in un modulo adattivo:

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

    Ad esempio /apps/myAfCustomizations/myAfPages/forestPage

    1. Aggiungi un sling:resourceSuperType e impostarne il valore come fd/af/components/page/base.

      Snapshot archivio CRX

    2. Per utilizzare un tema nella pagina, è necessario aggiungere un file di override library.jsp al nodo.

      Quindi importi il tema creato in Per creare una sezione del tema del modulo adattivo di questo articolo.

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

      <%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
      <cq:includeClientLib categories="af.theme.forest"/>
      
    3. Facoltativo: Nella pagina personalizzata, sovrascrivi header.jsp, footer.jsp e body.jsp, come necessario.

  2. 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).

    Snapshot archivio CRX

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

In questa pagina