Classic-to-Touch-UI-Migration für AEM: Weitere Tipps von Erfahrung

(Liubou Masiuk) (17. Oktober 2019)

In unserem vorherigen Beitrag (Beitrag zur Migration von Classic zu TouchUI) haben wir unseren allgemeinen Ansatz für den Hybridmodus beschrieben, mit dem eine vollständig klassische UI-Komponentenbibliothek mithilfe von Touch UI zu Touch UI migriert werden kann AEMs Kompatibilitätsmodus. In der Post haben wir auf einige „Macken“ angespielt, denen wir begegnet sind. In diesem neuen Beitrag gehen wir viel detaillierter auf diese Macken und den Umgang mit einigen dieser Macken ein.

Obwohl der Hybridmodus äußerst nützlich ist, weist er einige Einschränkungen auf, die das Entwicklerteam an der Übernahme hindern können TouchUI ohne zusätzlichen Aufwand bei großen Projekten. Hier sind einige der Probleme, auf die wir gestoßen sind, und die Lösungen, die unser Entwicklungsteam gefunden hat.

Der Autor kann & keine Drop-Bilder ziehen, während er eine Komponente bearbeitet

Die ClassicUI Widgets-Bibliothek bietet eine SmartImage-Komponente zum Hochladen und Verarbeiten von Bildern. Bildelemente können standardmäßig auf zwei verschiedene Arten hochgeladen werden:

  • Aus dem Dateisystem
  • Aus dem DAM (Digital Asset Manager) durch Ziehen des Bilds aus dem Seiteninhaltsfinder Bereich auf der linken Seite
Bereich
Bereich „DAM-Assets“ (TouchUI-Oberfläche)

Lassen Sie uns tief in die technischen Details der TouchUI-Implementierung eintauchen. Der Kompatibilitätsmodus rendert einen ClassicUI-Dialog innerhalb eines Iframes. Aus irgendeinem Grund verfügt der kompatible Modus über keine Logik zum Verfolgen von Drag-and-Div-Drop-Ereignissen &. Dies hindert Autoren daran, Bilder aus dem Assets-Bedienfeld zu ziehen (wie sie es in der ClassicUI-Erfahrung gewohnt sind). Dies bedeutet, dass sie keine Möglichkeit haben, das Bild in der Komponente zu platzieren. Wenn ein Bildfeld erforderlich ist, hat der Autor aufgrund eines leeren erforderlichen Felds keine Möglichkeit, die Komponentenkonfiguration abzuschließen.

Lösung

Um dieses Problem zu lösen, haben wir uns entschieden Erweitern Sie die Standard-SmartImage-Komponente, um zusätzlich zu den vorhandenen Funktionen ein Pfadfeld zu rendern. Als Ergebnis erhält der Autor die Möglichkeit, ein Bild mithilfe des Pfadfelds auszuwählen. Das Bild wird im SmartImage-Bereich angezeigt, um das Bild bei Bedarf in der Vorschau anzuzeigen und / oder zu ändern. Bei nicht vorhandenen Pfaden (oder Nicht-Bildpfaden) wird das Feld als ungültig markiert.

Erforderlicher Bildbereich innerhalb der Komponente
Erforderlicher Bildbereich innerhalb der Komponente
  1. Registrieren Sie den ursprünglichen HTML-Samtbild-X-Typ erneut mit einem benutzerdefinierten, der das Original erweitert CQ HtmlSmartImage-Widget. Bei der Initialisierung des neuen Widgets fügen wir den Komponentencontainern ein zusätzliches PathField-Widget hinzu. Darüber hinaus bieten wir kleine Aktualisierungen des Standard-Widget-Layouts, das ein allgemeines UI-Update für ExtJS-basierte Benutzeroberflächen ist.
  2. Bindungssteuerelemente (PathFields) in allen HTMLSmartImages. Zunächst bereiten wir Helfer vor, indem wir Methoden zum Abrufen und Festlegen von Werten aus PathPicker und dieselben Methoden für die ursprüngliche Komponente erstellen. Das erste Paar ist setValue und getValue des PathField, was der einfache Teil ist. Der schwierige Teil befasst sich mit dem ursprünglichen Komponentenwert. HTMLSmartImage speichert seinen Wert nicht in einem zugänglichen Zustand.

Um den aktuellen Bildpfad abzurufen, können Sie die Methode this.fileReferenceField.getValue () verwenden. Um den Wert auf das ursprüngliche Widget zu setzen, müssen wir jedoch einen Bildressourcenabfall für die Komponente emulieren. Wir können das folgendermaßen verwalten:

Wenn wir nun alle Wertzugriffsmethoden haben, die wir benötigen wissen, wann sich das Original und der Pathfield-Wert ändern. Um Pathfield-Änderungen zu verfolgen, können wir ein „Unschärfe“ -Ereignis verwenden. Für das ursprüngliche Widget ist das Ereignis „Imagestate“ am besten geeignet. Wir müssen zwei Arten von Bildstatusänderungen verfolgen: originalremoved und originalavailable, damit der Listener der folgende sein kann:

Jetzt kann es gebunden werden. Um den Validierungsmechanismus in der neuen Implementierung beizubehalten, überschreiben wir die ursprüngliche Validierungslogik für die eingebettete Pfadfeldinstanz.

Alle Gerüstfelddialoge sind deaktiviert.

AEM Gerüstmodus ermöglicht es einem Autor, auf einfache Weise Seiten basierend auf einer bestimmten Gerüstformularstruktur zu erstellen. Gerüste sind äußerst nützlich, um genau definierte strukturierte Inhalte (z. B. Artikel, Blog-Beiträge) zu erstellen.

Im Hybridmodus sind alle Felder für Gerüstformulare deaktiviert, sodass sie nicht bearbeitet werden können.

Beispiel für ein Gerüstformular
Beispiel für ein Gerüstformular

Lösung

Durch das Einfügen der cq.security-Bibliothek in die JSP der Seite wurde das Problem behoben, und die Gerüstformulare funktionierten ordnungsgemäß.

Der Hybriddialog wird geschlossen, ohne dass beim Klicken Daten gespeichert werden außerhalb des Dialogbereichs

Alle Komponenten werden im Komponentenkonfigurationsdialogfenster bearbeitet, das im Bearbeitungsmodus angezeigt wird.

Bearbeiten einer Komponente in AEM (TouchUI-Schnittstelle)
Bearbeiten einer Komponente in AEM (TouchUI-Schnittstelle)

Es gibt Ein kleiner Unterschied in der Benutzererfahrung in Hybrid- und TouchUI-Dialogen:

  • Wenn ein Benutzer vom TouchUI-Dialogfeld wegklickt, geschieht nichts.
  • Wenn ein Benutzer vom Hybrid wegklickt Das Dialogfeld wird geschlossen, ohne die eingegebenen Daten zu speichern.

Dies bedeutet, dass alle nicht gespeicherten Daten g sind Sie können bei einem versehentlichen Klicken außerhalb der Komponente verloren gehen! Unnötig zu erwähnen, dass dies für Autoren ziemlich ärgerlich ist.

Lösung

Zum Glück ist die Lösung ziemlich einfach. Der Dialoghintergrund befindet sich zunächst im „modalen“ Modus. Um den Dialoghintergrundmodus zu ändern, muss die JSP-Datei des Dialogfelds überlagert und der Dialoghintergrundmodus auf den Wert „statisch“ gesetzt werden.

Einige Dialogfelder passen nicht in den Dialogfensterbereich

Wie bereits beschrieben, werden UI-Dialoge in einem Iframe im TouchUI-Dialogfenster gerendert. Dieses Dialogfenster passt manchmal nicht zu allen dynamischen Inhalten, was manchmal zu einem seltsamen Layout führt, in dem zusätzliche Bildlaufleisten im Dialogfeld angezeigt werden.

Zusätzlicher Bildlauf Element für die Komponente im Hybridmodus
Zusätzliches Bildlaufelement für die Komponente im Hybridmodus

Lösung

Um diese Unannehmlichkeiten zu überwinden, überlagern wir die JSP-Datei, die alle Konfigurationseinstellungen für das ordnungsgemäße Rendern von Dialogen im Kompatibilitätsmodus enthält. Diese JSP-Datei wird unter dem folgenden Pfad wie folgt abgelegt:

apps/cq/gui/components/authoring/compat/components/dialog/dialog.jsp

Wir ändern die Fensterbreite und -höhe, um das Original zu berücksichtigen Die Abmessungen des Dialogfelds sowie die Fenstergröße des Browsers.

Wir behandeln diese Situation über ein Skript, das tatsächlich eine Bindung zwischen dem Touch UI (Coral) -Wrapper und dem eingebetteten klassischen Dialogfeld im Iframe herstellt. Das Ereignis „dialogwrapper-ready“ + ns wird dafür mit vorberechneter Breite und Höhe als Handlerfunktionsparameter benötigt. Sie können auch Ihre eigene Neuberechnung durchführen und dann die Breite und Höhe auf den Inhalt des Korallendialogs einstellen:

