Documentatie AEM 6.4 Handleiding voor ontwikkeling

Emulators emulators

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:
Developing

Gemaakt voor:

Developer

CAUTION

AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

NOTE

Adobe raadt aan de SPA Editor te gebruiken voor projecten die renderen op basis van één pagina voor toepassingsframework op de client-side vereisen (bijvoorbeeld Reageren). Meer informatie.

Met Adobe Experience Manager (AEM) kunnen auteurs een pagina weergeven in een emulator die de omgeving simuleert waarin een eindgebruiker de pagina zal bekijken, bijvoorbeeld op een mobiel apparaat of in een e-mailclient.

Het AEM emulatorframework:

Verstrekt inhoud creatie binnen een gesimuleerde Gebruikersinterface (UI), bijvoorbeeld een mobiel apparaat of een e-mailcliënt (die aan auteur nieuwsbrieven wordt gebruikt).
Hiermee past u de pagina-inhoud aan op basis van de gesimuleerde interface.
Hiermee kunt u aangepaste emulators maken.

CAUTION

Deze functie wordt alleen ondersteund in de klassieke gebruikersinterface.

Kenmerken van emulators emulators-characteristics

Een emulator:

Is gebaseerd op ExtJS.
Werkt op de pagina DOM.
De weergave ervan wordt geregeld via CSS.
Biedt ondersteuning voor plug-ins (bijvoorbeeld de rotatieplug-in van het mobiele apparaat).
Is alleen actief op auteur.
De basiscomponent bevindt zich op /libs/wcm/emulator/components/base.

Hoe de emulator de inhoud transformeert how-the-emulator-transforms-the-content

De emulator werkt door de inhoud van het lichaam van de HTML in emulator DIVs te verpakken. De volgende HTML-code:

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

wordt na het starten van de emulator omgezet in de volgende HTML-code:

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

Er zijn twee div-tags toegevoegd:

div met id cq-emulator de emulator als geheel vasthouden en
div met id cq-emulator-content die de viewport/het scherm/het inhoudsgebied van het apparaat vertegenwoordigt waar de pagina-inhoud zich bevindt.

Nieuwe CSS-klassen worden ook toegewezen aan de nieuwe emulator-div: ze vertegenwoordigen de naam van de huidige emulator.

Plugins van een emulator kunnen de lijst met toegewezen CSS-klassen verder uitbreiden, zoals in het voorbeeld van de rotatie-insteekmodule, waarbij een klasse "vertical" of "horizontal" wordt ingevoegd, afhankelijk van de huidige rotatie van het apparaat.

Op deze manier kan de volledige weergave van de emulator worden bepaald door CSS-klassen te hebben die overeenkomen met de id's en CSS-klassen van de emulator div.

NOTE

Aanbevolen wordt om de inhoud van het lichaam door de HTML van het project in één enkele div te verpakken, enkel zoals in het bovenstaande voorbeeld. Als de inhoud van het lichaam veelvoudige markeringen bevat, kunnen er onvoorspelbare resultaten zijn.

Mobiele emulators mobile-emulators

De bestaande mobiele emulators:

Onder /libs/wcm/mobile/components/emulators.
U kunt de JSON-server gebruiken op:

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

Wanneer de paginacomponent op de mobiele paginacomponent ( /libs/wcm/mobile/components/page), wordt de emulatorfunctionaliteit automatisch in de pagina geïntegreerd via het volgende mechanisme:

De component mobiele pagina head.jsp bevat de daaraan gekoppelde emulator van de apparaatgroep in de it-component (alleen in de auteursmodus) en de CSS-weergave van de apparaatgroep via:

deviceGroup.drawHead(pageContext);
De methode DeviceGroup.drawHead(pageContext) bevat de init-component van de emulator, dat wil zeggen roept de init.html.jsp van de emulatorcomponent. Als de emulatorcomponent geen eigen component heeft init.html.jsp en baseert zich op de mobiele basis emulator ( wcm/mobile/components/emulators/base), wordt het initescript van de mobiele basisemulator aangeroepen ( /libs/wcm/mobile/components/emulators/base/init.html.jsp).
Het initescript van de mobiele basismededinger bepaalt door Javascript:
- De configuratie voor alle emulators die voor de pagina zijn gedefinieerd (emulatorConfigs)
- De emulatormanager die de functionaliteit van de emulator op de pagina integreert via:
  
  emulatorMgr.launch(config);
  
  De emulatormanager wordt gedefinieerd door:
  
  /libs/wcm/emulator/widgets/source/EmulatorManager.js

Aangepaste mobiele emulator maken creating-a-custom-mobile-emulator

Een aangepaste mobiele emulator maken:

Onder /apps/myapp/components/emulators de component maken myemulator (knooppunttype: cq:Component).
Stel de sling:resourceSuperType eigenschap aan /libs/wcm/mobile/components/emulators/base
Een CSS-clientbibliotheek met een categorie definiëren cq.wcm.mobile.emulator voor de vormgeving van de emulator: name = css, knooppunttype = cq:ClientLibrary

Als voorbeeld kunt u naar het knooppunt verwijzen /libs/wcm/mobile/components/emulators/iPhone/css
Definieer zo nodig een JS-clientbibliotheek, bijvoorbeeld om een specifieke insteekmodule te definiëren: name = js, knooptype = cq:ClientLibrary

Als voorbeeld kunt u naar het knooppunt verwijzen /libs/wcm/mobile/components/emulators/base/js
Als de emulator specifieke functies ondersteunt die worden gedefinieerd door plug-ins (zoals aanraakschuiven), maakt u een configuratieknooppunt onder de emulator: name = cq:emulatorConfig, knooppunttype = nt:unstructured en voeg de eigenschap toe die de insteekmodule definieert:
- Naam = canRotate, Type = Boolean, Waarde = true: om de rotatiefunctie op te nemen.
- Naam = touchScrolling, Type = Boolean, Waarde = true: om de functionaliteit voor aanraakschuiven op te nemen.
U kunt meer functies toevoegen door uw eigen plug-ins te definiëren.

recommendation-more-help

2315f3f5-cb4a-4530-9999-30c8319c520e