Show Menu
THEMEN×

Migration to the Touch UI

Ab Version 6.0 hat Adobe Experience Manager (AEM) eine neue Benutzeroberfläche eingeführt, die als touchfähige Benutzeroberfläche (auch als Touch-Benutzeroberfläche bezeichnet) bezeichnet wird. Es ist an die Adobe Marketing Cloud und die allgemeinen Richtlinien der Adobe-Benutzeroberfläche angepasst. Dies ist die Standard-Benutzeroberfläche in AEM mit der alten, Desktop-orientierten Benutzeroberfläche, die als klassische Benutzeroberfläche bezeichnet wird.
Wenn Sie AEM mit der klassischen Benutzeroberfläche verwendet haben, müssen Sie Maßnahmen ergreifen, um Ihre Instanz zu migrieren. Diese Seite soll als Sprungbrett dienen, indem Links zu einzelnen Ressourcen bereitgestellt werden.
Ein solches Migrationsprojekt kann erhebliche Auswirkungen auf Ihre Instanz haben. Empfohlene Richtlinien finden Sie unter Verwalten von Projekten - Best Practices .

Grundlagen

Beachten Sie beim Migrieren die folgenden (wichtigen) Unterschiede zwischen der klassischen und der Touch-Benutzeroberfläche:
Klassische Benutzeroberfläche Touch-optimierte Benutzeroberfläche
Wird im JCR-Repository als Knotenstruktur beschrieben. Jeder Knoten, der ein Element der Benutzeroberfläche darstellt, wird als ExtJS-Widget bezeichnet und clientseitig dargestellt ExtJS . Wird auch im JCR-Repository als Knotenstruktur beschrieben. In diesem Fall bezieht sich jedoch jeder Knoten auf einen Sling-Ressourcentyp (Sling-Komponente), der für das Rendering zuständig ist. Die Benutzeroberfläche wird (im Grunde) serverseitig gerendert.
sling:resourceType
  • nicht verwendet
sling:resourceType
  • verwendet
  • for example cq/gui/components/authoring/dialog
Dialogknoten:
  • Name: dialog
  • jcr:primaryType: cq:Dialog
Dialogknoten:
  • Name: cq:dialog
  • jcr:primaryType: nt:unstructured
JavaScript-Speicherort:
  • Imperative Teile werden direkt mit Listenern eingebettet oder in clientlibs verwaltet.
JavaScript-Speicherort:
  • Imperative Teile können nicht in die Dialogdefinition eingebettet werden. Trennung der Zuständigkeiten.
Ereignisverarbeitung:
  • Dialog-Widgets verweisen direkt auf JavaScript-Code.
Ereignisverarbeitung:
  • Javascript überwacht Dialogereignisse.
Vom Client durchgeführte Wiedergabe:
  • Client erstellt die Komponenten der Benutzeroberfläche dynamisch.
  • Client-Anforderungen (Pull) Komponentendefinition (als JSON) vom Server.
Vom Server ausgeführte Wiedergabe:
  • Der Client fordert Seiten zusammen mit der entsprechenden Benutzeroberfläche an.
  • Der Server sendet (Push) die Benutzeroberfläche als HTML-Dokumente. Verwenden von Coral-UI-Komponenten.
Mit anderen Worten, wenn Sie einen Abschnitt Ihrer Benutzeroberfläche von der klassischen Benutzeroberfläche zur Touch-Benutzeroberfläche migrieren, bedeutet dies, dass Sie ein ExtJS-Widget zu einer Sling-Komponente importieren. Um dies zu erleichtern, basiert die Touch-Benutzeroberfläche auf dem Granite UI-Framework, das bereits einige Sling-Komponenten für die Benutzeroberfläche bereitstellt (als Granite UI-Komponenten bezeichnet).
Prüfen Sie vor dem Start den Status und die zugehörigen Empfehlungen:
Die Grundlagen für die Entwicklung der Touch-Benutzeroberfläche bieten eine solide Grundlage:

Authoring von Seiten migrieren

Dialoge sind ein wichtiger Faktor bei der Migration Ihrer Komponenten:

Konsolen migrieren

Sie können die Konsolen auch anpassen:

Weitere Ressourcen

Ausführliche Informationen zur Entwicklung von AEM finden Sie in der Sammlung von Ressourcen unter:
Die AEM-Modernisierungstools sind eine Community-Maßnahme und werden von Adobe weder unterstützt noch garantiert.