Migration zur Touch-Benutzeroberfläche

Ab Version 6.0 hat Adobe Experience Manager (AEM) eine neue Benutzeroberfläche eingeführt, die als touchfähige Benutzeroberfläche bezeichnet wird (auch bekannt als Touch-Benutzeroberfläche). Es ist an die Adobe Marketing Cloud und die allgemeinen Richtlinien der Benutzeroberfläche der Adobe angepasst. Dies ist die Standardbenutzeroberfläche in AEM mit der alten, Desktop-orientierten Oberflä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.

HINWEIS

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 von ExtJS gerendert. 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 also (im Grunde) serverseitig gerendert.

sling:resourceType

  • nicht verwendet
 sling:resourceType
  • verwendet
  • zum Beispiel
    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.

Umgang mit Ereignissen:

  • Dialog-Widgets verweisen direkt auf JavaScript-Code.

Umgang mit Ereignissen:

  • JavaScript überwacht Dialogfelder.
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 bedeutet die Migration eines Abschnitts Ihrer Benutzeroberfläche von der klassischen Benutzeroberfläche zur Touch-Benutzeroberfläche, dass ein ExtJS-Widget in eine Sling-Komponente portiert wird. 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 Beginn den Status und die entsprechenden Empfehlungen:

Die Grundlagen für die Entwicklung der Touch-Benutzeroberfläche bieten eine solide Grundlage:

Migrieren von Seiten-Authoring

Dialoge sind ein wichtiger Faktor bei der Migration Ihrer Komponenten:

Migrieren von Konsolen

Sie können die Konsolen auch anpassen:

Es gibt zwar nicht direkt mit einer Migration auf die Touch-Benutzeroberfläche zu tun, aber es lohnt sich, gleichzeitig einige Probleme zu prüfen, da diese ebenfalls empfohlen werden:

HINWEIS

Weitere Ressourcen

Ausführliche Informationen über die Entwicklung AEM sind der Sammlung der Mittel zu entnehmen unter:

VORSICHT

AEM Moderationstools sind eine Community-Anstrengung und werden von der Adobe nicht unterstützt oder garantiert.

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now