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:
Esta función solo se admite en la IU clásica.
Un emulador:
/libs/wcm/emulator/components/base
.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.
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.
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
Para crear un emulador móvil personalizado:
A continuación /apps/myapp/components/emulators
cree el componente myemulator
(tipo de nodo: cq:Component
).
Establezca la propiedad sling:resourceSuperType
en /libs/wcm/mobile/components/emulators/base
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
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
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.