Einige Komponenten können nicht einfach in TouchUI bearbeitet werden.

Die Authoring-Erfahrung ist einer der wichtigsten Punkte, die bei der Implementierung von Komponenten in AEM berücksichtigt werden müssen. Stellen Sie sich eine Karussellkomponente vor, die mehrere Folien enthält. Im Bearbeitungsmodus ist es besser, alle Karussellfolien als Spalte zu rendern, damit der Autor die Folienreihenfolge leicht ändern und gleichzeitig auf alle zugreifen kann, ohne zwischen den Folien wechseln zu müssen. Es gibt einen wichtigen Unterschied zwischen ClassicUI und TouchUI:

  • In ClassicUI sind die Authoring-Elemente (z. B. Bearbeitungsleisten) Teil des Markups, das mit der Komponente im Bearbeitungsmodus gerendert wird.
  • In TouchUI werden die Authoring-Elemente in einer Überlagerung gerendert. Das endgültige Komponenten-Markup wird in einem Iframe gerendert. Die Kombination dieser Bedingungen führt einen Autor zu einer Situation, in der es überhaupt nicht möglich ist, mit der Komponente im Bearbeitungsmodus zu interagieren (z. B. Schaltflächen anklicken, durch die Folien eines Karussells blättern).

Wir sehen uns also Fällen gegenüber, in denen einige Komponenten in unserer Bibliothek eine gewisse Interaktion erfordern, bevor der Benutzer den Bearbeitungsprozess starten kann. Dies kann jedoch in TouchUI nicht einfach erreicht werden.

Lösungen

Es gibt jedoch einige Korrekturen, die als mögliche Lösungen in Betracht gezogen werden könnten:

  1. Es gibt eine schnelle und einfache Problemumgehung, die keinen Entwicklungsaufwand erfordert: Alle bearbeitbaren Komponenten finden Sie im Inhaltsbaum und Neben jedem von ihnen befindet sich ein Schraubenschlüsselsymbol, das den Bearbeitungsdialog öffnet.
Seiteninhaltsbaum in TouchUI Schnittstelle
Seiteninhaltsbaum in der TouchUI-Oberfläche

2. Bei komplexen Komponenten mit vielen Unterkomponenten kann das Markup der Komponente im Bearbeitungsmodus geändert werden, um alle „versteckten“ Komponentenbereiche für die „Augen“ des Autors zu öffnen. Dies würde bedeuten, dass alles im Bearbeitungsmodus sichtbar und zugänglich ist.

3. Als bewährte Methode bietet Adobe eine Lösung zur Unterstützung eines solchen Authoring-Erfahrungsfalls in AEM-Kernkomponenten . Karussellkomponente und Registerkartenkomponente verwenden die Option Panel auswählen in der Komponentensymbolleiste, um die Folien neu anzuordnen und zeigt das aktuell angezeigte Element an und ändert es.

Out-of-the-Box-Lösung zum Erreichen von Inhalten, die vor dem Authoring verborgen sind
Out-of-the-Box-Lösung zum Erreichen von Inhalten, die vor dem Authoring verborgen sind

Die Schaltfläche „Seite entsperren“ funktioniert nicht

Es gibt eine Standard-AEM-Option zum Sperren und Entsperren der Seite für Änderungen. Bei der Validierung des TouchUI-Migrationsansatzes haben wir eine Situation festgestellt, in der der Autor eine gesperrte Seite nicht in ihren ursprünglichen Zustand zurücksetzen konnte. Glücklicherweise funktioniert diese Funktionalität über die AEM Site Console ordnungsgemäß.

Option Sperren in der TouchUI-Oberfläche
Sperren Sie die Option in der TouchUI-Oberfläche

Ein ähnliches Problem wird hier und hier .

Lösung

Die Fehlermeldung in der Browserkonsole besagt, dass die Eigenschaft shared von undefined nicht gelesen werden kann ”. Die Hauptursache liegt in einer fehlenden Clientbibliothek cq.shared.

Fehlermeldung beim Umgang mit der Funktion Sperren / Entsperren
Fehlermeldung beim Behandeln der Funktion „Sperren / Entsperren“

Einbeziehen der Bibliothek „cq.shared“ in die JSP-Lösungen der Seite Das Problem und die Schaltfläche „Seite entsperren“ funktionieren wie erwartet.

Autoren: Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

Ursprünglich veröffentlicht bei https://exadel.com am 17. Oktober 2019.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.