Show Menu
SUJETS×

Émulateurs

Adobe recommande d’utiliser l’éditeur d’application d’une seule page (SPA) pour les projets nécessitant un rendu côté client basé sur la structure SPA (par exemple, React). En savoir plus .
Adobe Experience Manager (AEM) permet aux auteurs d’afficher une page dans un émulateur qui simule l’environnement dans lequel un utilisateur final consulte la page, comme un appareil mobile ou un client de messagerie électronique.
La structure de l’émulateur AEM :
  • fournit des fonctions de création de contenu dans une interface utilisateur (IU) simulée, par exemple, un appareil mobile ou un client de messagerie électronique (utilisé pour rédiger des bulletins d’information) ;
  • adapte le contenu de la page selon l’IU simulée ;
  • permet de créer des émulateurs personnalisés.
Cette fonction est uniquement prise en charge dans l’IU classique.

Caractéristiques des émulateurs

Un émulateur :
  • repose sur ExtJS ;
  • fonctionne sur le DOM de la page ;
  • a une apparence définie via CSS ;
  • prend en charge les modules externes (par exemple, le module externe de rotation sur des appareils mobiles) ;
  • est uniquement actif sur l’auteur ;
  • Its base component is at /libs/wcm/emulator/components/base .

Transformation du contenu par l’émulateur

L’émulateur fonctionne en encapsulant les contenus du corps HTML dans des balises div d’émulateurs. Par exemple, le code HTML qui suit :
<body>
<div id="wrapper" class="page mobilecontentpage ">
    <div class="topnav mobiletopnav">
    ...
    </div>
    ...
</div>
</body>

est transformé en code HTML suivant après le lancement de l’émulateur :
<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>

Deux balises div ont été ajoutées :
  • La balise div avec l’ID cq-emulator contenant l’ensemble de l’émulateur.
  • La balise div avec l’ID cq-emulator-content représentant la zone viewport/screen/content du périphérique où réside le contenu de la page.
De nouvelles classes CSS sont également attribuées aux nouvelles balises div d’émulateurs : elles représentent le nom de l’émulateur actuel.
Les modules externes d’un émulateur peuvent développer la liste des classes CSS attribuées, comme dans l’exemple du module externe de rotation qui insère une classe « vertical » ou «horizontal » en fonction de la rotation du périphérique actif.
De cette manière, l’aspect complet de l’émulateur peut être contrôlé à l’aide de classes CSS correspondant aux ID et classes CSS des balises div d’émulateurs.
Il est recommandé que le projet HTML encapsule le contenu du corps dans une seule balise div, comme dans l’exemple ci-dessus. Si le contenu du corps contient plusieurs balises, les résultats peuvent être imprévisibles.

Émulateurs mobiles

Les émulateurs mobiles existants :
  • se trouvent sous /libs/wcm/mobile/components/emulators ;
  • Sont disponibles via la servlet JSON à l’adresse :
    http://localhost:4502/bin/wcm/mobile/emulators.json
When the page component relies on the mobile page component ( /libs/wcm/mobile/components/page ), the emulator functionality is automatically integrated in the page through the following mechanism:
  • Le composant de page mobile head.jsp inclut le composant init de l’émulateur associé au groupe de périphériques (uniquement en mode de création) et le CSS de rendu du groupe de périphériques via : .
    deviceGroup.drawHead(pageContext);
  • The method DeviceGroup.drawHead(pageContext) includes the emulator's init component, i.e. calls the init.html.jsp of the emulator component. If the emulator component does not have its own init.html.jsp and relies on the mobile base emulator ( wcm/mobile/components/emulators/base) , the init script of the mobile base emulator is called ( /libs/wcm/mobile/components/emulators/base/init.html.jsp ).
  • Le script d’initialisation de l’émulateur de base mobile définit via Javascript :
    • la configuration de tous les émulateurs qui sont définis pour la page (emulatorConfigs) ;
    • Le gestionnaire d’émulateur qui intègre les fonctionnalités de l’émulateur dans la page par le biais :
      emulatorMgr.launch(config) ;
      Le gestionnaire d’émulateur est défini par :
      /libs/wcm/emulator/widgets/source/EmulatorManager.js

Création d’un émulateur mobile personnalisé

Pour créer un émulateur mobile personnalisé :
  1. Ci-dessous, /apps/myapp/components/emulators créez le composant myemulator (type de noeud : cq:Component ).
  2. Définissez la propriété sling:resourceSuperType sur /libs/wcm/mobile/components/emulators/base
  3. Définissez une bibliothèque cliente CSS avec une catégorie cq.wcm.mobile.emulator pour l’aspect de l’émulateur : name = css , node type = cq:ClientLibrary
    Vous pouvez, par exemple, faire référence au noeud /libs/wcm/mobile/components/emulators/iPhone/css
  4. Si nécessaire, définissez une bibliothèque cliente JS, par exemple pour définir un module externe spécifique : name = js, node type = cq:ClientLibrary
    Vous pouvez, par exemple, faire référence au noeud /libs/wcm/mobile/components/emulators/base/js
  5. Si l’émulateur prend en charge des fonctionnalités spécifiques définies par les modules externes (comme le défilement tactile), créez un noeud de configuration sous l’émulateur : name = cq:emulatorConfig , node type = nt:unstructured et ajoutez la propriété qui définit le module externe :
    • Nom = canRotate , Type = Boolean , Valeur = true : pour inclure la fonctionnalité de rotation.
    • Name = touchScrolling , Type = Boolean , Value = true : to include the touch scrolling functionality. Plus de fonctionnalités peuvent être ajoutées en définissant vos propres modules externes.