Creazione e utilizzo dei temi creating-and-using-themes

Introduzione introduction

È possibile creare e applicare temi per stilizzare un modulo adattivo o una comunicazione interattiva. Un tema contiene dettagli di stile per i componenti e i pannelli. Gli stili includono proprietà quali colori di sfondo, colori dello stato, trasparenza, allineamento e dimensioni. Quando applichi un tema, lo stile specificato si riflette sui componenti corrispondenti. I temi vengono gestiti in modo indipendente senza alcun riferimento a una forma adattiva o a una comunicazione interattiva.

Operazioni disponibili:

Creazione, download o caricamento di un tema creating-downloading-or-uploading-a-theme

Con AEM Forms puoi creare, scaricare o caricare temi. Un tema viene creato come altre risorse quali moduli, documenti e lettere. Il tema viene salvato come entità separata, completo di meta-proprietà come i moduli. I temi, essendo un’entità separata, possono essere riutilizzati in più moduli adattivi e comunicazioni interattive. Puoi anche spostare un tema in un’altra istanza di AEM Forms e riutilizzarlo.

Creazione di un tema creating-a-theme

Esegui i seguenti passaggi per creare un tema:

Download di un tema downloading-a-theme

Puoi esportare i temi come file zip e utilizzarli in altri progetti o istanze AEM. Per scaricare un tema:

Caricamento di un tema uploading-a-theme

Puoi utilizzare i temi creati con i predefiniti di stile del progetto. Puoi importare pacchetti di temi creati da altri caricandoli sul tuo progetto.

Per caricare un tema:

Metadati di un tema metadata-of-a-theme

Elenco di meta-proprietà di un tema (trovato nella pagina delle proprietà di un tema).

Informazioni sull’editor di temi about-the-theme-editor

AEM Forms viene fornito con Theme Editor. Si tratta di un’interfaccia intuitiva per utenti aziendali e web-designer/sviluppatori che fornisce le funzionalità necessarie per specificare facilmente lo stile dei vari elementi di comunicazione interattivi e dei moduli adattivi. Quando crei un tema, questo viene memorizzato come entità separata, ad esempio moduli, comunicazioni interattive, lettere, frammenti di documento e dizionari di dati.

L’Editor tema ti consente di personalizzare gli stili dei componenti formattati in un tema. È possibile personalizzare l’aspetto di un modulo o di una comunicazione interattiva su un dispositivo.

L’Editor tema è diviso in due pannelli:

Componenti di stile styling-components

È possibile utilizzare un tema in più moduli adattivi e comunicazioni interattive, che importa la formattazione dei componenti specificata nel tema. È possibile assegnare uno stile a vari componenti quali titoli, descrizioni, pannelli, campi, icone e caselle di testo. Utilizza i widget per configurare le proprietà dei componenti in un tema. La conoscenza preventiva di CSS o LESS non è necessaria ma desiderata, anche se la sezione CSS Overrides ti consente di scrivere codice CSS o fornire selettori personalizzati. La sezione Sostituzioni CSS viene visualizzata quando selezioni un componente nella barra laterale.

Opzioni nella barra laterale che consentono di selezionare e assegnare uno stile a componenti diversi.

Facendo clic sul pulsante di modifica rispetto a un componente nella barra laterale si seleziona il componente in Area di lavoro e il componente viene formattato utilizzando le opzioni nella barra laterale.

Alcuni componenti come casella di testo, casella numerica, pulsante di scelta e casella di controllo sono organizzati in categorie in componenti generici come Campo. Ad esempio, è consigliabile personalizzare lo stile dei pulsanti di scelta. Per selezionare i pulsanti di scelta per lo stile, selezionare Campo > Widget > Pulsante di scelta.

Fai clic su ESPANDI TUTTO nella barra laterale per visualizzare, selezionare e assegnare uno stile ai componenti categorizzati che non sono visibili in primo piano.

Layout dei pannelli di stile styling-panel-layouts-br

I temi in AEM Forms supportano lo stile degli elementi nel layout dei pannelli nei moduli e le comunicazioni interattive. È supportato lo stile degli elementi nei layout predefiniti e nei layout personalizzati.

