Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein frameworkbasiertes clientseitiges Rendering für einzelne Seiten (z. B. React) erforderlich ist. Weitere Informationen
Mit Adobe Experience Manager (AEM) können Autoren eine Seite in einem Emulator anzeigen, der die Umgebung simuliert, in der ein Benutzer die Seite aufruft, z. B. auf einem mobilen Gerät oder in einem E-Mail-Client.
Das AEM-Emulator-Framework:
Diese Funktion wird nur in der klassischen Benutzeroberfläche unterstützt.
Emulatoren haben folgende Eigenschaften:
/libs/wcm/emulator/components/base
.Der Emulator sorgt dafür, dass die Emulator-DIVs den HTML-Hauptteilinhalt umschließen. Der folgende HTML-Code:
<body>
<div id="wrapper" class="page mobilecontentpage ">
<div class="topnav mobiletopnav">
...
</div>
...
</div>
</body>
wird beispielsweise nach dem Starten des Emulators in folgenden HTML-Code geändert:
<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>
Zwei DIV-Tags wurden hinzugefügt:
das DIV-Tag mit der ID cq-emulator
, das den gesamten Emulator beinhaltet, und
das DIV-Tag mit der ID cq-emulator-content
, das den Viewport-, Bildschirm- oder Inhaltsbereich repräsentiert, in dem sich der Seiteninhalt befindet.
Den neuen DIV-Tags des Emulators werden auch neue CSS-Klassen zugewiesen. Sie stellen den Namen des aktuellen Emulators dar.
Die Plug-ins eines Emulators können die Liste der zugeordneten CSS-Klassen zusätzlich erweitern, wie beim Beispiel des Drehungs-Plug-ins, das je nach aktueller Drehung auf dem Gerät die Klasse „vertical“ oder „horizontal“ einfügen.
So kann die vollständige Darstellung des Emulators durch die Verwendung von CSS-Klassen gesteuert werden, die den IDs und CSS-Klassen der Emulator-DIVs entsprechen.
Es wird empfohlen, dass die Projekt-HTML den Hauptteilinhalt wie im obigen Beispiel in einer einzigen DIV umschließt. Wenn der Hauptteilinhalt mehrere Tags enthält, kann es zu unvorhergesehenen Ergebnissen kommen.
Die vorhandenen mobilen Emulatoren:
befinden sich unter /libs/wcm/mobile/components/emulators.
Sind über das JSON-Servlet verfügbar unter:
http://localhost:4502/bin/wcm/mobile/emulators.json
Wenn die Seitenkomponente auf der mobilen Seitenkomponente ( /libs/wcm/mobile/components/page
) basiert, wird die Emulatorfunktion automatisch über den folgenden Mechanismus in die Seite integriert:
Die mobile Seitenkomponente head.jsp
beinhaltet die der Gerätegruppe zugeordnete Initialisierungskomponente des Emulators (nur im author-Modus) und Rendering-CSS durch:
deviceGroup.drawHead(pageContext);
Die Methode DeviceGroup.drawHead(pageContext)
enthält die init-Komponente des Emulators, d. h. ruft die init.html.jsp
der Emulator-Komponente auf. Wenn die Emulatorkomponente nicht über eine eigene init.html.jsp
verfügt und sich auf den mobilen Basisemulator ( wcm/mobile/components/emulators/base)
) stützt, wird das init-Skript des mobilen Basisemulators ( /libs/wcm/mobile/components/emulators/base/init.html.jsp
) aufgerufen.
Das init-Skript des mobilen Basis-Emulators definiert JavaScript:
Die Konfiguration für alle Emulatoren, die für die Seite definiert sind (emulatorConfigs)
Der Emulator-Manager, der die Funktionalität des Emulators in die Seite integriert durch:
emulatorMgr.launch(config)
;
Der Emulator-Manager wird wie folgt definiert:
/libs/wcm/emulator/widgets/source/EmulatorManager.js
Gehen Sie zum Erstellen eines benutzerdefinierten mobilen Emulators wie folgt vor:
Erstellen Sie unter /apps/myapp/components/emulators
die Komponente myemulator
(Knotentyp: cq:Component
).
Legen Sie die sling:resourceSuperType
-Eigenschaft auf /libs/wcm/mobile/components/emulators/base
fest.
Definieren Sie eine CSS-Client-Bibliothek mit der Kategorie cq.wcm.mobile.emulator
für das Emulator-Erscheinungsbild: name = css
, node type = cq:ClientLibrary
Als Beispiel können Sie auf den Knoten /libs/wcm/mobile/components/emulators/iPhone/css
verweisen
Definieren Sie bei Bedarf eine JS-Client-Bibliothek, um beispielsweise ein bestimmtes Plugin zu definieren: name = js, node type = cq:ClientLibrary
Als Beispiel können Sie auf den Knoten /libs/wcm/mobile/components/emulators/base/js
verweisen
Wenn der Emulator bestimmte Funktionen unterstützt, die von Plugins definiert werden (z. B. per Touch-Scrolling), erstellen Sie einen Konfigurationsknoten unter dem Emulator: name = cq:emulatorConfig
, node type = nt:unstructured
und fügen Sie die Eigenschaft hinzu, die das Plugin definiert:
Name = canRotate
, Typ = Boolean
, Wert = true
: , um die Rotationsfunktion einzuschließen.
Name = touchScrolling
, Typ = Boolean
, Wert = true
: , um die Funktion zum Touch-Scrolling einzuschließen.
Sie können weitere Funktionen hinzufügen, indem Sie eigene Plug-ins definieren.