Show Menu
ARGOMENTI×

Sistema di stili

Il sistema di stili consente all’autore del modello di definire le classi di stile nel criterio del contenuto di un componente, in modo che un autore di contenuti possa sceglierli quando modifica un componente in una pagina. Questi stili possono essere variazioni visive alternative di un componente, rendendo il componente più flessibile.
In questo modo si elimina la necessità di creare un componente personalizzato per ogni stile o di personalizzare la finestra di dialogo del componente per attivare questa funzionalità. Il risultato sono componenti che possono essere riutilizzati più rapidamente e adattati in modo semplice e veloce alle esigenze degli autori di contenuti, senza ricorrere allo sviluppo back-end in AEM.

Caso d’uso

Gli autori di modelli non solo hanno bisogno della possibilità di configurare il funzionamento dei componenti per gli autori di contenuti, ma devono anche poter configurare una serie di varianti visive alternative di un componente.
Allo stesso modo, gli autori di contenuti non solo devono poter strutturare e organizzare i contenuti, ma anche selezionare come presentarlo visivamente.
Il sistema Style offre una soluzione unificata ai requisiti dell'autore del modello e dell'autore del contenuto:
  • Gli autori di modelli possono definire le classi di stile nel criterio dei contenuti dei componenti.
  • Gli autori di contenuti possono quindi selezionare tali classi da un menu a discesa quando modificano il componente su una pagina, per applicarvi gli stili corrispondenti.
La classe di stile viene quindi inserita nell’elemento wrapper decorativo del componente, in modo che lo sviluppatore di componenti non debba preoccuparsi della gestione degli stili una volta fornite le regole CSS.

Panoramica

L'utilizzo di Style System in genere ha il seguente modulo.
  1. Il web designer crea diverse varianti grafiche di un componente.
  2. Allo sviluppatore HTML viene fornito l’output HTML dei componenti e le varianti visive desiderate da implementare.
  3. Lo sviluppatore HTML definisce le classi CSS corrispondenti a ciascuna variante visiva da inserire nell’elemento che racchiude i componenti.
  4. Lo sviluppatore HTML implementa il codice CSS (ed eventualmente il codice JS) corrispondente per ciascuna delle varianti visive in modo che risultino definite.
  5. Lo sviluppatore AEM inserisce il CSS fornito (e l’eventuale JS) in una Libreria client e la distribuisce.
  6. Lo sviluppatore AEM o l’autore di modelli configura i modelli di pagina e modifica il criterio di ciascun componente con stili, aggiungendo le classi CSS definite, assegnando nomi descrittivi a ogni stile e indicando quali stili possono essere combinati.
  7. L’autore della pagina AEM può quindi scegliere gli stili progettati nell’editor di pagine tramite il menu degli stili, nella barra degli strumenti del componente.
Solo gli ultimi tre passaggi vengono effettivamente effettuati in AEM. Tutte le operazioni di sviluppo CSS e Javascript necessarie possono essere eseguite senza AEM.
L’implementazione degli stili richiede infatti solo la distribuzione in AEM e la selezione all’interno dei componenti dei modelli desiderati.
Nel diagramma seguente è illustrata l'architettura di Style System.

Utilizzo

A dimostrazione di questa funzione, come esempio verrà utilizzata l’implementazione WKND del componente aem_cmp_title_v2 titolo del componente principale.
The following sections As a Content Author and As a Template Author describe how to test the functionality of the Style System using the Style System of WKND.
Se si desidera utilizzare il Sistema di stile per i propri componenti, effettuare le seguenti operazioni:
  1. Installa il CSS come librerie client come illustrato nella sezione Panoramica .
  2. Configura le classi CSS da rendere disponibili agli autori di contenuti come descritto nella sezione Autore di modelli .
  3. Gli autori di contenuti possono quindi utilizzare gli stili come descritto nella sezione Autore di contenuti .

Autore di contenuti

  1. Dopo aver installato il progetto WKND, andate alla home page della lingua inglese di WKND in http://<host>:<port>/sites.html/content/wknd/language-masters/en e modificate la pagina.
  2. Selezionate un componente Titolo più in basso nella pagina
  3. Tocca o fai clic sul pulsante Stili nella barra degli strumenti del componente Elenco per aprire il menu degli stili e modificare l’aspetto del componente.
    In questo esempio, gli stili Colori ( Nero , Bianco e Grigio ) si escludono a vicenda, mentre le opzioni Stile (Sottolineato, Allinea a destra, Allinea a destra, MiniSping) possono essere combinate. Tutto questo può essere configurato nel modello se si è l’autore del modello .

