DocumentazioneAEM 6.5Guida utente

Creare o personalizzare un tema per moduli adattivi introduction-to-theme

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Amministratore
  • Sviluppatore
Versione
Collegamento articolo
AEM as a Cloud Service
Fai clic qui
AEM 6.5
Questo articolo

In AEM Forms 6.5, un tema è una libreria client AEM che puoi utilizzare per definire gli stili (look and feel) di un modulo adattivo. Un tema contiene dettagli sullo stile dei componenti e dei pannelli. Gli stili includono proprietà quali i colori di sfondo, i colori degli stati, la trasparenza, l’allineamento e le dimensioni. Quando applichi un tema, lo stile specificato si riflette sui componenti corrispondenti. Un tema viene gestito in modo indipendente senza un riferimento a un modulo adattivo e può essere riutilizzato in più Forms adattivi.

Temi disponibili available-theme

L’ambiente AEM 6.5 fornisce i temi elencati di seguito per i Forms adattivi basati su Componenti core:

Struttura dei temi understanding-structure-of-theme

Un tema è un pacchetto che include il file CSS, i file JavaScript e le risorse (come le icone) che definiscono lo stile del Forms adattivo. Un tema Modulo adattivo segue un’organizzazione specifica, costituita dai seguenti componenti:

  • src/theme.scss: questa cartella include il file CSS che ha un ampio impatto sull'intero tema. Funge da posizione centralizzata per definire e gestire lo stile e il comportamento del tema. Apportando modifiche a questo file, puoi apportare modifiche applicate universalmente a tutto il tema, influenzando l’aspetto e le funzionalità sia delle pagine Forms adattive che delle pagine AEM Sites.

  • src/site: questa cartella contiene file CSS applicati alla pagina di un intero sito AEM. Questi file sono costituiti da codice e stili che influiscono sulle funzionalità e sul layout generali della pagina del sito AEM. Tutte le modifiche apportate qui vengono applicate a tutte le pagine del sito.

  • src/components: i file CSS in questa cartella sono progettati per i singoli componenti core AEM. Ogni cartella dedicata per un componente include un file .scss con lo stile di quel particolare componente all'interno di un modulo adattivo. Ad esempio, il file /src/components/button/_button.scss contiene informazioni sullo stile del componente Pulsante Forms adattivo.

    Struttura Tema Area Di Lavoro

  • src/resources: questa cartella contiene file statici come icone, loghi e font. Queste risorse vengono utilizzate per migliorare gli elementi visivi e la progettazione complessiva del tema.

Creare un tema

AEM Forms 6.5 fornisce i temi elencati di seguito per i Componenti core basati su Adaptive Forms.

Puoi personalizzare uno di questi temi per creare un tema.

Personalizzare un tema customize-a-theme-core-components-based-adaptive-forms

La personalizzazione di un tema si riferisce al processo di modifica e personalizzazione dell’aspetto di un tema. Quando si personalizza un tema, è possibile modificarne gli elementi di progettazione, il layout, i colori, la composizione tipografica e, a volte, il codice sottostante. Questo consente di creare un aspetto univoco e personalizzato per il sito web o l’applicazione, mantenendo la struttura e le funzionalità di base fornite dal tema.

NOTE
  • Utilizza Gestione pacchetti per distribuire un tema in tutte le istanze di Author e Publish.
  • Una libreria client tema viene importata o esportata tramite Gestione pacchetti come qualsiasi altro pacchetto.

Prerequisiti per personalizzare un tema prerequisites

  • Abilita i componenti core adattivi di Forms per il tuo ambiente.

  • Installa la versione più recente di Apache Maven. Apache Maven è uno strumento di automazione della build comunemente utilizzato per i progetti Java™. L’installazione della versione più recente garantisce che tu disponga delle dipendenze necessarie per la personalizzazione del tema.

  • Scopri come creare una libreria client in Adobe Experience Manager. AEM fornisce librerie client che consentono di memorizzare il codice lato client nell’archivio, organizzarlo in categorie e definire quando e come ogni categoria di codice deve essere trasmessa al client.

  • Installa un editor di testo normale. Microsoft® Visual Studio Code. L'utilizzo di un editor di testo normale come Microsoft® Visual Studio Code fornisce un ambiente semplice per la modifica e la modifica dei file dei temi.

  • Assicurati che l’ambiente AEM Forms sia operativo.

Considerazioni per personalizzare un tema consideration

  • Assicurati di utilizzare il progetto Archetipo utilizzato per abilitare i Componenti core adattivi di Forms nell'ambiente per personalizzare i temi.

  • Quando si pubblica un modulo adattivo, le librerie client non vengono pubblicate automaticamente nell’istanza di Publish. Assicurati di pubblicare manualmente negli ambienti Publish la libreria client a cui si fa riferimento in un modulo adattivo.

  • L’Adobe consiglia di non modificare i nomi delle classi delle librerie client.

