Temi in Forms adattivo themes-for-af-using-core-components

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

Puoi creare e applicare temi per assegnare uno stile a 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

Forms as a Cloud Service fornisce, i seguenti temi elencati per i Componenti core basati su Adaptive Forms:

Struttura dei temi

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. [Quando utilizzarlo?]

  • src/components: i file CSS in questa cartella sono progettati per i singoli componenti core AEM. Ogni cartella dedicata di un componente include .scss che assegna uno stile a quel particolare componente in un modulo adattivo. Ad esempio, il file /src/components/accordion/_accordion.scss contiene informazioni sullo stile del componente Pannello a soffietto di Forms adattivo.

    struttura tema basata su modulo adattivo

  • 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

Forms as a Cloud Service fornisce, i temi elencati di seguito per i Componenti core basati su Adaptive Forms.

È possibile personalizza uno di questi temi per creare un nuovo tema.

Flusso di lavoro di personalizzazione tema

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

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

Prerequisiti prerequisites-to-customize

  • Acquisisci familiarità con configurazione di una pipeline in Cloud Manager e avere conoscenze di base su come impostare una pipeline ti aiuta a gestire e distribuire in modo efficiente le personalizzazioni dei temi.
  • Scopri come configurare un utente con il ruolo collaboratore. Le informazioni su come configurare un utente con il ruolo di collaboratore consentono di concedere le autorizzazioni necessarie per la personalizzazione del tema.
  • 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.
  • 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.

Configurare l’ambiente

  • Abilita componenti core Forms adattivi per lo sviluppo locale e l'ambiente di Cloud Service.
  • Configura pipeline di distribuzione front-end per l'ambiente di Cloud Service. In alternativa, puoi configurare la pipeline in un secondo momento, dando la flessibilità di assegnare la priorità ai test e perfezionando il tema prima di impostare la pipeline di distribuzione.

Dopo aver appreso i prerequisiti e configurato l’ambiente di sviluppo, sei pronto per iniziare a personalizzare il tema in base alle tue esigenze specifiche.

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

La personalizzazione di un tema è un processo in più fasi. Per personalizzare il tema, esegui i passaggi nell’ordine elencato:

Gli esempi forniti nel documento sono basati su Area di lavoro ma è importante notare che è possibile clonare qualsiasi tema e personalizzarlo utilizzando le stesse istruzioni. Queste istruzioni sono applicabili a qualsiasi tema, consentendo di modificare i temi in base alle esigenze specifiche.

1. Clonare un tema download-a-theme-core-components

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

Per clonare un tema, attenersi alle istruzioni riportate di seguito.

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

  2. Esegui il 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
    

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

2. Impostare il nome di un tema set-name-of-theme

  1. Apri la cartella dei temi in un editor di testo normale. Ad esempio, per aprire aem-forms-theme-canvas nell'editor di codice di Visual Studio.

  2. Accedi a aem-forms-theme-canvas cartella.

  3. Esegui il comando seguente:

    code language-none
          code .
    

    Aprire la cartella dei temi in un editor di testo normale

    La cartella viene aperta nel codice di Visual Studio.

  4. Apri package.json file per la modifica.

  5. Imposta i valori per name e description attributi.

    L’attributo name viene utilizzato per identificare in modo univoco il tema, ad esempio "aem-forms-wknd-theme" e visualizzato in Stile scheda di Creazione guidata modulo. L'attributo description fornisce ulteriori dettagli sul tema, inclusi lo scopo e gli scenari per cui è progettato. È inoltre possibile specificare la versione, la descrizione e la licenza per il tema.

  6. Salva e chiudi il file.

Immagine di modifica nome tema area di lavoro

3. Personalizzare un tema customize-the-theme

