Sie sehen sich Hilfeinhalte der folgenden Version an:

Hinweis:

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:

  • ermöglicht Content-Authoring in einer simulierten Benutzeroberfläche, z. B. auf einem mobilen Gerät oder in einem E-Mail-Client (zum Erstellen von Newslettern).
  • passt den Seiteninhalt entsprechend der simulierten Benutzeroberfläche an.
  • ermöglicht das Erstellen benutzerdefinierter Emulatoren.

Vorsicht:

Diese Funktion wird nur in der klassischen Benutzeroberfläche unterstützt.

Emulatoren-Eigenschaften

Emulatoren haben folgende Eigenschaften:

  • Sie basieren auf ExtJS.
  • Sie werden auf dem Seiten-DOM ausgeführt.
  • Die Darstellung erfolgt mithilfe von CSS.
  • Sie unterstützten Plug-ins (z. B. für die Drehung auf mobilen Geräten).
  • Sie sind nur im author-Modus aktiviert.
  • Die Basiskomponente befindet sich unter /libs/wcm/emulator/components/base.

Konvertieren von Inhalten mit einem Emulator

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.

Hinweis:

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.

Mobile Emulatoren

Die vorhandenen mobilen Emulatoren:

  • befinden sich unter /libs/wcm/mobile/components/emulators.
  • sind über dasJSON-Servlet unter:
    http://localhost:4502/bin/wcm/mobile/emulators.json verfügbar.

Wenn die Seitenkomponente die mobile Seitenkomponente (/libs/wcm/mobile/components/page) verwendet, ist die Emulatorfunktion automatisch durch 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) beinhaltet die Inititialisierungskomponente des Emulators, d. h., sie ruft die init.html.jsp der Emulatorkomponente auf. Falls die Emulatorkomponente nicht über eine eigene init.html.jsp verfügt, sondern den mobilen Basisemulator (wcm/mobile/components/emulators/base) verwendet, wird das Initialisierungsskript des mobilen Basisemulators (/libs/wcm/mobile/components/emulators/base/init.html.jsp) aufgerufen.
  • Das Initialisierungsskript des mobilen Basisemulators definiert über JavaScript Folgendes:
    • Die Konfiguration für alle Emulatoren, die für die Seite definiert sind (emulatorConfigs)
    • Den Emulator-Manager, der die Funktionalität des Emulators durch:
      emulatorMgr.launch(config) in die Seite integriert;
      der Emulator-Manager ist definiert durch:
      /libs/wcm/emulator/widgets/source/EmulatorManager.js

Erstellen eines benutzerdefinierten mobilen Emulators

Gehen Sie zum Erstellen eines benutzerdefinierten mobilen Emulators wie folgt vor:

  1. Erstellen Sie unter /apps/myapp/components/emulators die Komponente myemulator (Knotentyp: cq:Component).
  2. Legen Sie für die sling:resourceSuperType-Eigenschaft /libs/wcm/mobile/components/emulators/base fest.
  3. Definieren Sie eine CSS-Client-Bibliothek mit der Kategorie cq.wcm.mobile.emulator für die Emulator-Darstellung: Name = css, Knotentyp = cq:ClientLibrary
    . Ein Beispiel finden Sie im Knoten unter /libs/wcm/mobile/components/emulators/iPhone/css
  4. Falls erforderlich, definieren Sie eine JS-Client-Bibliothek, um beispielsweise ein benutzerdefiniertes Plug-in: Name = js, Knotentyp = cq:ClientLibrary
    zu definieren. Ein Beispiel finden Sie im Knoten unter /libs/wcm/mobile/components/emulators/base/js .
  5. Falls der Emulator bestimmte von Plug-ins definierte Funktionen unterstützt (wie Touch-Scrollen), erstellen Sie einen Konfigurationsknoten unter dem Emulator: Name = cq:emulatorConfig, Knotentyp = nt:unstructured und fügen Sie die Eigenschaft hinzu, die das Plug-in definiert:
    - Name = canRotate, Typ = Boolean, Wert = true: für Drehungsfunktionen.
    - Name = touchScrolling, Typ = Boolean, Wrt = true: für Scrollen über Touch-Funktionen.
    Sie können weitere Funktionen hinzufügen, indem Sie eigene Plug-ins definieren.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie