Configurazione del contenitore di layout e della modalità di layout configuring-layout-container-and-layout-mode

Layout reattivo è un meccanismo per realizzare la progettazione Web reattiva. Consente all'autore di contenuto di creare pagine Web con layout e dimensioni dipendenti dai dispositivi utilizzati dagli utenti.

AEM consente di realizzare il layout dinamico per le pagine utilizzando una combinazione di meccanismi:

Con questi meccanismi basati su una griglia dinamica è possibile:

Abilitazione dell’emulatore enabling-emulator

L'Archetipo progetto e il Modello di sito standard sono già abilitati per utilizzare l'emulatore. Se hai sviluppato contenuti personalizzati non basati sui Componenti core o sull'archetipo, consulta il documento Progettazione reattiva per informazioni dettagliate su come sviluppare i componenti sfruttando queste funzioni.

Attiva modalità layout per il sito activate-layout-mode-for-your-site

La modalità Layout consente di utilizzare l'emulatore per regolare il layout del contenuto per dispositivi diversi. Il sito di esempio WKND è già abilitato per la modalità Layout. Per abilitare il tuo sito, segui la procedura riportata di seguito.

Configurare i punti di interruzione configure-breakpoints

I punti di interruzione sono vitali per la progettazione reattiva e definiscono come e quando il contenuto viene regolato sul dispositivo di destinazione. Tuttavia, presta attenzione, poiché ogni punto di interruzione introdotto genererà ulteriore lavoro per gli autori in modo da includere il contenuto. Spesso possono essere sufficienti due punti di interruzione, incluso il punto di interruzione predefinito che è sempre presente. L'Adobe consiglia di non creare più di tre punti di interruzione, incluso il valore predefinito, ovvero non più di due nodi sotto cq:responsive/breakpoint.

I punti di interruzione dovrebbero essere presi in considerazione sia per i progetti nuovi che per quelli esistenti.

A causa dell’ereditarietà, è necessario eseguire questa operazione solo per la pagina principale del contenuto.

Configurazione dei punti di interruzione tramite CRXDE Lite configuring-breakpoints-using-crxde-lite

Configurazione dei punti di interruzione tramite XML configuring-breakpoints-using-xml

I punti di interruzione si trovano all'interno della sezione <jcr:content> di .context.html nella cartella del modello (o del contenuto) appropriata.

Esempio di definizione:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Abilita il ridimensionamento dei componenti per la pagina enable-component-resizing-for-the-page

Il ridimensionamento dei componenti in modalità Layout è una parte importante della progettazione reattiva, che può essere utilizzata nel sito di esempio WKND. Per abilitare il tuo sito, segui la procedura riportata di seguito.

Imposta contenitore layout come parsys principale set-layout-container-as-main-parsys

Per impostare il parsys principale della pagina come contenitore di layout, definisci il parsys come:

wcm/foundation/components/responsivegrid

In:

I due esempi seguenti illustrano la definizione:

Includi CSS reattivo include-the-responsive-css

CSS per i punti di interruzione che utilizzano MENO css-for-breakpoints-using-less

AEM utilizza LESS per generare parti del CSS necessario, che devono essere incluse nei progetti.

È necessario creare una libreria client per fornire ulteriori chiamate di configurazione e funzione. Il seguente estratto LESS è un esempio del minimo da aggiungere al progetto:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

La definizione della griglia di base è disponibile in:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Considerazioni sullo stile styling-considerations

I componenti contenuti in un contenitore reattivo vengono ridimensionati (insieme ai rispettivi elementi DOM HTML) in base alla dimensione della griglia reattiva. Pertanto, in queste circostanze, si consiglia di evitare (o aggiornare) le definizioni degli elementi DOM a larghezza fissa (contenuti).

Ad esempio:

Ridimensionamento e conformità dell'immagine adattiva resizing-and-adaptive-image-compliance

Qualsiasi ridimensionamento di un componente all’interno della griglia attiva i seguenti listener, a seconda delle necessità:

Per ridimensionare e aggiornare correttamente il contenuto di un'immagine adattiva inclusa in una griglia reattiva, è necessario aggiungere un set afterEdit al listener REFRESH_PAGE nel file EditConfig di ogni componente contenuto.

Ad esempio:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

Il meccanismo di immagine adattiva è reso disponibile tramite uno script che controlla la selezione dell’immagine corretta per le dimensioni correnti della finestra. Si attiva dopo che il DOM è pronto o quando si riceve un evento dedicato. Attualmente è necessario aggiornare la pagina per riflettere correttamente il risultato dell’azione dell’utente.

Abilitare il componente Contenitore di layout per la pagina enable-the-layout-container-component-for-page

Per un layout dinamico efficace, l’autore di contenuto deve essere in grado di trascinare le istanze del componente Contenitore di layout sulla pagina. Questa opzione è già abilitata per il sito di esempio WKND. Per abilitare il tuo sito, segui la procedura riportata di seguito.

Abilitare il componente Contenitore di layout per la modifica delle pagine enable-the-layout-container-component-for-page-editing

Per consentire agli autori di aggiungere ulteriori griglie reattive alle pagine di contenuto, devi abilitare il componente Contenitore di layout per la pagina. Puoi eseguire questa operazione utilizzando:

Configurare la griglia del contenitore di layout configure-the-grid-of-the-layout-container

È possibile configurare il numero di colonne disponibili per ogni istanza specifica del contenitore di layout modificando i modelli di pagina.