È possibile personalizzare singoli componenti o apportare modifiche a livello di tema utilizzando le variabili globali di un tema. Eventuali modifiche apportate alle variabili globali influiscono su tutti i singoli componenti. Ad esempio, puoi utilizzare le variabili globali per modificare il colore del bordo di tutti i componenti di un modulo adattivo e un colore di riempimento luminoso per impostare CTA (invito all’azione) utilizzando il componente pulsante:

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

Il 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 <your-theme-sources>/src/site/_variables.scss file per la modifica.

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

  3. Salva e chiudi il file.

    Modificare il tema

Allo stesso modo, è possibile utilizzare variable.scss file per impostare la famiglia e il tipo di carattere, i colori del tema e del font, la dimensione del font, la spaziatura del tema, l’icona di errore, gli stili dei bordi 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 modificare il carattere, il colore, le dimensioni e altre proprietà CSS di un componente core Modulo adattivo specifico. Ad esempio, pulsante, casella di controllo, contenitore, piè di pagina e altro ancora. Puoi applicare uno stile al pulsante o alla casella di controllo modificando il file CSS del componente specifico per allinearlo allo stile della tua organizzazione. Per personalizzare uno stile di un componente:

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

  2. Modifica il valore di qualsiasi in base alle tue esigenze. Ad esempio, per modificare il colore del componente Pulsante al passaggio del mouse su green, modificare il valore di color: $white proprietà in cmp-adaptiveform-button__widget:hover da classe a codice esadecimale #12B453 o qualsiasi altra tonalità di green. 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.

    Modifica CSS casella di testo

    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à.

4. Testare un tema personalizzato test-the-theme

Per visualizzare in anteprima e testare le modifiche nell’ambiente locale e personalizzare il tema in base ai requisiti per i diversi componenti AEM, effettua le seguenti operazioni:

4.1. Configurare l’ambiente locale per il test rename-env-file-theme-folder
  1. Apri la cartella dei temi in un editor di testo normale. Ad esempio, apri il aem-forms-theme-canvas nell'editor di codice di Visual Studio.

  2. Rinomina il env_template file in .env nella cartella theme e aggiungi i seguenti parametri:

    code language-none
    * **AEM url**
    AEM_URL=https://[author-instance]
    
    * **AEM Adaptive form name**
    AEM_ADAPTIVE_FORM=Form_name
    
    * **AEM proxy port**
    AEM_PROXY_PORT=7000
    

    Ad esempio, l’URL del modulo è http://localhost:4502/editor.html/content/forms/af/contactusform.html. Quindi, i valori di:

    • URL_AEM = http://localhost:4502/
    • AEM_ADAPTIVE_FORM = contactusform
  3. Salva il file.

    Struttura tema area di lavoro

4.2 Testare il tema utilizzando l’ambiente locale start-a-local-proxy-server
  1. Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas.

  2. Apri il prompt dei comandi o il terminale.

  3. Esegui npm install per installare le dipendenze.

  4. Esegui npm run live per visualizzare in anteprima il modulo con il tema aggiornato nel browser locale.

    note note
    NOTE
    Se si verifica un errore durante l'esecuzione di npm run live , eseguire i seguenti comandi prima di npm run live comando:
    • npm install parcel --save-dev
    • npm i @parcel/transformer-sass

Questa è una distribuzione a caldo. Pertanto, ogni volta che apporti modifiche e salvi il _variables.scss e button.scss file, il server seleziona automaticamente le modifiche e visualizza in anteprima l’output più recente. La riga [Browsersync] File event [change] indica che il server ha riconosciuto le modifiche più recenti e le sta distribuendo nell’ambiente locale.

Browsersync proxy

Seguendo gli esempi forniti sia a livello di tema che a livello di componente per le personalizzazioni dei temi, i messaggi di errore di un modulo adattivo vengono modificati in blue colore, mentre il colore dell’etichetta del componente pulsante diventa green al passaggio del mouse.

Anteprima dello stile a livello di tema

Esempio: colore di errore impostato su blu

Anteprima dello stile a livello di componente

