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

Layout reattivo è un meccanismo per la realizzazione di design responsive. Questo consente all’utente di creare pagine web con un layout e dimensioni che dipendono 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:

Configurazione dell’emulatore reattivo configuring-the-responsive-emulator

Questa attività ti consente di visualizzare l'emulatore reattivo sul tuo sito.

Registrare i componenti pagina per l’emulazione register-your-page-components-for-emulation

Per abilitare l’emulatore a supportare le pagine, è necessario registrare i componenti della pagina. Consulta Registrazione dei componenti pagina per la simulazione.

Specificare i gruppi di dispositivi specify-the-device-groups

Per specificare i gruppi di dispositivi visualizzati nell'elenco Dispositivi dell'emulatore, vedere Specifica dei gruppi di dispositivi.

Collega il sito ai gruppi di dispositivi specificati link-your-site-to-the-specified-device-groups

Per includere l’emulatore, collega il sito ai gruppi di dispositivi. Consulta Aggiunta dell'elenco dei dispositivi (sia per l'interfaccia utente classica che per quella ottimizzata per il tocco).

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

Queste procedure vengono utilizzate per attivare la modalità Layout nel sito.

Configurare i punti di interruzione configure-the-breakpoints

Punti di interruzione:

Possono essere definiti utilizzando CRXDE Lite o XML.

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>

Aggiungere un provider di informazioni reattivo add-a-responsive-information-provider

Copia la seguente struttura di nodi cq:infoProviders nel componente della pagina padre:

/libs/foundation/components/page/cq:infoProviders/responsive

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

Queste procedure sono necessarie per ridimensionare i componenti in modalità Layout.

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.

Sarà inoltre 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

Queste attività consentono agli autori di trascinare nella pagina le istanze del componente Contenitore di layout.

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

Puoi configurare il numero di colonne disponibili per ogni istanza specifica del contenitore di layout: