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

L’Adobe consiglia di utilizzare l’acquisizione dati moderna ed estensibile Componenti coreper creazione di un nuovo Forms adattivoo aggiunta di Forms adattivo alle pagine AEM Sites. Questi componenti rappresentano un progresso significativo nella creazione di Forms adattivi, garantendo esperienze utente straordinarie. Questo articolo descrive un approccio precedente all’authoring di Forms adattivi utilizzando i componenti di base.

Puoi creare e applicare temi per formattare 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. Il tema viene gestito in modo indipendente senza riferimento a un modulo adattivo.

Puoi scaricare e installare AEM Forms pacchetto di contenuti di riferimento da Distribuzione di software per importare nell'ambiente i temi e i modelli di riferimento.

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

Un tema viene creato e salvato come entità separata, completa di metaproprietà come Forms adattivo. Consente di riutilizzare un tema in più Forms adattivi. È inoltre possibile spostare un tema in un'istanza diversa e riutilizzarlo.

Creazione di un tema creating-a-theme

Per creare un tema:

Differenza dai temi di Forms Experience Manager 6.5 e versioni precedenti difference-in-themes

Temi creati in un'istanza di Cloud Service:

Download di un tema downloading-a-theme

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

Caricamento di un tema uploading-a-theme

Un utente con privilegi di amministratore può caricare un tema creato in Experience Manager Forms 6.5 o versioni precedenti.

Per caricare un tema:

Metadati di un tema metadata-of-a-theme

Elenco delle metaproprietà di un tema (disponibili nella pagina delle proprietà di un tema).

Informazioni sull’Editor tema about-the-theme-editor

L’Editor tema è un’interfaccia semplice per utenti aziendali e web designer/sviluppatori che fornisce le funzionalità necessarie per specificare lo stile di vari moduli adattivi facilmente. Quando si crea un tema, questo viene memorizzato come entità separata, ad esempio i moduli .

L’Editor tema consente di personalizzare gli stili dei componenti a cui è applicato uno stile in un tema. È possibile personalizzare la modalità di utilizzo di un modulo cerca su un dispositivo.

L’Editor tema è suddiviso in due pannelli:

R. Barra laterale B. Area di lavoro

Componenti di stile styling-components

È possibile utilizzare un tema in più Forms adattivi, che importa la formattazione del componente specificata nel tema. È possibile assegnare stili a vari componenti, ad esempio titoli, descrizioni, pannelli, campi, icone e caselle di testo. I widget consentono di configurare le proprietà dei componenti in un tema. Non è necessario conoscere in precedenza CSS o LESS, ma è preferibile farlo, anche se la sezione CSS Overrides consente di scrivere codice CSS o di fornire selettori personalizzati. La sezione Sostituzioni CSS viene visualizzata quando si seleziona un componente nella barra laterale.

Opzioni nella barra laterale che consentono di selezionare e assegnare stili ai diversi componenti.

Facendo clic sul pulsante Modifica in corrispondenza di un componente nella barra laterale, il componente viene selezionato nell’area di lavoro e puoi applicare lo stile al componente utilizzando le opzioni nella barra laterale.

Alcuni componenti come casella di testo, casella numerica, pulsante di scelta e casella di controllo sono classificati in componenti generici come Campo. Ad esempio, si desidera personalizzare lo stile dei pulsanti di scelta. Per selezionare i pulsanti di scelta per lo stile, selezionare Campo > Widget > Pulsante di opzione.

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

Temi in AEM Forms supporta lo stile degli elementi nel layout dei pannelli nei moduli. È supportato lo stile degli elementi nei layout predefiniti e nei layout personalizzati.

I pannelli predefiniti includono:

I selettori variano per ciascun layout.
La creazione di stili di layout personalizzati dall’Editor tema prevede:

Stili diversi per schermi di dimensioni diverse different-styles-for-different-screen-sizes-br

I layout per desktop e dispositivi mobili possono avere stili leggermente o completamente diversi. Per i dispositivi mobili, tablet e telefono condividono layout simili tranne che per le dimensioni dei componenti.

Utilizza i punti di interruzione dell’Editor tema per definire uno stile alternativo per schermi di dimensioni diverse. Potete selezionare un dispositivo di base o una risoluzione sulla quale iniziate a creare il tema e le varianti di stile per altre risoluzioni vengono generate automaticamente. Potete modificare esplicitamente lo stile di 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 selezioni un componente nell’area di lavoro, le relative proprietà di stile vengono elencate nella barra laterale. Selezionare il tipo di oggetto e il relativo stato, quindi specificarne lo stile.

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

L’editor tema memorizza nella cache fino a dieci stili applicati a un componente. È possibile utilizzare gli stili memorizzati in cache con un altro componente 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.