Esempio: colore al passaggio del mouse impostato su verde

Test del tema per i moduli in hosting in un ambiente di Cloud Service

Puoi anche testare il tema per il modulo adattivo ospitato nell’istanza as a Cloud Service di AEM Forms. Per configurare e impostare l’ambiente locale per il test dei temi con Adaptive Forms ospitato sull’istanza cloud, effettua le seguenti operazioni:

  1. Apri la cartella dei temi in un editor di testo normale. Ad esempio, apri il aem-forms-theme-canvas nell'editor di codice di Visual Studio.

  2. Rinomina il env_template file in .env e aggiungi i seguenti parametri:

    code language-none
    * **AEM url**
    AEM_URL=https://[author-instance]
    
    * **AEM Adaptive form name**
    AEM_ADAPTIVE_FORM=Form_name
    
    * **AEM proxy port**
    AEM_PROXY_PORT=7000
    

    Ad esempio, l’URL del modulo nell’ambiente cloud è https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html. Quindi, i valori di:

    • URL_AEM = https://author-XXXX-cmstg.adobeaemcloud.com/
    • AEM_ADAPTIVE_FORM = contactusform
  3. Salva il file.

  4. Crea un utente locale.

    note note
    NOTE
    Per creare un utente locale:
    • Vai a Home page AEM > Strumenti > Sicurezza > Utenti .
    • Assicurati che l'utente sia membro di forms-users gruppo.
  5. Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas.

  6. Esegui npm run live e vieni reindirizzato a un browser locale.

  7. Clic SIGN IN LOCALLY (ADMIN TASKS ONLY) e accedere utilizzando le credenziali dell'utente locale.

Puoi visualizzare in anteprima il modulo adattivo con le modifiche più recenti. Una volta apportate le modifiche desiderate in una cartella dei temi, distribuisci il tema nell’ambiente AEM Cloud Service utilizzando la pipeline front-end.

5. Distribuire un tema deploy-the-theme

Per distribuire il tema nell’ambiente di Cloud Service utilizzando la pipeline front-end:

5.1 Creare un archivio per il tema create-a-new-theme-repo

Per distribuire il tema è necessario un repository. Accedi al tuo Archivio AEM Cloud Manager e aggiungi un nuovo archivio per il tema.

  1. Creare un nuovo archivio per il tema facendo clic sul pulsante Archivi > Aggiungi archivio.

    crea nuovo archivio tema

  2. Specifica la Nome archivio nel Aggiungi archivio . Ad esempio, il nome fornito è custom-canvas-theme-repo.

  3. Fai clic su Salva.

    Aggiungi archivio tema Canvas

  4. Clic Copia URL archivio per copiare l’URL dell’archivio.

    URL tema area di lavoro

    note note
    NOTE
    • È possibile utilizzare un singolo archivio per più temi.
    • Per distribuire temi diversi, devi creare pipeline front-end separate.
    • Ad esempio, puoi utilizzare lo stesso archivio, come custom-canvas-theme-repo, per tema Canvas, tema WKND e tema EASEL. Tuttavia, per distribuire i temi, è necessario creare pipeline front-end separate. Le personalizzazioni future per un tema specifico vengono distribuite utilizzando la pipeline front-end corrispondente.
5.2. Inviare le modifiche all’archivio committing-the-changes

Ora, invia le modifiche all’archivio dei temi del Cloud Service AEM Forms.

  1. Passa alla cartella principale della cartella dei temi. In questo caso, il nome della cartella dei temi è aem-forms-theme-canvas.

  2. Apri il prompt dei comandi o il terminale.

  3. Esegui il comando seguente nell'ordine elencato:

    code language-none
    git remote add [alias-name-for-repository] [URL of repository]
    git add .
    git commit
    git push [name-for-createdrepository]
    

    Ad esempio:

    code language-none
    git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
    git add .
    git commit
    git push canvascloudthemerepo
    

    Commit delle modifiche eseguito