I pannelli preconfigurati includono:

I selettori variano a seconda del layout.
Lo stile di layout personalizzati dall’Editor tema comporta:

Stili diversi per diverse dimensioni dello schermo different-styles-for-different-screen-sizes-br

I layout desktop e mobili possono avere stili leggermente o completamente diversi. Per i dispositivi mobili, i tablet e il telefono condividono layout simili, ad eccezione delle dimensioni dei componenti.

Utilizza i punti di interruzione dell’Editor tema per definire lo stile alternativo per le diverse dimensioni dello schermo. È possibile selezionare un dispositivo o una risoluzione di base su cui iniziare a creare il tema e le varianti di stile per altre risoluzioni vengono generate automaticamente. È possibile modificare esplicitamente lo stile per tutte le risoluzioni.

Modifica del contesto delle proprietà di stile nella barra laterale durante la selezione degli oggetti styling-properties-context-changes-in-sidebar-on-selecting-objects

Quando selezionate un componente nell’area di lavoro, le relative proprietà di stile sono elencate nella barra laterale. Selezionare il tipo di oggetto e il relativo stato, quindi specificare lo stile.

Stili utilizzati di recente nell’Editor tema recently-used-styles-in-theme-editor

L’editor di temi memorizza in cache fino a 10 stili applicati a un componente. Puoi utilizzare gli stili memorizzati nella cache con altri componenti di un tema. Gli stili utilizzati di recente sono disponibili sotto il componente selezionato nella barra laterale come casella di riepilogo. Inizialmente, l’elenco degli stili utilizzati di recente è vuoto.

Mentre si formatta un componente, gli stili vengono memorizzati nella cache ed elencati nella casella di riepilogo. In questo esempio, l'etichetta della casella di testo viene formattata per modificare la dimensione e il colore del font. Puoi seguire passaggi simili per scegliere un’immagine o cambiare i colori in base allo stile di un componente. Osserva come lo stile viene memorizzato nella cache ed elencato nella casella di riepilogo quando viene modificato lo stile dell’etichetta del campo.

In questo esempio, lo stile dell’etichetta del campo viene modificato e, quando è selezionata la descrizione del pannello reattivo per lo stile, una voce di elenco viene aggiunta nella libreria delle risorse. La voce nella libreria delle risorse può essere utilizzata per modificare lo stile della descrizione del pannello reattivo.

Quando viene aggiunto uno stile nella libreria delle risorse, è disponibile per altri temi e nella sezione modalità stile dell’interfaccia utente dell’editor di moduli o dell’editor di comunicazioni interattive. Allo stesso modo, quando si utilizza la modalità stile dell’editor di moduli o l’interfaccia utente dell’editor di comunicazioni interattive per assegnare uno stile a un componente, lo stile viene memorizzato nella cache ed è disponibile nei temi.

Il pulsante più della libreria di risorse consente di salvare in modo permanente lo stile con il nome specificato. Il pulsante più salva lo stile anche se non fai clic sul pulsante Salva nella barra laterale per applicare lo stile a un componente. Il pulsante più per salvare uno stile per un uso successivo non è disponibile in modalità stile.

Quando si fornisce un nome personalizzato per uno stile, lo stile è legato a un tema e non è più disponibile per altri temi. Per eliminare uno stile salvato:

Anteprima live, salvataggio ed eliminazione delle modifiche live-preview-save-and-discard-changes

Le modifiche apportate allo stile si riflettono immediatamente nel modulo o nella comunicazione interattiva caricata nell’area di lavoro. L’anteprima live consente di definire e visualizzare in modo interattivo l’impatto dello stile. Quando modifichi lo stile di un componente, la funzione Fine è attivato nella barra laterale. Per mantenere le modifiche, utilizza le Fine pulsante .

Tema con un altro modulo adattivo o comunicazione interattiva theme-with-another-adaptive-form-or-interactive-communication

Quando si crea un tema, questo viene creato con un modulo fornito con l’Editor tema. È disponibile lo stile per i componenti di questo modulo. Invece del modulo fornito con l’Editor tema, è possibile selezionare un modulo o una comunicazione interattiva a scelta per fornire stile e visualizzare in anteprima i risultati.

Per sostituire il modulo corrente o la comunicazione interattiva nell'area di lavoro dell'Editor tema:

Ripristina/Annulla redo-undo

Puoi annullare o ripristinare le modifiche indesiderate che si verificano accidentalmente. Utilizzare i pulsanti Ripristina/Annulla nell’area di lavoro.

Figura: Pulsanti Annulla/Ripristina nell’area di lavoro

I pulsanti Ripristina/Annulla vengono visualizzati quando si applica uno stile a un componente nell’Editor tema.

Utilizzo dell’editor di temi using-the-theme-editor

L’Editor tema consente di modificare un tema creato o caricato. Passa a Forms e documenti > Temi, quindi seleziona un tema e aprilo. Il tema viene aperto nell’Editor tema.

Come illustrato in precedenza, l’Editor tema presenta due pannelli: Barra laterale e tela.

Personalizzazione dello stile dello stato di successo del componente Widget casella di testo nell'Editor tema. Il componente viene selezionato in Area di lavoro e il relativo stato viene selezionato nella barra laterale. Le opzioni di stile disponibili nella barra laterale consentono di personalizzare l’aspetto di un componente.

Utilizzo dell’area di lavoro using-canvas

Il tema viene creato utilizzando il modulo preconfigurato o utilizzando un modulo o una comunicazione interattiva a scelta dell’utente. L’area di lavoro mostra l’anteprima del modulo o della comunicazione interattiva utilizzata per creare il tema con le personalizzazioni specificate nel tema. Il righello sopra il modulo viene utilizzato per determinare il layout in base alle dimensioni di visualizzazione del dispositivo.

Nella barra degli strumenti Area di lavoro sono disponibili le seguenti opzioni:

Quando selezioni un componente nell’area di lavoro, viene visualizzata la barra degli strumenti del componente sopra di esso. La barra degli strumenti del componente consente di selezionare i componenti o passare a componenti generici. Ad esempio, è possibile selezionare una casella di testo numerica in un pannello. Nella barra degli strumenti del componente sono disponibili le seguenti opzioni:

Figura: Barra degli strumenti del componente nella casella numerica dell’area di lavoro

Utilizzo della barra laterale using-rail

La barra laterale nell’editor di temi fornisce opzioni per personalizzare gli stili per i componenti di un tema e utilizzare i selettori. I selettori consentono di selezionare un gruppo di componenti o singoli componenti e di cercare i selettori nella barra laterale. Puoi scrivere selettori per componenti personalizzati.

Quando selezionate un componente dall’area di lavoro o dai selettori nella barra laterale, la barra laterale mostra tutte le opzioni che consentono di personalizzare gli stili.
Di seguito sono riportate le opzioni visualizzate nella barra laterale quando si seleziona un componente:

Stadio state

Uno stato è un indicatore dell’interazione dell’utente con un componente. Ad esempio, quando un utente immette dati errati in una casella di testo, lo stato della casella di testo diventa uno stato di errore. L’editor dei temi consente di specificare lo stile per uno stato specifico.

Le opzioni per personalizzare gli stili di stato variano per i diversi componenti.

Foglio delle proprietà property-sheet

Simula errore/successo simulate-error-success

Le opzioni Errore di simulazione e Successo sono disponibili nella parte inferiore della barra laterale. È possibile visualizzarli utilizzando una freccia mostra/nascondi visibile nella parte inferiore della barra laterale. Utilizzando l’editor di temi, puoi assegnare uno stile a vari stati di un componente.

Ad esempio, è possibile aggiungere un campo numerico nel modulo e specificarne lo stile nell’editor di temi. Quando un utente digita un valore alfanumerico nel campo, si desidera modificare il colore di sfondo della casella di testo. Selezionate il campo numerico nel tema e utilizzate l'opzione stato nella barra laterale. Selezionate lo stato Errore nella barra laterale e cambiate il colore di sfondo in rosso. Per visualizzare un’anteprima del comportamento, puoi utilizzare l’opzione Simula errore disponibile nella barra laterale. Le opzioni Errore di simulazione e Successo sono descritte in dettaglio di seguito:

