Classic to Touch UI Migration for AEM: Fler tips från Upplevelse

(Liubou Masiuk) (17 okt, 2019)

I vårt tidigare (inlägg om Classic till TouchUI-migration) beskrev vi vårt övergripande “Hybrid Mode” -sätt för att migrera ett helt Classic UI-komponentbibliotek till Touch UI med AEMs kompatibilitetsläge. I inlägget hänvisade vi till några ”konstigheter” som vi stötte på. I det här nya inlägget går vi mycket mer i detalj om dessa särdrag och hur man hanterar några av dessa särdrag.

Även om hybridläget är extremt användbart, har det vissa begränsningar som kan förhindra utvecklingsteamet från att anta TouchUI utan extra ansträngning för stora projekt. Här är några av de problem som vi stött på och de lösningar som vårt utvecklingsteam kom med.

Författaren kan inte dra & släppa bilder medan en komponent redigeras

ClassicUI Widgets-biblioteket tillhandahåller en SmartImage-komponent för överföring och bearbetning av bilder. Bildtillgångar kan som standard laddas upp på två olika sätt:

  • Från filsystemet
  • Från DAM (Digital Asset Manager) genom att dra bilden från sidinnehållssökaren panel på vänster sida
DAM-tillgångspanel (TouchUI-gränssnitt)
DAM-tillgångspanel (TouchUI-gränssnitt)

Låt oss dyka djupt in i de tekniska detaljerna för TouchUI-implementering. Kompatibilitetsläget gör en ClassicUI-dialogruta i en iframe. Av något skäl har det kompatibla läget ingen logik för att spåra dra & släppa händelser direkt från lådan. Detta hindrar författare från att dra bilder från panelen Tillgångar (eftersom de är vana vid att göra det inom ClassicUI-upplevelsen). Det betyder att de inte har något sätt att placera bilden i komponenten. Dessutom, när ett bildfält krävs, har författaren inte möjlighet att slutföra komponentkonfigurationen på grund av ett tomt obligatoriskt fält.

Lösning

För att lösa detta problem bestämde vi oss för att utöka Standard SmartImage-komponenten för att återge ett sökfält utöver befintlig funktionalitet. Som ett resultat får författaren möjligheten att välja en bild med hjälp av sökfält och bilden visas i SmartImage-området för att förhandsgranska och / eller ändra bilden om det behövs. För icke existerande sökvägar (eller icke-bildsökvägar) markeras fältet som ogiltigt.

Obligatoriskt bildområde inuti komponenten
Obligatoriskt bildområde inuti komponenten
  1. Registrera om originalet htmlsamartimage xtype med en inneboende anpassad som utökar originalet CQ HtmlSmartImage-widget. Vid initialiseringen av den nya widgeten lägger vi till en ytterligare PathField-widget till komponentbehållarna. Dessutom tillhandahåller vi små uppdateringar av standardwidgetlayouten som är en vanlig UI-uppdatering för ExtJS-baserade användargränssnitt.
  2. Bindningskontroller (PathFields) i alla HTMLSmartImages. Först och främst förbereder vi hjälpare genom att skapa metoder för att hämta och ställa in värden från PathPicker och samma metoder för den ursprungliga komponenten. Det första paret är setValue och getValue av PathField, vilket är den enkla delen. Den knepiga delen handlar om det ursprungliga komponentvärdet. HTMLSmartImage lagrar inte sitt värde i ett tillgängligt tillstånd.

Att få den aktuella bildvägen görs enkelt genom att använda metoden this.fileReferenceField.getValue (). Men för att ställa in värdet till den ursprungliga widgeten måste vi emulera ett bildresursfall på komponenten. Vi kan hantera det på följande sätt:

Nu när vi har alla värdetillbehör behöver vi vet när originalet och när Pathfield-värdet ändras. För att spåra Pathfield-ändringar kan vi använda en oskärpa – händelse. För den ursprungliga widgeten är ”imagestate” -händelsen den mest lämpliga. Vi måste spåra två typer av ändringar av bildtillstånd: originalremoved och originalavailable, så att lyssnaren kan vara följande:

Nu är den redo för bindning. För att behålla valideringsmekanismen i den nya implementeringen åsidosätter vi den ursprungliga valideringslogiken för den inbäddade sökvägsinstansen.

Alla dialogrutor för byggnadsfält är inaktiverade

AEM Ställningsläge gör det möjligt för författare att enkelt skapa sidor baserat på en specifik byggnadsformsstruktur. Byggnadsställningar är extremt användbara för att skapa väldefinierat strukturerat innehåll (t.ex. artiklar, blogginlägg).

I hybridläget är alla ställningsformfält inaktiverade, vilket innebär att de inte kan redigeras.

Exempel på ställningsform
Exempel på ställningsform

Lösning

Att inkludera cq.security-biblioteket i sidans JSP löste problemet och ställningsformuläret började fungera ordentligt.

Hybriddialogrutan stängs utan att spara data när du klickar utanför dialogområdet

Alla komponenter redigeras i dialogrutan för komponentkonfiguration, som dyker upp i redigeringsläge.

Redigera en komponent i AEM (TouchUI-gränssnitt)
Redigera en komponent i AEM (TouchUI-gränssnitt)

Det finns en liten skillnad i användarupplevelse i Hybrid- och TouchUI-dialogrutor:

  • Om en användare klickar bort från TouchUI-dialogrutan händer ingenting.
  • Om en användare klickar bort från hybrid dialogrutan stängs den utan att spara inmatade data.

Detta betyder att alla osparade data är g försvinner om du klickar av misstag utanför komponenten! Naturligtvis är detta ganska irriterande för författare.

Lösning

Lyckligtvis är lösningen ganska enkel. Inledningsvis är dialogbakgrunden i ”modalt” läge. För att ändra bakgrundsläget för dialog måste dialogens JSP-fil överlagras och dialogbakgrundsläget ställas in på “statiskt” värde.

Vissa dialogfält passar inte i dialogfönstrets område

Som vi redan har beskrivit tidigare visas UI-dialogrutor i en iframe inuti TouchUI-dialogfönstret. Detta dialogfönster passar ibland inte allt dynamiskt innehåll, vilket ibland orsakar en konstig layout där extra rullningsfält visas i dialogrutan.

Ytterligare rullning element för komponenten i hybridläge
Ytterligare rullelement för komponenten i hybridläge

Lösning

För att övervinna detta besvär lägger vi över JSP-filen som innehåller alla konfigurationsinställningar för korrekt återgivning av dialoger i kompatibilitetsläget. Denna JSP-fil placeras inom följande väg:

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

Vi ändrar fönsterbredd och höjd för att ta hänsyn till originalet dialogens dimensioner, liksom webbläsarens fönsterstorlek.

Vi hanterar denna situation via skript som faktiskt ger bindning mellan Touch UI (Coral) -omslaget och inbäddad klassisk dialog i iframe. Händelsen ”dialogwrapper-ready” + ns behövs för det med förberäknad bredd och höjd som parametrar för hanteringsfunktion. Det är också möjligt att göra din egen beräkning och sedan ställa in bredden och höjden till Coral Dialog-innehållet:

Vissa komponenter kan inte redigeras i TouchUI (enkelt)

Författarupplevelsen är en av de viktigaste punkterna att tänka på när komponenter implementeras i AEM. Föreställ dig en karusellkomponent som innehåller ett antal bilder. I redigeringsläge är det bättre att återge alla karusellglas som en kolumn så att författaren enkelt kan ordna om bildordningen och få åtkomst till dem samtidigt utan att växla mellan bilderna. Det finns en viktig skillnad mellan ClassicUI och TouchUI:

  • I ClassicUI är författarelementen (t.ex. redigeringsfält) en del av markeringen som återges med komponenten i redigeringsläge.
  • I TouchUI återges författarelementen i ett överlägg. Slutlig komponentmarkering återges i en iframe. Kombinationen av dessa villkor leder en författare till situationen när det inte är möjligt att interagera med komponenten i redigeringsläget alls (t.ex. klicka på knappar, bläddra genom karusellens bilder).

Så vi står inför fall där ett par komponenter i vårt bibliotek kräver viss interaktion innan användaren kan börja redigeringsprocessen, men detta kan inte enkelt uppnås i TouchUI.

Lösningar

Det finns dock ett par korrigeringar som kan ses som möjliga lösningar:

  1. Det finns en snabb och enkel lösning som inte kräver någon ansträngning: alla redigerbara komponenter finns i Content Tree och bredvid var och en av dem finns en skiftnyckel som öppnar redigeringsdialogen.
Sidinnehållsträd i TouchUI gränssnitt
Sidinnehållsträd i TouchUI-gränssnitt

2. För komplexa komponenter med många underkomponenter kan markeringen av komponenten i redigeringsläge ändras så att alla ”dolda” komponentområden är öppna för författarens ”ögon”. Detta skulle innebära att allt är synligt och tillgängligt via redigeringsläge.

3. Som en bästa praxis tillhandahåller Adobe en lösning för att stödja en sådan författarupplevelse i AEM-kärnkomponenter . Karusellkomponent och Flikar Komponent använder alternativet Välj panel i komponentverktygsfältet för att ordna om bilderna och visar och ändra det för närvarande förhandsgranskade elementet.

Out-of-the-box-lösning för att nå innehåll som är dolt från författare
Out-of-the-box-lösning för att nå innehåll som är dolt för författare

Knappen ”Lås upp sida” fungerar inte

Det finns ett standard AEM-alternativ att låsa och låsa upp sidan för ändringar. Under valideringen av TouchUI-migreringsmetoden fann vi en situation där författaren inte kunde återställa en ”låst” sida till sitt ursprungliga tillstånd. Lyckligtvis fungerar denna funktion ordentligt via AEM Site Console.

Alternativet
Låsalternativ i TouchUI-gränssnittet

Ett liknande problem beskrivs här och här .

Lösning

Felmeddelandet i webbläsarkonsolen säger att det ”Kan inte läsa egendom” delad ”av odefinierad ”. Grundorsaken ligger i ett saknat klientbibliotek cq.shared.

Felmeddelande vid hantering av funktionen
Felmeddelande vid ”Låsning / upplåsning” -funktion

Inkluderar ”cq.shared” -bibliotek i sidans JSP-lösningar problemet och knappen ”Lås upp sida” börjar fungera som förväntat.

Författare: Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

Ursprungligen publicerad på https://exadel.com den 17 oktober 2019.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *