Show Menu
ARGOMENTI×

Configurazione del Contenitore di layout e della modalità Layout

Layout reattivo è un meccanismo per realizzare una progettazione Web reattiva. Questo consente all'utente di creare pagine Web con layout e dimensioni dipendenti dai dispositivi utilizzati dagli utenti.
Questo può essere confrontato con i meccanismi Mobile Web , che utilizzano la progettazione Web adattiva (principalmente per l'interfaccia classica).
AEM consente di realizzare il layout dinamico per le pagine utilizzando una combinazione di meccanismi:
  • 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 Contenitore di layout predefinito è 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à ​Layout Una 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.
Although the Layout Container component is available in the classic UI, its full functionality is only available in the touch-enabled UI.
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.
In un'installazione out-of-the-box, il layout reattivo è stato configurato per il sito di riferimento We.Retail. È comunque necessario attivare il componente Contenitore di layout per altre pagine.

Configurazione dell'emulatore reattivo

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

Registra i componenti della pagina per l'emulazione

Per consentire all’emulatore di supportare le pagine, è necessario registrare i componenti della pagina. Consultate 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, consultate Specifica dei gruppi di dispositivi.

Attiva la modalità Layout per il sito

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

Configurare i 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.
Se state configurando un nuovo progetto:
  • è necessario aggiungere punti di interruzione ai modelli.
Se state eseguendo la migrazione di un progetto esistente (con contenuto esistente), dovete:
  • aggiungere punti di interruzione ai modelli
  • aggiungere gli stessi punti di interruzione alle pagine esistenti Poiché l’ereditarietà è attiva, potete limitare questa opzione alla pagina principale del contenuto.

Configurazione dei punti di interruzione con CRXDE Lite

  1. Utilizzando CRXDE Lite (o equivalente), passate a:
    • Definizione del modello.
    • Il jcr:content nodo della pagina.
  2. In jcr:content Crea 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 tramite XML

I punti di interruzione si trovano all’interno della <jcr:content> sezione della .context.html cartella del modello (o 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

Questo è necessario solo se il componente pagina non è basato sul componente pagina di base.
Copiate la seguente struttura di cq:infoProviders nodi 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 in 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 il valore LESS per generare parti del CSS necessario, che devono essere incluse nei progetti.
Sarà inoltre necessario creare una libreria clientlibs.html client per fornire ulteriori chiamate di configurazione e di 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 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à alle immagini adattive

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 set di REFRESH_PAGE listener nel file di ogni EditConfig 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.
I clientlibs di fogli di stile personalizzati devono essere caricati come parte dell'intestazione affinché funzionino correttamente sia per l'autore che per la pubblicazione.

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
    Utilizzate la modalità Configurazione dei componenti in modalità Progettazione Progettazione per attivare il componente Contenitore ​livello per una pagina.
  • Definizione componente
    Per definire il componente, utilizzate allowedComponent o includete un componente statico.

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à Configurazione dei componenti in modalità Progettazione 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, ...