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.
Adobe consiglia di utilizzare l’editor di SPA per i progetti che richiedono il rendering lato client basato sul framework di un’applicazione a pagina singola (ad esempio, React). Ulteriori informazioni.
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.
Il framework emulatore AEM:
Questa funzione è supportata solo nell’interfaccia classica.
Un emulatore:
/libs/wcm/emulator/components/base
.L’emulatore funziona racchiudendo il contenuto del corpo di HTML 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:
div con id cq-emulator
tenendo in mano l'emulatore nel suo insieme e
div con id cq-emulator-content
rappresenta l’area viewport/screen/content del dispositivo in cui si trova il contenuto della pagina.
Le nuove classi CSS vengono assegnate anche ai nuovi video emulatori: 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 avendo classi CSS corrispondenti agli ID e alle classi CSS dell’emulatore subs.
È consigliabile che il contenuto del corpo del progetto HTML sia racchiuso in un singolo div, come nell’esempio precedente. Se il contenuto del corpo contiene più tag, i risultati potrebbero essere 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 integrata automaticamente nella pagina attraverso il seguente meccanismo:
Componente pagina mobile head.jsp
include il componente di init dell’emulatore associato del gruppo di dispositivi (solo in modalità di authoring) e il rendering CSS del gruppo di dispositivi tramite:
deviceGroup.drawHead(pageContext);
Il metodo DeviceGroup.drawHead(pageContext)
include il componente init dell’emulatore, ovvero chiama il init.html.jsp
del componente 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 mobile base ( /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)
Il gestore di emulatori che integra le funzionalità dell'emulatore nella pagina attraverso:
emulatorMgr.launch(config)
;
Il gestore emulatori è 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
).
Imposta la proprietà sling:resourceSuperType
su /libs/wcm/mobile/components/emulators/base
Definire una libreria client CSS con una categoria cq.wcm.mobile.emulator
per l'aspetto dell'emulatore: name = css
, tipo di nodo = cq:ClientLibrary
Ad esempio, puoi fare riferimento al nodo /libs/wcm/mobile/components/emulators/iPhone/css
Se necessario, definisci una libreria client JS, ad esempio per definire un plug-in specifico: name = js, tipo di nodo = cq:ClientLibrary
Ad esempio, puoi 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), crea un nodo di configurazione sotto l’emulatore: name = cq:emulatorConfig
, tipo di nodo = nt:unstructured
e aggiungi 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.
Puoi aggiungere altre funzionalità definendo i tuoi plug-in.