Stile di un componente styling-a-component

Ad esempio, nel modulo sono disponibili due tipi di caselle di testo: che accetta solo valori numerici e altri che accettano valori alfanumerici. È possibile personalizzare lo stile della casella di testo che accetta solo valori numerici (casella numerica).

Per personalizzare lo stile di un particolare componente (una casella numerica in questo esempio), effettua le seguenti operazioni:

Invece di selezionare Widget Casella Numerica, seleziona Widget campo nella barra degli strumenti del componente ed esegui i passaggi precedenti. Quando selezioni le dimensioni per Widget campo le dimensioni di tutte le caselle di testo, ad eccezione della casella numerica, sono uguali.

Campi di stile per un dato stato styling-fields-given-state

Con la barra degli strumenti dei componenti è inoltre possibile specificare lo stile dei componenti per i diversi stati. Ad esempio, se un componente è disabilitato, lo stato è disabilitato. Gli stati comunemente utilizzati di un componente che è possibile definire nell’editor di temi sono: Predefinito, Attiva, Disabilitata, Errore, Successo e passaggio del mouse. Potete selezionare un componente nell’area di lavoro e utilizzare l’opzione Stato nella barra laterale per personalizzarne l’aspetto.

Per personalizzare lo stile di un componente in uno stato specifico, effettua le seguenti operazioni:

Quando si personalizza lo stile di un componente dopo averne specificato lo stato, viene visualizzata la personalizzazione solo per lo stato specificato. Ad esempio, se personalizzi lo stile del componente quando lo stato del passaggio del mouse è selezionato. La personalizzazione viene visualizzata per il componente quando si sposta il puntatore sul componente nel modulo di cui è stato effettuato il rendering o nella comunicazione interattiva a cui si applica il tema.

Per simulare il comportamento di stati diversi da errore e successo, utilizza la modalità Anteprima . Per utilizzare la modalità Anteprima, fai clic su Anteprima nella barra degli strumenti della pagina.

Layout di stile per display più piccoli styling-layouts-for-smaller-displays

Utilizza il righello nell’area di lavoro per selezionare i punti di interruzione per i dispositivi con display più piccoli. Fai clic su emulatore in Area di lavoro per visualizzare righello e punti di interruzione. I punti di interruzione consentono di visualizzare in anteprima un modulo o una comunicazione interattiva per le dimensioni di visualizzazione relative a diversi dispositivi, ad esempio telefoni e tablet. Nell’Editor tema sono supportate più dimensioni di visualizzazione.

Per assegnare uno stile ai componenti per diversi punti di interruzione:

È possibile assegnare uno stile ai componenti modulo o di comunicazione interattiva per più dispositivi. I componenti per moduli e comunicazioni interattive per desktop e dispositivi mobili possono avere stili completamente diversi.

Utilizzo dei font web in un tema using-web-fonts-in-a-theme

È ora possibile utilizzare i font disponibili in un servizio Web in un modulo adattivo o in una comunicazione interattiva. preconfigurato, Typekit, il servizio font web Adobe è disponibile come configurazione. Per utilizzare Typekit, crea un kit e font al suo interno e ottieni l’ID kit da Sito web Typekit.

Esegui i seguenti passaggi per configurare Typekit in AEM:

Esegui i seguenti passaggi per configurare un tema per utilizzare la configurazione TypeKit:

Inserimento e selezione di font nell’editor di temi listing-and-selecting-fonts-in-theme-editor

Puoi usare il servizio di configurazione del tema per aggiungere altri font all’editor di temi. Esegui i seguenti passaggi per aggiungere font:

Selezione dei font nell’editor di temi selecting-fonts-in-theme-editor

È possibile utilizzare il pulsante + per aggiungere un font. Quando aggiungi un font, questo viene elencato nella barra laterale.

Oltre all’opzione di configurazione del tema, puoi anche aggiungere il font dall’editor di temi stesso. Digitare il font che si desidera utilizzare nel campo della famiglia di font sotto la barra laterale e premere il tasto di ritorno sulla tastiera.