Quando si applica uno stile a 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 in modo da modificare la dimensione e il colore del carattere. Puoi seguire passaggi simili per scegliere un’immagine o modificare i colori per assegnare uno stile a 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 viene modificato lo stile dell’etichetta del campo e, quando per lo stile è selezionata l’opzione Descrizione pannello reattivo, viene aggiunta una voce di elenco nella libreria delle risorse. La voce nella libreria di risorse può essere utilizzata per modificare lo stile di Descrizione pannello reattivo.

Quando uno stile viene aggiunto nella libreria delle risorse, è disponibile per altri temi e nel modalità stile dell’interfaccia utente dell’editor di moduli. Analogamente, quando si utilizza la modalità di stile dell’editor di moduli Interfaccia utente per assegnare uno stile a un componente, lo stile viene memorizzato nella cache ed è disponibile nei temi.

Il pulsante più (+) posto accanto alla libreria di risorse consente di salvare in modo permanente lo stile con il nome fornito. Il pulsante più salva lo stile anche se non fai clic sul pulsante Salva nella barra laterale per applicarlo a un componente. Il pulsante più per salvare uno stile da utilizzare successivamente non è disponibile in modalità stile.

Quando si specifica un nome personalizzato per uno stile, questo viene associato 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 vengono immediatamente riflesse nel modulo caricato nell’area di lavoro. L’anteprima live ti consente di definire e visualizzare in modo interattivo l’impatto dello stile. Quando modifichi lo stile di un componente, il Fine nella barra laterale. Per mantenere le modifiche, utilizzare Fine pulsante.

Tema con un altro modulo adattivo theme-with-another-adaptive-form

Quando si crea un tema, questo viene creato con un modulo fornito con l'Editor tema. In questo modulo viene fornito lo stile dei componenti. Invece del modulo fornito con l’Editor tema, puoi selezionare un modulo scegliere per fornire lo stile e visualizzare in anteprima i risultati.

Per sostituire il modulo corrente o nell’area di lavoro dell’Editor temi:

Ripeti/Annulla redo-undo

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

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

Utilizzo dell’Editor tema using-the-theme-editor

L’Editor tema consente di modificare un tema creato o caricato. Accedi a Forms e documenti > Temi e selezionare un tema e aprirlo. Il tema viene aperto nell’Editor tema.

Come discusso in precedenza, l’Editor tema dispone di due pannelli: Barra laterale e Area di lavoro.

Personalizzazione dello stile dello stato di successo del componente Widget casella di testo nell’editor di temi. Il componente è selezionato nell’area di lavoro e il suo stato è selezionato nella barra laterale. Le opzioni di stile disponibili nella barra laterale vengono utilizzate per personalizzare l’aspetto di un componente.

Utilizzo di Canvas using-canvas

Il tema viene creato utilizzando il modulo predefinito o un modulo di tua scelta. L’area di lavoro mostra l’anteprima del modulo oppure utilizzato 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 della visualizzazione del dispositivo.

Nella barra degli strumenti Area di lavoro vengono visualizzati i seguenti elementi:

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

Utilizzo di Sidebar using-rail

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

Quando selezioni un componente dall’area di lavoro o dai selettori nella barra laterale, questa 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:

Stato 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 cambia in errore. L’editor tema consente di specificare lo stile per un particolare stato.

Le opzioni per la personalizzazione degli stili di stato variano a seconda dei componenti.

Foglio delle proprietà property-sheet

Simula errore/esito positivo simulate-error-success

Le opzioni Simula errore e Riuscito sono disponibili nella parte inferiore della barra laterale. Puoi visualizzarli utilizzando una freccia mostra/nascondi visibile nella parte inferiore della barra laterale. L’Editor tema consente di applicare stili a vari stati di un componente.

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

Applicazione di uno stile a un componente styling-a-component

Ad esempio, nel modulo sono disponibili due tipi di caselle di testo: una che accetta solo valori numerici e l'altra che accetta valori alfanumerici. È possibile personalizzare lo stile della casella di testo che accetta solo valori numerici, ovvero una casella numerica.

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

Invece di selezionare Widget casella numerica, seleziona Widget campo nella barra degli strumenti del componente ed esegui i passaggi indicati sopra. Quando selezionate le quote per Widget campo , tutte le caselle di testo tranne la casella numerica hanno le stesse dimensioni.

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

La barra degli strumenti del componente consente inoltre di specificare lo stile dei componenti in base ai diversi stati. Ad esempio, se un componente è disabilitato, si trova nello stato disabilitato. Gli stati comunemente utilizzati di un componente a cui è possibile applicare uno stile nell’editor di temi sono: Predefinito, Attiva, Disattivato, Errore, Operazione riuscita e Passaggio del mouse. Puoi 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, effettuare le seguenti operazioni:

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

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

