Puoi creare e applicare temi per formattare un modulo adattivo utilizzando i componenti core. 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 applicate un tema, lo stile specificato viene riflesso sui componenti corrispondenti. Il tema viene gestito in modo indipendente senza un riferimento a un modulo adattivo.
Quando creare un modulo adattivo utilizzando i Componenti core, i temi predefiniti vengono visualizzati sotto Stile scheda. Per impostazione predefinita, solo il Area di lavoro Il tema è disponibile.
Un tema per moduli adattivi non deve essere confuso con Modelli per moduli adattivi. I temi per moduli adattivi contengono solo le informazioni sullo stile di un modulo adattivo. I modelli per moduli adattivi definiscono la struttura del modulo e il contenuto iniziale e contengono un tema per consentire la creazione di nuovi Modulo adattivo.
I passaggi per applicare il tema a un modulo adattivo sono i seguenti:
Accedi all’istanza Autore di AEM Forms.
Tocca Adobe Experience Manager > Forms > Forms e documenti.
Clic Crea > Forms adattivo. Viene visualizzata la procedura guidata per la creazione di un modulo adattivo.
Seleziona il modello di componente core in Sorgente scheda.
Quando crei un modulo adattivo con componenti core, il tema Area di lavoro viene visualizzato nella scheda Stile. Questo è l’unico tema predefinito attualmente disponibile. Ma puoi cambiare il tema a tuo piacimento e salvarlo per un utilizzo futuro impostando una pipeline front-end.
Seleziona il tema dell’area di lavoro nel Stile scheda.
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.
Per personalizzare un tema:
Per personalizzare un tema Area di lavoro:
Apri il prompt dei comandi ed esegui il comando seguente per clonare il tema dell’area di lavoro:
git clone https://github.com/adobe/aem-forms-theme-canvas
Nella scheda Stile della Creazione guidata modulo viene visualizzato lo stesso nome tema del file package.json.
Un tema per moduli adattivi è un pacchetto contenente le risorse CSS, JavaScript e statiche che definiscono lo stile del modulo e ne rispettano la struttura. Un tema Modulo adattivo presenta la seguente struttura, tipica di un progetto front-end:
src/components
: file JavaScript e CSS specifici per i componenti core AEMsrc/resources
: file statici come icone, loghi e fontsrc/site
: file JavaScript e CSS applicabili all’intera pagina AEM Sitessrc/theme.ts
: il punto di ingresso principale del tema JavaScript & CSSsrc\theme.scss
: file JavaScript e CSS applicabili all’intero temaIl src/components
La cartella contiene file JavaScript e CSS specifici per tutti i componenti core AEM come pulsante, casella di controllo, contenitore, piè di pagina, ecc. Puoi assegnare uno stile al pulsante o alla casella di controllo modificando il file CSS specifico del componente AEM.
Per personalizzare il tema, puoi avviare il server proxy locale per visualizzare le personalizzazioni del tema in tempo reale in base al contenuto effettivo dell’AEM.
Aggiornare il nome e la versione del tema Canvas nel package.json
e package_lock.json
file.
I nomi non devono avere @aemforms
tag. Deve essere un testo semplice come nome fornito dall’utente.
Creare un .env
nella cartella theme e aggiungi i seguenti parametri:
URL AEM
AEM_URL=https://[author-instance]
Nome del sito AEM
AEM_ADAPTIVE_FORM=Nome_modulo
Porta proxy AEM
AEM_PROXY_PORT=7000
Dalla riga di comando, passa alla root del tema nel computer locale.
Esegui npm install
e npm recupera le dipendenze e installa il progetto.
Esegui npm run live
e il server proxy viene avviato.
Tocca o fai clic su ACCESSO LOCALE (SOLO ATTIVITÀ AMMINISTRATORE) e accedere con le credenziali utente proxy fornite dall'amministratore AEM.
http://localhost:[port]/
nel .env
file del tema Canvas, verrai reindirizzato direttamente al browser.Una volta effettuato l’accesso, modifica l’URL nel browser in modo che indirizzi al percorso del contenuto di esempio fornito dall’amministratore AEM.
/content/formname.html?wcmmode=disabled
, modifica l’URL in http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled
Passa a un modulo adattivo per vedere il tema Area di lavoro applicato a un modulo adattivo.
Nell’editor, apri il file <your-theme-sources>/src/site/_variables.scss
.
Puoi assegnare uno stile a tutti i componenti del modulo adattivo direttamente in un sito modificando il site/_variables.scss
file.
Modifica la variabile per font colour
a red
.
Personalizzare lo stile dei diversi componenti dell’AEM
Puoi assegnare uno stile ai diversi componenti di un modulo adattivo modificandone il file CSS nell’editor. Nella cartella Tema dell’area di lavoro sono presenti diverse cartelle CSS per ogni componente core Modulo adattivo.
Per specificare gli stili per un componente specifico nell’editor temi, puoi modificare il CSS in una cartella temi. Se ad esempio si desidera modificare il colore del bordo di un campo casella di testo, aprire il file CSS nell'editor e modificarne il colore.
Quando si salva il file, il server proxy riconosce la modifica tramite la riga [Browsersync] File event [change]
.
Tornando al browser del server proxy locale, la modifica è immediatamente visibile.
Il designer del tema visualizza in anteprima le modifiche nel server proxy locale e personalizza il tema in base ai requisiti per i diversi componenti AEM.
Prima di eseguire il commit delle modifiche nell’archivio Git dell’AEM, devi accedere al tuo Informazioni sull’archivio Git.
Dopo aver apportato modifiche al tema e averlo testato con un server proxy locale, esegui il commit delle modifiche nell’archivio Git del Cloud Service AEM Forms. Rende il tema personalizzato disponibile nell’ambiente del Cloud Service Forms per l’utilizzo da parte di autori di Forms adattivi.
Prima di eseguire il commit delle modifiche nell’archivio Git del Cloud Service AEM Forms, è necessario clonare l’archivio nel computer locale. Per clonare l’archivio:
Creare un nuovo archivio temi facendo clic sul pulsante Archivi opzione.
Clic Aggiungi archivio e specificare Nome archivio nel Aggiungi archivio . Fai clic su Salva.
Clic Copia URL archivio per copiare l’URL dell’archivio creato.
Apri il prompt dei comandi e clona l’archivio cloud creato in precedenza.
git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
Sposta i file dell’archivio dei temi che stai modificando nell’archivio cloud con un comando simile a
cp -r [source-theme-folder]/* [destination-cloud-repo]
Ad esempio, utilizzare questo comando
cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]
Nella directory dell’archivio cloud, esegui il commit dei file dei temi spostati in con i seguenti comandi.
git add .
git commit -a -m "Adding theme files"
git push
Le personalizzazioni vengono inviate all’archivio Git.
Le personalizzazioni vengono ora memorizzate in modo sicuro nell’archivio Git.
In futuro, se apporti modifiche alla cartella del tema Canvas, dovrai eseguire nuovamente la pipeline precedente. Pertanto, è necessario ricordare il nome della pipeline.
.env
nella cartella dei temi e aggiungi i parametri: URL AEM, MODULO_ADATTIVO_AEM e PORTA_PROXY_AEM.red
e salva le modifiche.Una volta eseguita la pipeline, il tema è disponibile nella scheda Stile.
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 > 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.