Emuladores

NOTA

Adobe recomienda el uso del Editor de SPA para proyectos que requieren una representación de cliente basada en el marco de aplicaciones de una sola página (por ejemplo, React). Más información.

Adobe Experience Manager (AEM) permite a los autores crear vistas de una página en un emulador que simula el entorno en el que un usuario final vista la página, por ejemplo, en un dispositivo móvil o en un cliente de correo electrónico.

El marco del emulador de AEM:

  • Proporciona creación de contenido dentro de una interfaz de usuario (IU) simulada, por ejemplo, un dispositivo móvil o un cliente de correo electrónico (utilizado para crear newsletters).
  • Adapta el contenido de la página según la IU simulada.
  • Permite la creación de emuladores personalizados.
ATENCIÓN

Esta función solo se admite en la IU clásica.

Características de los emuladores

Un emulador:

  • Se basa en ExtJS.
  • Funciona en el DOM de la página.
  • Su aspecto está regulado mediante CSS.
  • Admite complementos (por ejemplo, el complemento de rotación del dispositivo móvil).
  • Solo está activo en el autor.
  • Su componente base es /libs/wcm/emulator/components/base.

Cómo el emulador transforma el contenido

El emulador funciona ajustando el contenido del cuerpo HTML en DIV del emulador. Por ejemplo, el siguiente código HTML:

<body>
<div id="wrapper" class="page mobilecontentpage ">
    <div class="topnav mobiletopnav">
    ...
    </div>
    ...
</div>
</body>

se transforma en el siguiente código HTML después del inicio del emulador:

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

Se han agregado dos etiquetas div:

  • el div con id cq-emulator que contiene el emulador como un todo y

  • el div con el identificador cq-emulator-content que representa la ventanilla del dispositivo, la pantalla o el área de contenido donde reside el contenido de la página.

Las nuevas clases CSS también se asignan a los nuevos divs del emulador: representan el nombre del emulador actual.

Los complementos de un emulador pueden ampliar aún más la lista de las clases CSS asignadas, como en el ejemplo del complemento de rotación, insertando una clase "vertical" u "horizontal" en función de la rotación actual del dispositivo.

De este modo, la apariencia completa del emulador se puede controlar teniendo clases CSS correspondientes a los ID y las clases CSS de los divs del emulador.

NOTA

Se recomienda que el HTML del proyecto ajuste el contenido del cuerpo en un solo div, como en el ejemplo anterior. Si el contenido del cuerpo contiene varias etiquetas, puede haber resultados impredecibles.

Emuladores móviles

Los emuladores móviles existentes:

  • Están por debajo de /libs/wcm/mobile/components/emulators.

  • Están disponibles a través del servlet JSON en:

    http://localhost:4502/bin/wcm/mobile/emulators.json

Cuando el componente de página depende del componente de página móvil ( /libs/wcm/mobile/components/page), la funcionalidad del emulador se integra automáticamente en la página a través del siguiente mecanismo:

  • El componente de página móvil head.jsp incluye el componente de inicio del emulador asociado al grupo de dispositivos (solo en modo de autor) y el CSS de procesamiento del grupo de dispositivos mediante:

    deviceGroup.drawHead(pageContext);

  • El método DeviceGroup.drawHead(pageContext) incluye el componente init del emulador, es decir, llama a init.html.jsp del componente del emulador. Si el componente del emulador no tiene su propio init.html.jsp y depende del emulador de base móvil ( wcm/mobile/components/emulators/base), se llama a la secuencia de comandos de inicio del emulador de base móvil ( /libs/wcm/mobile/components/emulators/base/init.html.jsp).

  • La secuencia de comandos de inicio del emulador de base móvil se define mediante Javascript:

    • Configuración de todos los emuladores definidos para la página (emulatorConfigs)

    • Administrador de emuladores que integra la funcionalidad del emulador en la página mediante:

      emulatorMgr.launch(config);

      El administrador de emuladores se define mediante:

      /libs/wcm/emulator/widgets/source/EmulatorManager.js

Creación de un emulador móvil personalizado

Para crear un emulador móvil personalizado:

  1. A continuación /apps/myapp/components/emulators cree el componente myemulator (tipo de nodo: cq:Component).

  2. Establezca la propiedad sling:resourceSuperType en /libs/wcm/mobile/components/emulators/base

  3. Defina una biblioteca de cliente CSS con la categoría cq.wcm.mobile.emulator para el aspecto del emulador: name = css, tipo de nodo = cq:ClientLibrary

    Como ejemplo, puede hacer referencia al nodo /libs/wcm/mobile/components/emulators/iPhone/css

  4. Si es necesario, defina una biblioteca de cliente JS, por ejemplo para definir un complemento específico: name = js, node type = cq:ClientLibrary

    Como ejemplo, puede hacer referencia al nodo /libs/wcm/mobile/components/emulators/base/js

  5. Si el emulador admite funcionalidades específicas definidas por los complementos (como el desplazamiento táctil), cree un nodo de configuración debajo del emulador: name = cq:emulatorConfig, node type = nt:unstructured y agregue la propiedad que define el complemento:

    • Nombre = canRotate, Tipo = Boolean, Valor = true: para incluir la funcionalidad de rotación.

    • Nombre = touchScrolling, Tipo = Boolean, Valor = true: para incluir la funcionalidad de desplazamiento táctil.

    Se pueden agregar más funcionalidades definiendo sus propios complementos.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free