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:
-
Componente Contenitore di layout
Questo componente fornisce un sistema paragrafo a griglia che consente di aggiungere e posizionare i componenti all’interno di una griglia reattiva. Può essere utilizzato come parsys predefinito per la pagina e/o reso disponibile agli autori nel browser Componenti.
-
Il valore predefinito Contenitore di layout il componente è definito in:
/libs/wcm/foundation/components/responsivegrid
-
Puoi definire contenitori layout:
-
Componente che l’utente può aggiungere a una pagina.
-
Come impostazione predefinita parsys per la pagina.
-
Entrambi.
È possibile avere il Contenitore di layout come standard per la pagina, consentendo all’utente di aggiungere altri contenitori di layout al suo interno; ad esempio, per ottenere il controllo delle colonne.
-
-
-
Modalità Layout
Una volta che il Contenitore di layout è collocato nella pagina, è possibile utilizzare la funzione
Layout per posizionare il contenuto all’interno della griglia reattiva. -
Emulatore
Questo 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 del contenuto utilizzando l’emulatore.
Con questi meccanismi a griglia reattiva è possibile:
- Utilizza i 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 nella griglia, ridimensionarli, definire quando dovrebbero venire compressi/ridisposti in modo da essere affiancati o sovrapposti).
- Gestire il controllo delle colonne.
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
-
Sono utilizzati nel design reattivo.
-
Può essere definito:
- Nel modello di pagina, da dove le impostazioni verranno copiate in tutte le pagine create con tale modello.
- Sul nodo della pagina, da dove 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 quel 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.
-
Sono visibili come marcatori nella parte superiore dell’editor di pagine quando utilizzi l’emulatore.
-
Sono ereditate dalla gerarchia dei nodi principali e possono essere ignorate a piacimento.
-
È disponibile un punto di interruzione predefinito (preconfigurato) che copre tutto quanto si trova al di sopra dell’ultimo configurato punto di interruzione.
È possibile definirli utilizzando CRXDE Lite o XML.
- è necessario aggiungere punti di interruzione ai modelli.
- aggiungere punti di interruzione ai modelli
- aggiungere gli stessi punti di interruzione alle pagine esistenti
Poiché l’ereditarietà è attiva, puoi limitarla alla pagina principale del contenuto.
Configurazione dei punti di interruzione con CRXDE Lite configuring-breakpoints-using-crxde-lite
-
Utilizzando CRXDE Lite (o equivalente), accedi a:
- Definizione del modello.
- La
jcr:content
nodo della pagina.
-
Sotto
jcr:content
crea il nodo:- Nome:
cq:responsive
- Tipo:
nt:unstructured
- Nome:
-
Sotto questo crea il nodo:
- Nome:
breakpoints
- Tipo:
nt:unstructured
- Nome:
-
Sotto il nodo dei punti di interruzione è possibile creare un numero qualsiasi di punti di interruzione. Ogni definizione è un singolo nodo con le seguenti proprietà:
- Nome:
<descriptive name>
- Tipo:
nt:unstructured
- Titolo:
String
*<descriptive title seen in Emulator>
* - Larghezza:
Decimal
*<value of breakpoint>
*
- Nome:
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:
- Componente pagina
- Modello di pagina (per utilizzi futuri)
I due esempi seguenti illustrano la definizione:
-
HTL:
code language-xml <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
-
JSP:
code language-none <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
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:
-
Prima:
width=100px
-
Dopo:
max-width=100px
Ridimensionamento e conformità alle immagini adattive resizing-and-adaptive-image-compliance
Qualsiasi ridimensionamento di un componente all’interno della griglia attiverà i seguenti ascoltatori:
-
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
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:
-
Ambiente di authoring
Utilizzo Modalità Progettazione per attivare Contenitore livello per una pagina.
-
Definizione del componente
Utilizzo
allowedComponent
o un’inclusione statica durante la definizione del componente.
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:
-
Ambiente di authoring
È possibile configurare il numero di colonne disponibili per ogni istanza specifica del contenitore di layout.
A questo scopo, utilizza Modalità Progettazione, quindi apri la finestra di dialogo di progettazione per il contenitore richiesto. Qui puoi specificare quante colonne saranno disponibili per il posizionamento e il dimensionamento. Il valore predefinito è 12.
-
XML
Le definizioni della griglia dinamica 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, ...
-