Configurazione del Contenitore di layout e della modalità Layout

Layout reattivo è un meccanismo per realizzare un design Web reattivo. Questo consente all'utente 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:

• Componente Contenitore di layout

  Questo componente fornisce un sistema paragrafo a griglia che consente di aggiungere e posizionare componenti all’interno di una griglia reattiva. Può essere usato come parsys predefinito per la pagina e/o reso disponibile agli autori nel browser dei componenti.

  • Il componente predefinito Contenitore di layout è definito in:

    /libs/wcm/foundation/components/responsivegrid

  • È possibile definire contenitori di layout:

    • Componente che l’utente può aggiungere a una pagina.

    • Come impostazione predefinita parsys per la pagina.

    • Entrambe.

      Potete avere il Contenitore di layout come standard per la pagina, consentendo all'utente di aggiungere altri contenitori di layout all'interno di questo; ad esempio, per ottenere il controllo delle colonne.

• Modalità
  LayoutUna volta che il Contenitore di layout è posizionato sulla pagina, è possibile utilizzare la
  Modalità Layout per posizionare il contenuto all'interno della griglia reattiva.

• Emulatore Consente di creare e modificare siti Web reattivi il cui layout si riorganizza in base alle dimensioni del dispositivo/finestra, ridimensionando i componenti in modo interattivo. L’utente può quindi visualizzare quale sarà l’aspetto dei contenuti utilizzando l’emulatore.

Con questi meccanismi basati su una griglia reattiva è possibile:

• Usate punti di interruzione (che indicano il raggruppamento dei dispositivi) per definire comportamenti di contenuto diversi in base al layout del dispositivo.
• Nascondere i componenti in base al gruppo di dispositivi (definire il punto di interruzione che un componente deve nascondere).
• Utilizzare l'ancoraggio orizzontale sulla griglia (posizionare i componenti sulla griglia, ridimensionarli come necessario, definire quando dovrebbero venire compressi/ridisposti in modo da essere affiancati o sovrapposti).
• Gestire il controllo delle colonne.

Configurazione dell'emulatore reattivo

Queste attività consentono di visualizzare sul sito l'emulatore reattivo Emulatore.

Registra i componenti della pagina per l'emulazione

Per consentire all’emulatore di supportare le pagine, è necessario registrare i componenti della pagina. Vedere Registrazione di componenti di pagina per la simulazione.

Specificare i gruppi di dispositivi

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

Collegate il sito ai gruppi di dispositivi specificati

Per includere l'emulatore è necessario collegare il sito ai gruppi di dispositivi. Consultate Aggiunta dell'elenco dei dispositivi (per entrambe le interfacce, sia classica che touch).

Attivare la modalità Layout per il sito

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

Configurare i punti di interruzione

Punti di interruzione:

• Sono utilizzati nel design reattivo.

• Può essere definito:

  • Nel modello di pagina, le impostazioni verranno copiate nelle pagine create con tale modello.
  • Sul nodo della pagina, da cui le impostazioni verranno ereditate da qualsiasi pagina figlia.

• Definire un titolo e una larghezza:

  • Il titolo descrive il raggruppamento di dispositivi generico, con orientamento, se necessario; ad esempio telefono, tablet, tablet.
  • La larghezza definisce la larghezza massima in pixel per il raggruppamento di dispositivi generico. Ad esempio, se il telefono punto di interruzione ha una larghezza di 768, la larghezza massima del layout utilizzato per un dispositivo telefonico è pari a 768.

• Sono visibili come marcatori nella parte superiore dell’editor di pagina quando si utilizza l’emulatore.

• Sono ereditate dalla gerarchia dei nodi padre e possono essere sostituite a piacimento.

• Esiste un punto di interruzione predefinito (out-of-the-box) che copre tutto quanto si trova sopra l'ultimo punto di interruzione configurato.

Possono essere definiti utilizzando CRXDE Lite o XML.

Configurazione dei punti di interruzione con CRXDE Lite

1. Utilizzando CRXDE Lite (o equivalente), andate a:

   • Definizione del modello.
   • Il nodo jcr:content della pagina.

2. In jcr:content creare il nodo:

   • Nome: cq:responsive
   • Tipo: nt:unstructured

3. In questa sezione creare il nodo:

   • Nome: breakpoints
   • Tipo: nt:unstructured

4. Sotto il nodo punti di interruzione è possibile creare un numero qualsiasi di punti di interruzione. Ogni definizione è un nodo singolo con le seguenti proprietà:

   • Nome: <descriptive name>
   • Tipo: nt:unstructured
   • Titolo: String * <descriptive title seen in Emulator>*
   • Larghezza: Decimal * <value of breakpoint>*

Configurazione dei punti di interruzione con XML

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

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>

Aggiunta di un provider di informazioni reattive

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

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

Abilita ridimensionamento componenti per la pagina

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

Imposta Contenitore di layout come parsys principale

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

wcm/foundation/components/responsivegrid

In:

• Componente pagina
• Modello di pagina (per uso futuro)

I due esempi seguenti illustrano la definizione:

• HTL:

  <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
  

• JSP:

  <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
  

Includere il CSS reattivo

CSS per punti di interruzione con 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 funzioni. 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 si trova in:

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

Considerazioni sullo stile

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

Esempio:

• Prima:

  • width=100px

• Dopo:

  • max-width=100px

Ridimensionamento e conformità dell'immagine adattiva

Qualsiasi ridimensionamento di un componente all'interno della griglia attiverà i seguenti listener:

• beforeedit

• beforechildedit

• afteredit

• afterchildedit

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

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. Viene attivato 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 la pagina

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

Abilitare il componente Contenitore di layout per la modifica della pagina

Per consentire agli autori di aggiungere ulteriori griglie reattive alle pagine di contenuto, è necessario attivare il componente Contenitore di layout per la pagina. Potete eseguire questa operazione tramite:

• Ambiente di authoring

  Utilizzare la modalità Progettazione per attivare il componente Contenitore livello per una pagina.

• Definizione componente

  Per definire il componente, utilizzate allowedComponent o un'inclusione statica.

Configurare la griglia del contenitore di layout

Potete configurare il numero di colonne disponibili per ogni istanza specifica di Contenitore di layout:

1. Ambiente di authoring

   Potete configurare il numero di colonne disponibili per ogni istanza specifica del Contenitore di layout.

   A questo scopo, utilizzate la modalità Progettazione, quindi aprite la finestra di dialogo di progettazione per il contenitore richiesto. Qui è possibile specificare quante colonne saranno disponibili per il posizionamento e il ridimensionamento. Il valore predefinito è 12.

2. XML

   Le definizioni per la griglia reattiva sono specificate in:

   etc/design/<*your-project-name*>/.content.xml

   È possibile definire i seguenti parametri:

   • Numero di colonne disponibili:

     • columns="{String}8"

   • Componenti che possono essere aggiunti al componente corrente:

     • components="[/libs/wcm/foundation/components/responsivegrid, ...