Autore di modelli

  1. While editing WKND's English language master home page at http://<host>:<port>/sites.html/content/wknd/language-masters/en , edit the template of the page via Page Information -> Edit Template .
  2. Edit the policy of the Title component by tapping or clicking the Policy button of the component.
  3. Nella scheda Stili delle proprietà puoi vedere come sono stati configurati gli stili.
    • Nome gruppo: gli stili possono essere raggruppati all’interno del menu stile che l’autore del contenuto visualizza durante la configurazione dello stile del componente.
    • Gli stili possono essere combinati: consente di selezionare diversi stili all’interno del gruppo in una sola volta.
    • Nome stile: descrizione dello stile che verrà visualizzata dall’autore del contenuto durante la configurazione dello stile del componente.
    • Classi CSS: nome effettivo della classe CSS associata allo stile.
    Utilizza le maniglie di trascinamento per definire l’ordine dei gruppi e degli stili all’interno dei gruppi. Utilizza le icone Aggiungi o Elimina per aggiungere o rimuovere gruppi o stili all’interno dei gruppi.
The CSS classes (as well as any necessary Javascript) configured as style properties of a component's policy must be deployed as Client Libraries in order to work.

Configurazione

I componenti core versione 2 e successive sono completamente attivati per sfruttare lo Style System e non richiedono alcuna configurazione aggiuntiva.
I passaggi seguenti sono necessari solo per abilitare il Sistema di stile per i propri componenti personalizzati o per abilitare la scheda Stili facoltativi nella finestra di dialogo Modifica.

Abilita scheda Stile nella finestra di dialogo Progettazione

Affinché un componente funzioni con il sistema di stile di AEM e visualizzi la scheda di stile nella relativa finestra di dialogo di progettazione, lo sviluppatore deve includere nel componente la scheda di stile con le seguenti impostazioni:
  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"
Con il componente configurato, gli stili configurati dall’autore della pagina vengono automaticamente inseriti da AEM sull’elemento decorativo in cui AEM racchiude in automatico ciascun componente modificabile. Il componente in sé non deve fare altro affinché questo accada.

Abilita scheda Stili nella finestra di dialogo di modifica

Dalla versione 6.4.7.0 di AEM è ora disponibile una scheda Stili opzionale nella finestra di dialogo Modifica. A differenza della scheda Finestra di dialogo Progettazione, la scheda nella finestra di dialogo Modifica non è essenziale per il funzionamento del sistema di stile, ma è un'interfaccia alternativa opzionale per l'impostazione degli stili da parte dell'autore del contenuto.
La scheda della finestra di dialogo di modifica può essere inclusa in modo simile alla scheda della finestra di dialogo di progettazione:
  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"
Per impostazione predefinita, la scheda Stili nella finestra di dialogo Modifica non è abilitata.

Stili con nomi di elementi

Uno sviluppatore può anche configurare un elenco di nomi di elementi consentiti per gli stili sul componente con la proprietà string array cq:styleElements . Quindi, nella scheda Stili del criterio nella finestra di dialogo della progettazione, l’autore del modello può anche scegliere un nome di elemento da impostare per ogni stile. In questo modo verrà impostato il nome dell’elemento wrapper.
Questa proprietà è impostata sul nodo cq:Component . Esempio:
  • /apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
Evita di definire i nomi di elementi per stili che possono essere combinati. Quando sono definiti più nomi di elementi, l’ordine di priorità è:
  1. HTL ha la precedenza su tutto: data-sly-resource="${'path/to/resource' @ decorationTagName='span'}
  2. Poi, tra più stili attivi, viene considerato il primo nell’elenco degli stili configurati nel criterio del componente.
  3. Infine, il  cq:tagName / cq:htmlTag del componente sarà considerato un valore di fallback.
Questa capacità di definire i nomi degli stili è utile per i componenti molto generici, come Contenitore di layout, o il componente Frammento di contenuto, al fine di attribuire loro un significato aggiuntivo.
Ad esempio, consente di attribuire a un Contenitore di layout semantiche come <main> , <aside> , <nav> e così via.