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.
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:
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.
Anche se il componente Contenitore di layout è disponibile nell'interfaccia classica, le sue funzionalità complete sono disponibili solo nell'interfaccia touch.
Con questi meccanismi basati su una griglia reattiva è possibile:
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.
Queste attività consentono di visualizzare sul sito l'emulatore reattivo Emulatore.
Per consentire all’emulatore di supportare le pagine, è necessario registrare i componenti della pagina. Vedere Registrazione di componenti di pagina per la simulazione.
Per specificare i gruppi di dispositivi che vengono visualizzati nell'elenco Dispositivi dell'emulatore, vedere Specifica dei gruppi di dispositivi.
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).
Queste procedure vengono utilizzate per attivare la modalità Layout sul sito.
Sono utilizzati nel design reattivo.
Può essere definito:
Definire un titolo e una larghezza:
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:
Se state eseguendo la migrazione di un progetto esistente (con contenuto esistente), dovete:
Utilizzando CRXDE Lite (o equivalente), andate a:
jcr:content
della pagina.In jcr:content
creare il nodo:
cq:responsive
nt:unstructured
In questa sezione creare il nodo:
breakpoints
nt:unstructured
Sotto il nodo punti di interruzione è possibile creare un numero qualsiasi di punti di interruzione. Ogni definizione è un nodo singolo con le seguenti proprietà:
<descriptive name>
nt:unstructured
String
* <descriptive title seen in Emulator>
*Decimal
* <value of breakpoint>
*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>
Questo è necessario solo se il componente pagina non è basato sul componente pagina di base.
Copiate la seguente struttura di nodi cq:infoProviders
nel componente della pagina padre:
/libs/foundation/components/page/cq:infoProviders/responsive
Queste procedure sono necessarie per ridimensionare i componenti nella modalità Layout.
Per impostare parsys principale della pagina come contenitore di layout, è necessario definire parsys come:
wcm/foundation/components/responsivegrid
In:
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" />
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
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
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.
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.
Queste attività consentono agli autori di trascinare le istanze del componente Contenitore di layout sulla 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.
Potete configurare il numero di colonne disponibili per ogni istanza specifica di Contenitore di layout:
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.
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, ...