Adobe consiglia di utilizzare l'editor SPA per i progetti che richiedono il rendering lato client basato sul framework dell'applicazione a pagina singola (ad es. React). Per saperne di più.
Adobe Experience Manager (AEM) consente agli autori di visualizzare una pagina in un emulatore che simula l’ambiente in cui l’utente finale visualizzerà la pagina, ad esempio su un dispositivo mobile o in un client di posta elettronica.
Framework emulatore AEM:
Questa funzione è supportata solo nell’interfaccia classica.
Un emulatore:
/libs/wcm/emulator/components/base
.L'emulatore funziona racchiudendo il contenuto HTML del corpo in DIV emulatori. Ad esempio, il seguente codice HTML:
<body>
<div id="wrapper" class="page mobilecontentpage ">
<div class="topnav mobiletopnav">
...
</div>
...
</div>
</body>
viene trasformato nel seguente codice HTML dopo l’inizio dell’emulatore:
<body>
<div id="cq-emulator-toolbar">
...
</div>
<div id="cq-emulator-wrapper">
<div id="cq-emulator-device">
<div class=" android vertical" id="cq-emulator">
...
<div class=" android vertical" id="cq-emulator-content">
...
<div id="wrapper" class="page mobilecontentpage">
...
</div>
...
</div>
</div>
</div>
</div>
...
</body>
Sono stati aggiunti due tag div:
il div con id cq-emulator
che contiene l'emulatore nel suo insieme e
il div con id cq-emulator-content
che rappresenta l'area di visualizzazione/schermo/contenuto del dispositivo in cui risiede il contenuto della pagina.
Le nuove classi CSS sono inoltre assegnate ai nuovi div emulatore: rappresentano il nome dell'emulatore corrente.
I plug-in di un emulatore possono estendere ulteriormente l'elenco delle classi CSS assegnate, come nell'esempio del plugin di rotazione, inserendo una classe "verticale" o "orizzontale" a seconda della rotazione corrente del dispositivo.
In questo modo, l'aspetto completo dell'emulatore può essere controllato facendo sì che le classi CSS corrispondenti agli ID e alle classi CSS dell'emulatore subs.
È consigliabile che il progetto HTML racchiuda il contenuto del corpo in un singolo div, come nell'esempio precedente. Se il contenuto del corpo contiene più tag, potrebbero verificarsi risultati imprevedibili.
Gli emulatori mobili esistenti:
Sono sotto /libs/wcm/mobile/components/emulators.
Sono disponibili tramite il servlet JSON all'indirizzo:
http://localhost:4502/bin/wcm/mobile/emulators.json
Quando il componente pagina si basa sul componente pagina mobile ( /libs/wcm/mobile/components/page
), la funzionalità emulatore viene automaticamente integrata nella pagina tramite il seguente meccanismo:
Il componente pagina mobile head.jsp
include il componente init dell'emulatore associato al gruppo di dispositivi (solo in modalità di creazione) e il rendering CSS del gruppo di dispositivi attraverso:
deviceGroup.drawHead(pageContext);
Il metodo DeviceGroup.drawHead(pageContext)
include il componente init dell'emulatore, ovvero chiama il componente init.html.jsp
dell'emulatore. Se il componente emulatore non ha un proprio init.html.jsp
e si basa sull'emulatore di base mobile ( wcm/mobile/components/emulators/base)
, viene chiamato lo script init dell'emulatore di base mobile ( /libs/wcm/mobile/components/emulators/base/init.html.jsp
).
Lo script init dell'emulatore di base mobile definisce tramite Javascript:
Configurazione per tutti gli emulatori definiti per la pagina (emulatorConfigs)
Gestione emulatore che integra la funzionalità dell'emulatore nella pagina attraverso:
emulatorMgr.launch(config)
;
Il manager emulatore è definito da:
/libs/wcm/emulator/widgets/source/EmulatorManager.js
Per creare un emulatore mobile personalizzato:
Sotto /apps/myapp/components/emulators
creare il componente myemulator
(tipo di nodo: cq:Component
).
Impostare la proprietà sling:resourceSuperType
su /libs/wcm/mobile/components/emulators/base
Definite una libreria client CSS con la categoria cq.wcm.mobile.emulator
per l'aspetto dell'emulatore: name = css
, tipo di nodo = cq:ClientLibrary
Ad esempio, è possibile fare riferimento al nodo /libs/wcm/mobile/components/emulators/iPhone/css
Se necessario, definite una libreria client JS, ad esempio per definire un plug-in specifico: name = js, tipo di nodo = cq:ClientLibrary
Ad esempio, è possibile fare riferimento al nodo /libs/wcm/mobile/components/emulators/base/js
Se l'emulatore supporta funzionalità specifiche definite dai plug-in (come lo scorrimento touch), create un nodo di configurazione sotto l'emulatore: name = cq:emulatorConfig
, node type = nt:unstructured
e aggiungere la proprietà che definisce il plug-in:
Nome = canRotate
, Tipo = Boolean
, Valore = true
: per includere la funzionalità di rotazione.
Nome = touchScrolling
, Tipo = Boolean
, Valore = true
: per includere la funzionalità di scorrimento touch.
È possibile aggiungere ulteriori funzionalità definendo i propri plug-in.