Emulatorer emulators

Last update: Wed Jan 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Gäller:
Experience Manager 6.5

Ämnen:
Utveckling

Skapat för:

Utvecklare

IMPORTANT

Nya installationer av AEM 6.5 stöder inte AEM Mobile Apps-funktioner. De redigerare som rekommenderas för att hantera innehåll utan rubriker i AEM är nu:

Den universella redigeraren för visuell redigering av headless-innehåll.
Innehållsfragmentredigeraren för formulärbaserad redigering av rubrikfritt innehåll.

Med Adobe Experience Manager (AEM) kan författare visa en sida i en emulator som simulerar den miljö i vilken slutanvändaren ska visa sidan, till exempel på en mobilenhet eller i en e-postklient.

AEM emulatorramverk:

Innehållsutveckling i ett simulerat användargränssnitt, t.ex. en mobilenhet eller en e-postklient (används för att skapa nyhetsbrev).
Anpassar sidinnehållet enligt det simulerade användargränssnittet.
Gör att du kan skapa egna emulatorer.

CAUTION

Den här funktionen stöds bara i Classic UI.

Emulatoregenskaper emulators-characteristics

En emulator:

Baseras på ExtJS.
Fungerar på sidan DOM.
Dess utseende regleras via CSS.
Stöder plugin-program (till exempel plugin-programmet för mobilenhetsrotation).
Är bara aktivt på författare.
Dess baskomponent är vid /libs/wcm/emulator/components/base.

Hur emulatorn omformar innehållet how-the-emulator-transforms-the-content

Emulatorn fungerar genom att kapsla in HTML innehåll i emulatorns DIV:er. Följande html-kod:

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

omvandlas till följande html-kod efter emulatorns start:

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

Två div-taggar har lagts till:

diven med ID cq-emulator som innehåller emulatorn som helhet och
div med ID cq-emulator-content som representerar den visningsruta/skärm/innehållsområde på enheten där sidinnehållet finns.

Nya CSS-klasser tilldelas också till den nya emulatorns divar: de representerar namnet på den aktuella emulatorn.

Plugin-program för en emulator kan utöka listan med tilldelade CSS-klasser ytterligare, som i exemplet med plugin-programmet för rotation, genom att infoga en"vertikal" eller"horisontell" klass beroende på den aktuella enhetsrotationen.

På så sätt kan emulatorns fullständiga utseende styras genom att CSS-klasserna motsvarar emulatorns ID:n och CSS-klasser.

NOTE

Vi rekommenderar att projektet HTML kapslar in brödtextinnehållet i en enda div, precis som i exemplet ovan. Om brödtextinnehållet innehåller flera taggar kan det ge oförutsägbara resultat.

Mobila emulatorer mobile-emulators

Befintliga mobilemulatorer:

Finns under /libs/wcm/mobile/components/emulators.
Finns via JSON-servleten på:

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

När sidkomponenten är beroende av den mobila sidkomponenten ( /libs/wcm/mobile/components/page), integreras emulatorfunktionen automatiskt på sidan med följande mekanism:

Den mobila sidkomponenten head.jsp innehåller enhetsgruppens associerade init-komponent för emulering (endast i redigeringsläge) och enhetsgruppens återgivnings-CSS via:

deviceGroup.drawHead(pageContext);
Metoden DeviceGroup.drawHead(pageContext) innehåller emulatorns init-komponent, d.v.s. anropar emulatorkomponentens init.html.jsp. Om emulatorkomponenten inte har sin egen init.html.jsp och är beroende av mobilbasemulatorn ( wcm/mobile/components/emulators/base)) anropas initieringsskriptet för mobilbasemulatorn ( /libs/wcm/mobile/components/emulators/base/init.html.jsp).
Initieringsskriptet för mobilbasemulatorn definierar via JavaScript:
- Konfigurationen för alla emulatorer som är definierade för sidan (emulatorConfigs)
- Emulatorhanteraren som integrerar emulatorns funktioner på sidan genom:
  
  emulatorMgr.launch(config);
  
  Emulatorhanteraren definieras av:
  
  /libs/wcm/emulator/widgets/source/EmulatorManager.js

Skapa en anpassad emulator för mobiler creating-a-custom-mobile-emulator

Så här skapar du en anpassad mobilemulator:

Under /apps/myapp/components/emulators skapar du komponenten myemulator (nodtyp: cq:Component).
Ange egenskapen sling:resourceSuperType till /libs/wcm/mobile/components/emulators/base
Definiera ett CSS-klientbibliotek med kategorin cq.wcm.mobile.emulator för emulatorns utseende: name = css, nodtyp = cq:ClientLibrary

Du kan till exempel referera till noden /libs/wcm/mobile/components/emulators/iPhone/css
Om det behövs definierar du till exempel ett JS-klientbibliotek för att definiera ett specifikt plugin-program: name = js, nodtyp = cq:ClientLibrary

Du kan till exempel referera till noden /libs/wcm/mobile/components/emulators/base/js
Om emulatorn har stöd för specifika funktioner som definieras av plugin-program (som pekrullning) skapar du en konfigurationsnod under emulatorn: name = cq:emulatorConfig, nodtyp = nt:unstructured och lägger till egenskapen som definierar plugin-programmet:
- Namn = canRotate, typ = Boolean, värde = true: om du vill inkludera rotationsfunktionen.
- Namn = touchScrolling, typ = Boolean, värde = true: om du vill inkludera pekrullningsfunktionen.
Du kan lägga till fler funktioner genom att definiera egna plugin-program.

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2