5.3 Eseguire la pipeline front-end run-a-frontend-pipeline

Il tema viene distribuito utilizzando pipeline front-end.. Per distribuire il tema, effettua le seguenti operazioni:

  1. Accedi all’archivio di AEM Cloud Manager.

  2. Clic Aggiungi dal pulsante Pipeline sezione.

  3. Seleziona Aggiungi pipeline non di produzione o Aggiungi pipeline di produzione in base all’ambiente del Cloud Service. Ad esempio, qui il Aggiungi pipeline di produzione è selezionata.

  4. In Aggiungi pipeline di produzione finestra di dialogo come parte del Configurazione passaggi, specifica il nome per la pipeline. Ad esempio, il nome della pipeline è customcanvastheme.

  5. Fai clic su Continua.

  6. Seleziona la Distribuzione mirata > il Codice front-end opzioni, nella Codice sorgente passaggi.

  7. Seleziona la Archivio e Ramo Git valori con le modifiche più recenti. Ad esempio, il nome dell’archivio selezionato è custom-canvas-theme-repo e il ramo Git è main.

  8. Seleziona la Posizione codice as /, se le modifiche sono presenti nella cartella principale.

  9. Fai clic su Salva.
    creare una pipeline front-end

    Al termine della configurazione della pipeline, la scheda di invito all’azione viene aggiornata.

  10. Fate clic con il pulsante destro del mouse sulla tubazione creata.

  11. Clic Esegui .

    run-a-pipeline

Una volta completata la build, il tema diventa disponibile nell’istanza di authoring per l’utilizzo. Viene visualizzato sotto Stile nella procedura guidata di creazione di moduli adattivi, durante la creazione di un modulo adattivo.

tema personalizzato disponibile nella scheda stile

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 Autore di AEM Forms.

  2. Seleziona Adobe Experience Manager > Forms > Forms e documenti.

  3. Clic Crea > Forms adattivo. Viene visualizzata la procedura guidata per la creazione di un modulo adattivo.

  4. Seleziona il modello di componente core in Sorgente scheda.

  5. Seleziona il tema in Stile scheda.

  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.

Best practice best-practices

  • Evitare risorse da un altro tema

    Quando modifichi un tema, puoi sfogliare e aggiungere risorse (come immagini) da altri temi. Ad esempio, stai modificando lo sfondo di una pagina. Ad esempio, quando selezioni Pagina edit-button > Sfondo > Aggiungi > Immagine, viene visualizzata una finestra di dialogo che consente di sfogliare e aggiungere immagini in un altro tema.

    Se una risorsa viene aggiunta da un altro tema e l’altro tema viene spostato o eliminato, puoi riscontrare dei problemi con il tema corrente. Si consiglia di evitare di sfogliare e aggiungere risorse da altri temi.

  • Modifica della larghezza del layout del pannello contenitore

    La modifica della larghezza del layout del pannello contenitore non è consigliata. Quando si specifica la larghezza di un pannello contenitore, questo diventa statico e non si adatta a visualizzazioni diverse.

  • Utilizzo dell’editor di moduli o dell’editor temi per l’utilizzo di intestazione e piè di pagina

    Utilizzare l'editor tema se si desidera applicare uno stile a intestazione e piè di pagina utilizzando opzioni di stile quali stile, sfondo e trasparenza del carattere.
    Se si desidera fornire informazioni quali un'immagine del logo, il nome della società nell'intestazione e le informazioni sul copyright nel piè di pagina, utilizzare le opzioni dell'editor di moduli.

Domande frequenti faq

D: Quale personalizzazione ha priorità quando si effettuano personalizzazioni in una cartella tema a livello globale e di componente?

Ans: Quando vengono effettuate personalizzazioni a livello sia globale che di componente, la personalizzazione a livello di componente ha la priorità.

Consulta anche see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab