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

Layout reattivo è un meccanismo per realizzare 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 Emulatore 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 della 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 Layout sul sito.

Configurare i punti di interruzione configure-the-breakpoints

Punti di interruzione:

Possono essere definiti utilizzando CRXDE Liti o XML.

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

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

I punti di interruzione si trovano all'interno del <jcr:content> sezione del .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 quanto segue cq:infoProviders struttura del nodo 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 poter ridimensionare i componenti in Layout modalità.

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.

Dovrai anche creare una libreria client per fornire chiamate di configurazione e funzione aggiuntive. 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 una afterEdit imposta su REFRESH_PAGE listener in EditConfig file 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 le istanze del Contenitore di layout sulla pagina.

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: