AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.
AEM consente di avere un layout reattivo per le pagine utilizzando la Contenitore di layout componente.
Questo fornisce un sistema paragrafo che consente di posizionare i componenti all’interno di una griglia reattiva. Questa griglia può ridisporre il layout in base alle dimensioni e al formato del dispositivo/finestra. Il componente viene utilizzato insieme alla modalità Layout, che consente di creare e modificare il layout reattivo (o dinamico) in base al dispositivo.
Contenitore di layout:
Fornisce ancoraggio orizzontale sulla griglia, insieme alla possibilità di posizionare i componenti affiancati nella griglia e definire quando dovrebbero venire compressi o ridisposti.
Utilizza punti di interruzione predefiniti (ad esempio per telefono, tablet, ecc.) per definire il comportamento richiesto del contenuto per i relativi dispositivi/orientamento.
Può essere nidificato per consentire il controllo delle colonne.
L’utente può quindi visualizzare quale sarà l’aspetto dei contenuti per dispositivi specifici utilizzando l’emulatore.
Il componente Contenitore di layout è disponibile anche nell’interfaccia classica, ma le sue funzionalità complete sono supportate e disponibili solo nell’interfaccia touch.
AEM consente di realizzare il layout dinamico per le pagine utilizzando una combinazione di meccanismi:
Componente Contenitore di layout
Questo componente è disponibile nel browser dei componenti e fornisce un sistema paragrafo a griglia che consente di aggiungere e posizionare i componenti all’interno di una griglia dinamica. Può essere impostato anche come sistema paragrafo predefinito sulla tua pagina.
Una volta che il Contenitore di layout è collocato nella pagina, è possibile utilizzare la modalità di Layout per posizionare i contenuti all’interno della griglia dinamica.
Emulatore
Consente di creare e modificare siti web dinamici il cui layout si riorganizza in base alle dimensioni del dispositivo o della finestra, ridimensionando i componenti in modo interattivo. L’utente può quindi visualizzare quale sarà l’aspetto dei contenuti utilizzando l’emulatore.
Con questi meccanismi a griglia reattiva è possibile:
A seconda del progetto, il Contenitore di layout può essere usato come il sistema paragrafo predefinito per le pagine o come componente disponibile per essere aggiunto alla pagina tramite il browser Componenti (o entrambi).
Adobe fornisce la documentazione GitHub relativa al layout dinamico come riferimento per gli sviluppatori front-end, consentendo loro di utilizzare la griglia di AEM fuori da AEM, ad esempio quando si crea uno schema HTML statico per un futuro sito AEM.
L’uso dei meccanismi di cui sopra è abilitato mediante la configurazione del modello. Vedi Configurazione del layout reattivo per ulteriori informazioni.
Quando si crea il contenuto del sito web è importante assicurarsi che venga visualizzato in modo adatto al dispositivo utilizzato.
AEM consente di definire layout dipendenti dalla larghezza del dispositivo:
L’emulatore consente di emulare questi layout su una serie di dispositivi. Oltre al tipo di dispositivo, anche l’orientamento impostato dall’opzione Ruota dispositivo può influenzare il punto di interruzione che viene selezionato quando cambia la larghezza.
I punti di interruzione sono i punti che separano le definizioni di layout.
Il dispositivo Desktop è privo di una larghezza specifica e fa riferimento al punto di interruzione predefinito (ovvero tutto quanto si trova oltre l’ultimo punto di interruzione configurato).
È teoricamente possibile definire punti di interruzione per ogni singolo dispositivo, ma questo rende decisamente più macchinose la definizione e la manutenzione dei layout.
Quando utilizzi l’emulatore, selezioni un dispositivo specifico per l’emulazione e la definizione del layout; viene evidenziato anche il relativo punto di interruzione. Eventuali modifiche apportate al layout saranno applicabili agli altri dispositivi a cui si applica il punto di interruzione, ovvero a tutti i dispositivi posizionati a sinistra del marcatore del punto di interruzione attivo, ma prima del marcatore del punto di interruzione successivo.
Ad esempio, quando selezioni il dispositivo iPhone 6 Plus (definito con una larghezza di 540 pixel) per l’emulazione e il layout, il punto di interruzione Telefono (definito a 768 pixel) verrà attivato anche. Qualsiasi modifica apportata al layout per iPhone 6 sono applicabili ad altri dispositivi ai sensi del Telefoni punto di interruzione, ad esempio iPhone 5 (definito a 320 pixel).
Apri la pagina desiderata per la modifica. Ad esempio:
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html
Seleziona l’icona Emulatore sulla barra degli strumenti in alto:
Viene aperta la barra degli strumenti dell’emulatore.
La barra degli strumenti dell’emulatore mostra le seguenti opzioni di layout aggiuntive:
Per selezionare un dispositivo specifico da emulare è possibile effettuare le seguenti operazioni:
Una volta che un dispositivo specifico è stato selezionato è possibile:
Un Contenitore di layout è un sistema paragrafo che:
Se non è già disponibile, la Contenitore di layout devono essere esplicitamente attivato per un sistema paragrafo/pagina (ad esempio, utilizzando Progettazione modalità).
Il Contenitore di layout è disponibile come componente standard nel browser componenti. Da qui è possibile trascinarlo nella posizione desiderata sulla pagina, dopodiché verrà visualizzato il segnaposto Trascina qui i componenti.
È quindi possibile aggiungere componenti al Contenitore di layout. Questi componenti includeranno il contenuto vero e proprio:
Come con altri componenti, puoi selezionare e quindi intervenire (opzioni Copia, Taglia, Elimina) su un Contenitore di layout (in modalità di modifica):
Poiché un contenitore di layout è un sistema paragrafo, l’eliminazione del componente comporta l’eliminazione della griglia di layout e di tutti i componenti (e del relativo contenuto) contenuti all’interno del contenitore .
Se passi il cursore del mouse o tocchi il segnaposto della griglia, viene visualizzato il menu delle azioni.
È necessario selezionare l’opzione Elemento padre.
Se il componente di layout è nidificato, selezionando la Elemento padre presenta una selezione a discesa, che consente di selezionare il contenitore di layout nidificato o quello principale.
Quando passi il puntatore del mouse sui nomi dei contenitori nel menu a discesa, i relativi contorni verranno visualizzati sulla pagina.
In questo modo viene messa evidenziata l’intera griglia con il relativo contenuto. Viene visualizzata la barra degli strumenti delle azioni, da cui è possibile selezionare un’azione, ad esempio Elimina.
È possibile definire un layout distinto per ogni punto di interruzione (come determinato dal tipo di dispositivo e dall’orientamento emulati).
Per configurare il layout di una griglia dinamica implementato con il contenitore di layout è necessario utilizzare la modalità Layout.
La modalità Layout può essere avviata in due modi.
Utilizzando il menu modalità nella barra degli strumenti e selezionando la modalità Layout
Quando modifica di un singolo componente.
In modalità layout è possibile eseguire varie azioni su una griglia:
Ridimensiona i componenti di contenuto utilizzando i punti blu. Il ridimensionamento sarà sempre snap-in-griglia. Quando si ridimensiona la griglia di sfondo, questa viene visualizzata per facilitare l’allineamento:
Proporzioni e rapporti relativi saranno mantenuti al ridimensionamento di componenti come le immagini.
Facendo clic/toccando un componente di contenuti la barra degli strumenti consente di:
Elemento padre
Consente di selezionare l’intero componente Contenitore di layout per intervenire su di esso nel complesso.
Mobile in nuova riga
Il componente viene spostato su una nuova riga, a seconda dello spazio disponibile all’interno della griglia.
Nascondi componente
Il componente viene reso invisibile (può essere ripristinato dalla barra degli strumenti del Contenitore di layout).
In modalità Layout tocca o fai clic su Trascina qui i componenti per selezionare l’intero componente. Verrà visualizzata la barra degli strumenti per questa modalità.
La barra degli strumenti presenta opzioni diverse a seconda dello stato del componente layout e dei componenti che lo appartengono. Esempio:
Nell’esempio in alto le azioni Mobile e Nascondi sono disponibili, perché questo Contenitore di layout è nidificato all’interno di un Contenitore di layout principale.
Selezionando l’opzione Mostra componenti nascosti, i componenti che sono attualmente nascosti nelle posizioni originali vengono visualizzati in blu.
Selezionando Ripristina tutto, tutti i componenti nascosti diventano visibili.