Show Menu
TÓPICOS×

Emuladores

A Adobe recomenda usar o Editor SPA para projetos que exigem renderização do lado do cliente baseada em estrutura de aplicativo de página única (por exemplo, Reagir). Saiba mais .
O Adobe Experience Manager (AEM) permite que os autores visualizem uma página em um emulador que simula o ambiente no qual um usuário final visualizará a página, por exemplo, em um dispositivo móvel ou em um cliente de email.
A estrutura do emulador do AEM:
  • Fornece a criação de conteúdo em uma interface de usuário (UI) simulada, por exemplo, um dispositivo móvel ou um cliente de email (usado para criar boletins informativos).
  • Adapta o conteúdo da página de acordo com a interface simulada.
  • Permite a criação de emuladores personalizados.
Esse recurso é suportado somente na interface clássica.

Características dos emuladores

Um emulador:
  • É baseado em ExtJS.
  • Opera na página DOM.
  • Sua aparência é regulamentada pelo CSS.
  • Suporta plug-ins (por exemplo, o plug-in de rotação de dispositivos móveis).
  • Está ativo somente no autor.
  • Seu componente base está em /libs/wcm/emulator/components/base .

Como o emulador transforma o conteúdo

O emulador funciona vinculando o conteúdo do corpo HTML em DIVs do emulador. Por exemplo, o seguinte código html:
<body>
<div id="wrapper" class="page mobilecontentpage ">
    <div class="topnav mobiletopnav">
    ...
    </div>
    ...
</div>
</body>

é transformado no seguinte código html após o início do 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>

Duas tags div foram adicionadas:
  • div com id cq-emulator segurando o emulador como um todo e
  • a div com a ID que representa a cq-emulator-content janela de visualização/tela/área de conteúdo do dispositivo na qual o conteúdo da página reside.
Novas classes CSS também são atribuídas aos novos divs do emulador: representam o nome do emulador atual.
Os plug-ins de um emulador podem estender ainda mais a lista de classes CSS atribuídas, como no exemplo do plug-in de rotação, inserindo uma classe "vertical" ou "horizontal" dependendo da rotação atual do dispositivo.
Dessa forma, a aparência completa do emulador pode ser controlada por ter classes CSS correspondentes às classes IDs e CSS do emulador divs.
É recomendável que o HTML do projeto envolva o conteúdo do corpo em uma única div, como no exemplo acima. Se o conteúdo do corpo contiver várias tags, pode haver resultados imprevisíveis.

Emuladores móveis

Os emuladores móveis existentes:
  • Estão abaixo de /libs/wcm/mobile/components/emuladores.
  • Estão disponíveis através do servlet JSON em:
    http://localhost:4502/bin/wcm/mobile/emulators.json
Quando o componente de página depende do componente de página móvel ( /libs/wcm/mobile/components/page ), a funcionalidade do emulador é integrada automaticamente na página por meio do seguinte mecanismo:
  • O componente de página móvel head.jsp inclui o componente de inicialização do emulador associado do grupo de dispositivos (somente no modo de autor) e a renderização do CSS pelo grupo de dispositivos através de:
    deviceGroup.drawHead(pageContext);
  • O método DeviceGroup.drawHead(pageContext) inclui o componente init do emulador, isto é, chama o componente init.html.jsp do emulador. Se o componente de emulador não tiver um componente próprio init.html.jsp e depender do emulador de base móvel ( wcm/mobile/components/emulators/base) , o script init do emulador de base móvel é chamado ( /libs/wcm/mobile/components/emulators/base/init.html.jsp ).
  • O script init do emulador de base móvel define por meio do Javascript:
    • A configuração para todos os emuladores definidos para a página (emulatorConfigs)
    • O gerenciador de emuladores que integra a funcionalidade do emulador na página por meio de:
      emulatorMgr.launch(config) ;
      O gerenciador de emuladores é definido por:
      /libs/wcm/emulator/widgets/source/EmulatorManager.js

Criando um emulador móvel personalizado

Para criar um emulador móvel personalizado:
  1. Abaixo, /apps/myapp/components/emulators crie o componente myemulator (tipo de nó: cq:Component ).
  2. Defina a sling:resourceSuperType propriedade como /libs/wcm/mobile/components/emulators/base
  3. Defina uma biblioteca de cliente CSS com categoria cq.wcm.mobile.emulator para a aparência do emulador: name = css , tipo de nó = cq:ClientLibrary
    Como exemplo, você pode fazer referência ao nó /libs/wcm/mobile/components/emulators/iPhone/css
  4. Se necessário, defina uma biblioteca de cliente JS, por exemplo, para definir um plug-in específico: name = js, tipo de nó = cq:ClientLibrary
    Como exemplo, você pode fazer referência ao nó /libs/wcm/mobile/components/emulators/base/js
  5. Se o emulador suportar funcionalidades específicas definidas por plug-ins (como rolagem de toque), crie um nó de configuração abaixo do emulador: name = cq:emulatorConfig , node type = nt:unstructured e adicione a propriedade que define o plug-in:
    • Nome = canRotate , Tipo = Boolean , Valor = true : para incluir a funcionalidade de rotação.
    • Nome = touchScrolling , Tipo = Boolean , Valor = true : para incluir a funcionalidade de rolagem de toque. É possível adicionar mais funcionalidades definindo seus próprios plug-ins.