Quando si seleziona un font, questo viene aggiunto nell’elenco della famiglia di font. È possibile utilizzare l'opzione Maschera nell'editor di temi per disabilitare o abilitare i font elencati.

È possibile visualizzare la modifica del font del componente.

Il campo Famiglia font supporta più font. Quando digitate un font, il browser lo cerca e lo applica al componente selezionato. Se il browser non è in grado di trovare un font, cerca un font accanto ad esso nella famiglia. Puoi iniziare digitando il font specifico che stai cercando. Se non si trova il font che si desidera utilizzare, è possibile digitare un font generico nella famiglia e utilizzarlo.

Stili di maschera applicati nell’editor di temi mask-styles-applied-in-theme-editor

È possibile mascherare gli stili applicati in un tema. Nella barra laterale dell’editor di temi, puoi utilizzare la per disabilitare uno stile applicato. Ad esempio, se modifichi le dimensioni di un componente in una maschera o in una comunicazione interattiva, puoi utilizzare il pulsante maschera a sinistra di una proprietà per disattivarlo. Quando salvi un tema, vengono mantenute le opzioni di mascheramento selezionate.

L’esempio seguente mostra gli stili mascherati e non mascherati in un tema.

Applicazione di un tema a un modulo o a una comunicazione interattiva applying-a-theme-to-a-form-or-interactive-communication-br

Per applicare un tema a un modulo adattivo:

Per applicare un tema a una comunicazione interattiva:

Modificare il tema di un modulo in fase di esecuzione change-theme-of-a-form-at-runtime

Un tema utilizza diversi componenti di un modulo. È possibile utilizzare themeOverride per modificare dinamicamente il tema di un modulo. Un URL tipico di un modulo è:

https://<server>:<port>/content/forms/af/test.html

Puoi utilizzare il parametro themeOverride per applicare un tema in fase di esecuzione.

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

La themeOverride consente di fornire un percorso a un tema. Cambia il tema del modulo e lo aggiorna con gli stili aggiornati.

Ottenere un aspetto specifico utilizzando i temi specific-af-appearance

Con AEM Forms, insieme al tema dell’area di lavoro predefinito, sono disponibili molti altri temi. Se si desidera progettare il modulo o la comunicazione interattiva utilizzando altri temi, oltre a ulteriori modifiche, copiare il tema dalla cartella Libreria temi. Incolla i temi copiati all'esterno della cartella Libreria temi e modifica il tema copiato in base alle modifiche desiderate.

Per copiare un tema, esegui le seguenti operazioni:

Dopo aver personalizzato il tema, applicarlo al modulo o alla comunicazione interattiva.

Impatto su altri casi di utilizzo di moduli adattivi impact-on-other-adaptive-form-use-cases

Sequenza di generazione CSS css-generation-sequence

Quando selezioni Visualizza CSS, l’Editor tema raccoglie tutte le informazioni sullo stile e crea un CSS. Raccoglie le informazioni nel seguente ordine:

Ad esempio, il colore di sfondo di una casella di testo è blu nella libreria client di base. Lo si cambia in rosa utilizzando le proprietà nella barra laterale. Quando si genera CSS, il colore di sfondo della casella di testo viene visualizzato come rosa. Dopo aver modificato il colore di sfondo utilizzando le proprietà, un altro autore utilizza l’opzione di sostituzione CSS per modificare la casella di testo del colore di sfondo in bianco. Quando generi CSS, il colore di sfondo viene visualizzato come bianco nel CSS generato.

Debug degli stili debugging-styles

Quando specifichi gli stili per i componenti nell’Editor tema, viene generato un CSS. Quando si formatta un componente generico, vengono formattati anche più componenti inclusi in esso. Ad esempio, quando si formatta un campo, anche la casella di testo e l’etichetta in esso contenute vengono formattate. Quando si formatta la casella di testo all’interno del campo, ottiene il proprio CSS. Se desideri eseguire il debug del CSS generato per il campo e il componente, l’Editor tema fornisce opzioni che consentono di visualizzare CSS.

Puoi visualizzare i CSS generati utilizzando le seguenti opzioni:

Risoluzione dei problemi, raccomandazioni e best practice troubleshooting-recommendations-and-best-practices