Personalizzare un tema customize-a-theme-core-components

La creazione o la personalizzazione di un tema è un processo in più fasi. Per creare/personalizzare il tema, effettua le seguenti operazioni:

  1. Clonare un tema
  2. Personalizzare l'aspetto del tema
  3. Pronto per la distribuzione locale
  4. Distribuisci il tema in un ambiente locale
  5. Distribuire il tema nell’ambiente di produzione

Gli esempi forniti nel documento sono basati sul tema Canvas, ma è possibile clonare qualsiasi tema e personalizzarlo seguendo le stesse istruzioni. Queste istruzioni sono applicabili a qualsiasi tema, consentendo di modificare i temi in base alle esigenze specifiche.

1. Clona l’archivio Git del tema clone-git-repo-of-theme

Per clonare un tema per Forms adattivo basato su Componenti core, scegli uno dei seguenti temi:

Per clonare un tema, esegui le seguenti istruzioni:

  1. Apri il prompt dei comandi o la finestra del terminale nell’ambiente di sviluppo locale.

  2. Eseguire il comando git clone per clonare un tema.

    code language-none 
       git clone [Path of Git Repository of the theme]

    Sostituisci il [percorso dell'archivio Git del tema] con l'URL effettivo dell'archivio Git corrispondente del tema

    Ad esempio, per clonare il tema Canvas, eseguire il comando seguente:

    code language-none 
       git clone https://github.com/adobe/aem-forms-theme-canvas

  3. Seleziona Considera affidabili gli autori di tutti i file presenti nella cartella principale e fai clic su Sì, considero affidabili gli autori.

Dopo aver eseguito correttamente il comando, nella cartella aem-forms-theme-canvas del computer è disponibile una copia locale del tema.

2. Personalizzare il tema customize-the-theme

Puoi personalizzare i singoli componenti o apportare modifiche a livello di tema utilizzando le variabili globali di un tema. La modifica delle variabili globali ha un effetto a cascata su tutti i singoli componenti. Ad esempio, puoi utilizzare le variabili globali per modificare il colore del bordo di tutti i componenti all’interno di un modulo adattivo o applicare un colore di riempimento vibrante ai pulsanti di invito all’azione (CTA). Operazioni disponibili:

Impostare gli stili del livello tema theme-customization-global-level

Il file variable.scss contiene le variabili globali del tema. Aggiornando queste variabili, puoi apportare modifiche relative allo stile a livello di tema. Per applicare gli stili a livello di tema, effettua le seguenti operazioni:

  1. Apri il file <your-theme-sources>/src/site/_variables.scss per la modifica.

  2. Modifica il valore di qualsiasi proprietà. Ad esempio, il colore di errore predefinito è il rosso. Per modificare il colore dell'errore da rosso a blu, modificare il codice esadecimale del colore della variabile $error. Esempio: $error: #196ee5.

    Esempio: colore dellerrore impostato su blu

  3. Salva e chiudi il file.

Analogamente, è possibile utilizzare il file variable.scss per impostare la famiglia e il tipo di carattere, i colori del tema e del carattere, la dimensione del carattere, la spaziatura del tema, l'icona di errore, gli stili del bordo del tema e altre variabili che influiscono su più componenti del modulo adattivo.

Impostare gli stili a livello di componente component-based-customization

È inoltre possibile personalizzare il carattere, il colore, le dimensioni e altre proprietà CSS di componenti core Modulo adattivo specifici, quali pulsanti, caselle di controllo, contenitori, piè di pagina e altro ancora. Modificando il file CSS associato al componente specifico, puoi allinearne lo stile al branding dell’organizzazione. Per personalizzare lo stile di un componente, effettua le seguenti operazioni:

  1. Aprire il file <your-theme-sources>/src/components/<component>/<component.scss> per la modifica. Ad esempio, per modificare il colore del carattere del componente pulsante, aprire <your-theme-sources>/src/components/button/button.scss, file .

  2. Modifica il valore di qualsiasi in base alle tue esigenze. Ad esempio, per cambiare il colore del componente Pulsante al passaggio del mouse su Verde, modificare il valore della proprietà color: $white nella classe cmp-adaptiveform-button__widget:hover in #12b453 di codice esadecimale o in qualsiasi altra tonalità di verde. Il codice finale è simile al seguente:

    code language-none 
     .cmp-adaptiveform-button__widget:hover {
 background: $dark-gray;
 color: #12b453;
 }

  3. Salva e chiudi il file.

NOTE
Quando uno stile viene definito sia a livello di tema che a livello di componente, lo stile definito a livello di componente ha la priorità.

3. Preparare il tema per la distribuzione generate-the-clientlib

Per distribuire un tema in un’istanza AEM, è necessario convertirlo in una libreria client. Per convertire il tema in una libreria client, effettua le seguenti operazioni:

  1. Apri il prompt dei comandi o la finestra del terminale.

  2. Passare alla cartella <your-theme-sources>. Ad esempio C:\aem-forms-theme-canvas

  3. Esegui il comando seguente:

    code language-none 
       npm run create-clientlib --category=adaptiveform.theme.[yourtheme]

    Sostituisci [yourtheme] con il nome del tema personalizzato. Ad esempio, se il nome del tema personalizzato è customcanvastheme, eseguire il comando seguente

    code language-none 
        npm run create-clientlib --category=adaptiveform.theme.customcanvastheme

    Se il comando viene eseguito correttamente, verrà creata una cartella della libreria client in themerepo\theme-clientlibs\[yourtheme].

    Generazione libreria client

    Percorso libreria client

4. Distribuire il tema in un ambiente locale deploy-the-theme-on-a-local-environment

Per distribuire il tema nell’ambiente di sviluppo o di test locale, effettua le seguenti operazioni:

  1. Copia la libreria client, creata nella sezione precedente, nel progetto Archetipo, nel percorso seguente:

    /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

  2. Aprire il prompt dei comandi o il terminale.

  3. Passa alla directory principale del progetto Archetipo AEM, il progetto utilizzato per abilitare i componenti core del modulo adattivo.

  4. Esegui il comando seguente per distribuire il tema personalizzato nel tuo ambiente:

    mvn clean install

    Build libreria client

5. Distribuire un tema nell’ambiente di produzione deploy-theme

Dopo aver testato correttamente il tema nell’ambiente di sviluppo locale, puoi procedere alla distribuzione del tema negli ambienti di produzione, incluse le istanze Author e Publish. Per distribuire il tema negli ambienti di produzione, effettua le seguenti operazioni:

  1. Accedi all’ambiente AEM.
  2. Apri Gestione pacchetti. URL predefinito: https://localhost:4502/crx/packmgr/index.jsp.
  3. Fare clic su Carica pacchetto e quindi su Sfoglia.
  4. Passare a [AEM Archetype Project Folder]\all\target[appid].all-[version].zip e selezionarlo. Fai clic su Apri.
  5. Fai clic su Installa. Ripeti il passaggio in tutti gli ambienti di produzione.

Dopo l’installazione del pacchetto, il tema è disponibile per la selezione.

Libreria client temi

NOTE
Se si verificano problemi durante l'accesso alla finestra di dialogo di accesso in un'istanza di pubblicazione per installare il pacchetto tramite Gestione pacchetti, provare ad accedere tramite il seguente URL: http://[Publish Server URL]:[PORT]/system/console. Questo consente di accedere all’istanza di Publish e di procedere con il processo di installazione.

Applicare un tema a un modulo adattivo using-theme-in-adaptive-form

I passaggi per applicare un tema a un modulo adattivo sono i seguenti:

  1. Accedi all’istanza di authoring AEM locale.

  2. Inserisci le credenziali nella pagina di accesso di Experience Manager. Seleziona Adobe Experience Manager > Forms > Forms e documenti.

  3. Fai clic su Crea > Forms adattivo.

  4. Seleziona un modello di Componenti core Forms adattivi e fai clic su Avanti. Viene visualizzato Aggiungi proprietà

  5. Specifica il Nome per il modulo adattivo.

    note note
    NOTE
    • Per impostazione predefinita, il tema adaptiveform.theme.canvas3 è selezionato.
    • Puoi scegliere un tema diverso dal menu a discesa Libreria client tema.

  6. Fai clic su Crea.

I temi per moduli adattivi vengono utilizzati come parte di un modello di modulo adattivo per definire lo stile durante la creazione di un modulo adattivo.

Eliminare un tema delete-a-theme

Per rimuovere i temi inutilizzati o indesiderati:

  1. Accedi all’istanza di authoring.
  2. Apri http://[Publish Server URL]:[PORT]/crx/de/index.jsp
  3. Accedi a apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme].
  4. Elimina la cartella dei temi e salva le modifiche.

Domanda frequente faq

Q: Quale personalizzazione ha priorità quando si eseguono personalizzazioni in una cartella dei temi a livello globale e di componente?

Ans: Quando uno stile viene definito sia a livello di tema che di componente, lo stile definito a livello di componente ha la precedenza.

Q: Quali passaggi è necessario eseguire se il tema personalizzato non è visibile nella libreria client tema?

Ans: Se il tema personalizzato non viene visualizzato nel menu a discesa Libreria client tema, eseguire la procedura seguente:

  1. Passare alla posizione in cui è stata aggiunta la libreria client del tema personalizzata. Il percorso consigliato è /ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>.

  2. Aprire il file .content.xml e includere i metadati seguenti:

    code language-none 
        formstheme:true
    allowproxy:true

  3. Salva il file e ridistribuisci il tema.

Consulta anche

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2