Migration zur Touch-optimierten Benutzeroberfläche migration-to-the-touch-ui

Mit der Version 6.0 führte Adobe Experience Manager (AEM) eine neue Benutzeroberfläche ein, die als Touch-optimierte Benutzeroberfläche (auch einfach Touch-Benutzeroberfläche genannt) bezeichnet wird. Sie ist an die Adobe Experience Cloud und die allgemeinen Richtlinien für die Adobe-Benutzeroberfläche angepasst. Dies ist inzwischen die Standard-Benutzeroberfläche in AEM. Die veraltete, Desktop-orientierte Benutzeroberfläche wird klassische Benutzeroberfläche genannt.

Wenn Sie AEM mit der klassischen Benutzeroberfläche verwendet haben, sollten Sie Maßnahmen ergreifen, um Ihre Instanz zu migrieren. Diese Seite soll als Sprungbrett dienen, indem Links zu einzelnen Ressourcen bereitgestellt werden.

NOTE
Ein solches Migrationsprojekt kann erhebliche Auswirkungen auf Ihre Instanz haben. Siehe Verwalten von Projekten – Best Practices für empfohlene Richtlinien.

Grundlagen the-basics

Beachten Sie bei der Migration 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 Client-seitig von ExtJS gerendert.
Wird im JCR-Repository ebenfalls 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 daher (im Grunde) Server-seitig gerendert.

sling:resourceType

  • nicht verwendet

sling:resourceType

  • verwendet
  • 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 mithilfe von Listenern eingebettet oder in Client-Bibliotheken verwaltet.

JavaScript-Speicherort:

  • Imperative Teile können nicht in die Dialogfelddefinition eingebettet werden. Aufgabentrennung.

Ereignisverarbeitung:

  • Dialogfeld-Widgets verweisen direkt auf JavaScript-Code.

Ereignisverarbeitung:

  • JavaScript beobachtet Dialogfeldereignisse.

Rendering durch den Client:

  • Der Client erstellt dynamisch die Komponenten der Benutzeroberfläche.
  • Komponentendefinition für Client-Anfragen (Pull) (als JSON) vom Server.

Vom Server durchgeführtes Rendering:

  • Der Client fragt Seiten zusammen mit der zugehörigen Benutzeroberfläche an.
  • Der Server sendet (Push) die Benutzeroberfläche als HTML-Dokumente unter Verwendung von Coral-UI-Komponenten.

Das heißt, dass die Migration eines Bereichs Ihrer Benutzeroberfläche von der klassischen Benutzeroberfläche zur Touch-Benutzeroberfläche bedeutet, dass ein ExtJS-Widget zu Sling-Komponente. Um dies zu vereinfachen, basiert die Touch-optimierte Benutzeroberfläche auf dem Granite-UI-Framework, das bereits einige Sling-Komponenten für die Benutzeroberfläche bereitstellt (als Granite-UI-Komponenten bezeichnet).

Bevor Sie beginnen, überprüfen Sie den Status und die zugehörigen Empfehlungen:

Die Grundlagen der Entwicklung der Touch-Benutzeroberfläche bieten eine solide Grundlage:

Migrieren der Seitenbearbeitung migrating-page-authoring

Dialoge sind bei der Migration Ihrer Komponenten ein wichtiger Faktor:

Migrieren von Konsolen migrating-consoles

Sie können die Konsolen auch anpassen:

Verwandte Aspekte related-considerations

Obwohl dies nicht direkt mit einer Migration zur Touch-optimierten Benutzeroberfläche in Zusammenhang steht, sollten gleichzeitig auch verwandte Probleme in Betracht gezogen werden, da dies ebenfalls empfohlen wird:

Weitere Ressourcen further-resources

Umfassende Informationen zur Entwicklung von AEM finden Sie in der Sammlung von Ressourcen unter:

CAUTION
AEM Modernisierungs-Tools sind ein Community-Projekt und werden vom Adobe nicht unterstützt oder garantiert.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2