Punti di interruzione reattivi

Scopri come configurare nuovi punti di interruzione reattivi per l’Editor pagina reattivo per AEM.

Creare punti di interruzione CSS

Innanzitutto, crea punti di interruzione multimediali nel CSS della griglia reattiva dell’AEM a cui aderisce il sito dell’AEM reattivo.

Nel file /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less, creare i punti di interruzione da utilizzare insieme all'emulatore mobile. Prendere nota di max-width per ogni punto di interruzione, in quanto i punti di interruzione CSS vengono mappati ai punti di interruzione dell'Editor pagina reattivo dell'AEM.

Personalizzare i punti di interruzione del modello

Apri il file ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml e aggiorna cq:responsive/breakpoints con le nuove definizioni dei nodi dei punti di interruzione. Ogni punto di interruzione CSS deve avere un nodo corrispondente in breakpoints con la relativa proprietà width impostata sul max-width del punto di interruzione CSS.

Creare emulatori

È necessario definire gli emulatori AEM che consentano agli autori di selezionare la vista reattiva da modificare nell’Editor pagina.

Crea nodi emulatori in /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators

Ad esempio, /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape. Copiare un nodo emulatore di riferimento da /libs/wcm/mobile/components/emulators in CRXDE Lite in e aggiornare la copia per accelerare la definizione del nodo.

Crea gruppo di dispositivi

Raggruppa gli emulatori per renderli disponibili nell'Editor pagina AEM.

Crea la struttura del nodo /apps/settings/mobile/groups/<name of device group> in /ui.apps/src/main/content/jcr_root.

Crea un file .content.xml in /apps/settings/mobile/groups/<device group name> e definisci
i nuovi emulatori che utilizzano un codice simile a quello seguente:

Aggiornare il gruppo di dispositivi del modello

Infine, mappa nuovamente il gruppo di dispositivi sul modello della pagina in modo che gli emulatori siano disponibili nell’Editor pagina per le pagine create da questo modello.

Apri il file ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml e aggiorna la proprietà cq:deviceGroups per fare riferimento al nuovo gruppo mobile (ad esempio, cq:deviceGroups="[mobile/groups/customdevices]")