Layout degli stili per schermi più piccoli styling-layouts-for-smaller-displays

Utilizza righello nell’area di lavoro per selezionare i punti di interruzione per i dispositivi con schermi più piccoli. Fai clic sull’emulatore nell'area di lavoro per visualizzare il righello e i punti di interruzione. I punti di interruzione consentono di visualizzare in anteprima un modulo per le dimensioni degli schermi relativi a dispositivi diversi, come telefoni e tablet. Nell’Editor tema sono supportate più dimensioni di visualizzazione.

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

È possibile assegnare uno stile al modulo componenti per più dispositivi. Modulo i componenti per desktop e dispositivi mobili possono avere stili completamente diversi.

Utilizzo di Web Fonts in un tema using-web-fonts-in-a-theme

È ora possibile utilizzare i font disponibili in un servizio web in un modulo adattivo . Pronti all’uso, Adobe Fonts, servizio font per web di Adobe, è disponibile come configurazione. Per utilizzare Adobe Fonts, crea un kit, aggiungi font al suo interno e ottieni l’ID kit da Adobe Fonts.

Per configurare Adobe Fonts in Experience Manager, effettua le seguenti operazioni:

Per configurare un tema per l’utilizzo della configurazione di Adobe Fonts, effettua le seguenti operazioni:

Selezione di tipi di carattere nell'editor temi selecting-fonts-in-theme-editor

È possibile utilizzare il pulsante + per aggiungere un carattere. Quando si aggiunge un carattere, questo viene elencato nella barra laterale.

Oltre all’opzione di configurazione del tema, puoi anche aggiungere il font dall’editor stesso. Digitate il font da usare nel campo famiglia font sotto la barra laterale e premete il tasto Invio sulla tastiera.

Quando selezionate un carattere, questo viene aggiunto all'elenco della famiglia di caratteri. Potete utilizzare l'opzione Maschera (Mask) nell'editor temi per disattivare o attivare i font elencati.

È possibile visualizzare il cambiamento del carattere del componente.

Il campo Famiglia di caratteri supporta più tipi di carattere. Quando digitate un font, il browser lo cerca e lo applica al componente selezionato. Se il browser non è in grado di trovare un carattere, cerca un carattere accanto ad esso nella famiglia. È possibile iniziare digitando il tipo di carattere specifico desiderato. Se non si trova il carattere da utilizzare, è possibile digitare un carattere generico nella famiglia e utilizzarlo.

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

È possibile mascherare gli stili applicati a un tema. Nella barra laterale dell’editor del tema, puoi utilizzare per disattivare uno stile applicato. Ad esempio, se si modificano le dimensioni di un componente in un modulo , è quindi possibile utilizzare il pulsante Maschera a sinistra di una proprietà per disattivarlo. Quando salvate un tema, le opzioni di mascheramento selezionate vengono mantenute.

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

Applicazione di un tema a un modulo applying-a-theme-to-a-form-or-interactive-communication-br

Per applicare un tema a un modulo adattivo:

È inoltre possibile definire un tema per un modulo adattivo durante la sua creazione.

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

Un tema consente di applicare uno stile ai diversi componenti di un modulo. È possibile utilizzare themeOverride per modificare dinamicamente il tema di una maschera. Un URL tipico di un modulo è:

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

È possibile 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

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

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

Con AEM Forms, insieme al tema predefinito dell’area di lavoro, sono disponibili molti altri temi. Se si desidera progettare il modulo utilizzando altri temi e altre modifiche, copiare il tema dalla cartella Libreria temi. Incollare i temi copiati all'esterno della cartella Libreria temi e modificare il tema copiato in base alle modifiche desiderate.

Per copiare un tema, effettuare le seguenti operazioni:

Dopo aver personalizzato il tema, applicarlo al modulo .

Impatto su altri casi d’uso dei 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. La modifica 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 CSS override per modificare la casella di testo del colore di sfondo come bianco. Quando generi CSS, il colore di sfondo viene visualizzato come bianco nel CSS generato.

Debug degli stili debugging-styles

Quando si specificano gli stili per i componenti nell’Editor tema, viene generato un CSS. Quando si applica uno stile a un componente generico, viene applicato lo stile anche a più componenti inclusi in esso. Ad esempio, quando si applica uno stile a un campo, viene applicato anche lo stile alla casella di testo e all'etichetta in esso contenuta. Quando si applica uno stile alla casella di testo all’interno del campo, viene applicato un proprio CSS. Se desideri eseguire il debug del CSS generato per il campo e il componente, l’Editor tema fornisce opzioni che ti consentono di visualizzare il CSS.

Puoi visualizzare il CSS generato utilizzando le seguenti opzioni:

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

Consulta anche see-also