Emulatori

ATTENZIONE

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.

NOTA

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:

  • Fornisce l’authoring dei contenuti all’interno di un’interfaccia utente simulata, ad esempio un dispositivo mobile o un client e-mail (utilizzato per creare newsletter).
  • Adatta il contenuto della pagina in base all’interfaccia utente simulata.
  • Consente la creazione di emulatori personalizzati.
ATTENZIONE

Questa funzione è supportata solo nell’interfaccia classica.

Caratteristiche degli emulatori

Un emulatore:

  • Si basa su ExtJS.
  • Funziona sul DOM della pagina.
  • Il suo aspetto è regolato tramite CSS.
  • Supporta i plug-in (ad esempio il plugin per la rotazione dei dispositivi mobili).
  • È attivo solo sull'autore.
  • La sua componente base è /libs/wcm/emulator/components/base.

Come l’emulatore trasforma il contenuto

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.

NOTA

È 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.

Emulatori per dispositivi mobili

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

Creazione di un emulatore mobile personalizzato

Per creare un emulatore mobile personalizzato:

  1. Sotto /apps/myapp/components/emulators creare il componente myemulator (tipo di nodo: cq:Component).

  2. Imposta la proprietà sling:resourceSuperType su /libs/wcm/mobile/components/emulators/base

  3. 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

  4. 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

  5. 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.

In questa pagina