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

Layout reattivo è un meccanismo di realizzazione web design dinamico. Questo consente all’utente di creare pagine web con 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 a griglia reattiva è possibile:

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

Queste attività ti consentono di visualizzare il reattivo Emulatore sul tuo sito.

Registra i componenti pagina per emulazione register-your-page-components-for-emulation

Per abilitare l’emulatore a supportare le pagine, è necessario registrare i componenti della pagina. Vedi 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, vedi Specifica dei gruppi di dispositivi.

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

Per includere l'emulatore è necessario collegare il sito ai gruppi di dispositivi. Vedi Aggiunta dell’elenco dei dispositivi (sia per l’interfaccia classica che per quella touch).

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

Tali procedure sono utilizzate per Layout sul sito.

Configurare i punti di interruzione configure-the-breakpoints

Punti di interruzione:

È possibile definirli utilizzando CRXDE Lite o XML.

Configurazione dei punti di interruzione con 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 <jcr:content> della sezione .context.html nella cartella del modello (o contenuto) appropriata.

Una definizione di esempio:

<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 reattive 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 ridimensionamento componente per la pagina enable-component-resizing-for-the-page

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

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

Per impostare parsys principale della pagina come contenitore di layout, è necessario definire parsys come segue:

wcm/foundation/components/responsivegrid

In:

I due esempi seguenti illustrano la definizione:

Includere i CSS reattivi include-the-responsive-css

CSS per punti di interruzione con LESS css-for-breakpoints-using-less

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

Sarà inoltre necessario creare un libreria client per fornire ulteriori chiamate di configurazione e di funzione. Il seguente estratto di 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 si trova in:

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

Considerazioni sullo stile styling-considerations

I componenti contenuti in un contenitore dinamico vengono ridimensionati (insieme ai rispettivi elementi DOM di HTML) in base alle dimensioni della griglia reattiva. Pertanto, in queste circostanze, si raccomanda di evitare (o aggiornare) le definizioni di elementi DOM a larghezza fissa (contenuti).

Ad esempio:

Ridimensionamento e conformità alle immagini adattive resizing-and-adaptive-image-compliance

Qualsiasi ridimensionamento di un componente all’interno della griglia attiverà i seguenti ascoltatori:

Per ridimensionare e aggiornare correttamente il contenuto di un’immagine adattiva inclusa in una griglia reattiva, è necessario aggiungere un afterEdit impostato su REFRESH_PAGE nel 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 riceve un evento dedicato. Al momento la pagina deve essere aggiornata per riflettere correttamente il risultato dell’azione dell’utente.

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

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

Attivare 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, è necessario 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: