Klassisk til berøringsgrænseflade-migrering til AEM: Flere tip fra Oplevelse

(Liubou Masiuk) (17. okt. 2019)

I vores forrige (indlæg om Classic til TouchUI-migration) beskrev vi vores samlede “Hybrid Mode” tilgang til at migrere et helt Classic UI-komponentbibliotek til Touch UI ved hjælp af AEMs kompatibilitetstilstand. I posten henviste vi til nogle “quirks”, som vi stødte på. I dette nye indlæg går vi meget mere detaljeret ind i disse quirks og hvordan man håndterer nogle af disse quirks.

Selvom Hybrid Mode er ekstremt nyttig, har den nogle begrænsninger, der kan forhindre udviklingsteamet i at vedtage TouchUI uden yderligere indsats på store projekter. Her er nogle af de problemer, vi stødte på, og de løsninger, som vores udviklingsteam kom på.

Forfatteren kan ikke trække & slip billeder, mens han redigerer en komponent

ClassicUI Widgets-biblioteket giver en SmartImage-komponent til upload og behandling af billeder. Billedaktiver kan som standard uploades på to forskellige måder:

  • Fra filsystemet
  • Fra DAM (Digital Asset Manager) ved at trække billedet fra sideindholdsfinderen panel på venstre side
DAM-aktivpanel (TouchUI-interface)
DAM-aktivpanel (TouchUI-interface)

Lad os dykke dybt ned i de tekniske detaljer i TouchUI-implementering. Kompatibilitetstilstanden gengiver en ClassicUI-dialog inde i en iframe. Af en eller anden grund har den kompatible tilstand ikke nogen logik til sporing af træk & slip begivenheder uden for boksen. Dette begrænser forfattere fra at trække billeder ud af Assets-panelet (da de er vant til at gøre det i ClassicUI-oplevelsen). Dette betyder, at de ikke har en måde at placere billedet i komponenten. Når et billedfelt er påkrævet, har forfatteren desuden ikke muligheden for at fuldføre komponentkonfigurationen på grund af et tomt krævet felt.

Løsning

For at løse dette problem besluttede vi at udvid Standard SmartImage-komponenten til at gengive en stifelt ud over den eksisterende funktionalitet. Som et resultat får forfatteren muligheden for at vælge et billede ved hjælp af stifelt, og billedet vises inden for SmartImage-området for at få vist og / eller ændre billedet, hvis det er nødvendigt. For ikke-eksisterende stier (eller ikke-billedstier) fremhæves feltet som ugyldigt.

Påkrævet billedområde inden for komponenten
Påkrævet billedområde inde i komponenten
  1. Registrer den originale htmlsamartimage xtype igen med en iboende brugerdefineret en, der udvider originalen CQ HtmlSmartImage-widget. Ved initialiseringen af ​​den nye widget tilføjer vi en yderligere PathField-widget til komponentbeholderne. Derudover leverer vi små opdateringer til standardwidget-layoutet, der er en almindelig UI-opdatering til ExtJS-baserede brugergrænseflader.
  2. Bindende kontroller (PathFields) i alle HTMLSmartImages. Først og fremmest forbereder vi hjælpere ved at skabe metoder til at hente og indstille værdier fra PathPicker og de samme metoder til den originale komponent. Det første par er setValue og getValue af PathField, som er den nemme del. Den vanskelige del handler om den oprindelige komponentværdi. HTMLSmartImage gemmer ikke sin værdi i en tilgængelig tilstand.

At få den aktuelle billedsti gøres let ved hjælp af metoden this.fileReferenceField.getValue (). Men for at indstille værdien til den oprindelige widget er vi nødt til at efterligne et billedressourcefald på komponenten. Vi kan klare det på følgende måde:

Nu når vi har alle værditilbehør, skal vi ved, hvornår originalen og hvornår Pathfield-værdien ændres. For at spore Pathfield-ændringer kan vi bruge en sløring begivenhed. For den originale widget er imagestate begivenheden den mest egnede. Vi er nødt til at spore to typer ændringer i billedtilstand: originalremoved og originalavailable, så lytteren kan være følgende:

Nu er den klar til binding. For at holde valideringsmekanismen i den nye implementering tilsidesætter vi den oprindelige valideringslogik for den indlejrede sti-feltforekomst.

Alle dialogbokse om stilladsfelter er deaktiverede

AEM Stillads-tilstand giver en forfatter mulighed for nemt at oprette sider baseret på en bestemt stilladsformstruktur. Stilladser er yderst nyttige til oprettelse af veldefineret struktureret indhold (f.eks. Artikler, blogindlæg).

I hybridtilstand deaktiveres alle stilladsformularfelter, hvilket betyder, at de ikke kan redigeres.

Eksempel på stilladsform
Stilladsformeksempel

Løsning

Inkludering af cq.security-biblioteket i sidens JSP løste problemet, og stilladsformularerne begyndte at fungere korrekt.

Hybrid dialog lukkes uden at gemme data, når du klikker på uden for dialogområdet

Alle komponenter redigeres i dialogboksen til komponentkonfiguration, som dukker op i redigeringstilstand.

Redigering af en komponent i AEM (TouchUI-interface)
Redigering af en komponent i AEM (TouchUI-interface)

Der er en lille forskel i brugeroplevelse i Hybrid- og TouchUI-dialoger:

  • Hvis en bruger klikker væk fra TouchUI-dialogen, sker der intet.
  • Hvis en bruger klikker væk fra hybrid dialog, lukkes den uden at gemme indtastede data.

Dette betyder, at alle ikke-gemte data er g at gå tabt i tilfælde af et utilsigtet klik uden for komponenten! Det er overflødigt at sige, at dette er ret irriterende for forfattere.

Løsning

Heldigvis er løsningen ret enkel. Oprindeligt er dialogbilledet i “modal” tilstand. For at ændre dialogbaggrundsmodus skal dialogens JSP-fil overlejres, og dialogbaggrundsmodus indstilles til “statisk” værdi.

Nogle dialogfelter passer ikke til dialogvinduets område

Som vi tidligere har beskrevet, gengives UI-dialoger i en iframe inde i TouchUI-dialogvinduet. Dette dialogvindue passer undertiden ikke til alt dynamisk indhold, hvilket undertiden forårsager et underligt layout, hvor der vises ekstra rullepaneler inde i dialogen.

Yderligere rulle element til komponenten i hybridtilstand
Ekstra rulleelement for komponenten i hybridtilstand

Løsning

For at overvinde denne ulempe overlejrer vi JSP-filen, der indeholder alle konfigurationsindstillinger for korrekt gengivelse af dialoger i kompatibilitetstilstand. Denne JSP-fil er placeret inden for følgende under følgende sti:

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

Vi ændrer vinduets bredde og højde for at overveje originalen dialogens dimensioner såvel som browserens vinduesstørrelse.

Vi håndterer denne situation via script, der faktisk giver binding mellem Touch UI (Coral) -indpakningen og den indlejrede klassiske dialog i iframe. Hændelsen “dialogwrapper-ready” + ns er nødvendig til det med forudberegnet bredde og højde som behandlingsfunktionsparametre. Det er også muligt at lave din egen genberegning og derefter indstille bredden og højden til Coral Dialog-indholdet:

Nogle komponenter kan ikke redigeres i TouchUI (let)

Forfatteroplevelsen er et af de vigtigste punkter, du skal overveje, når du implementerer komponenter i AEM. Forestil dig en karruselkomponent, der indeholder et antal dias. I redigeringstilstand er det bedre at gengive alle karruseldias som en kolonne, så forfatteren let kan omarrangere diasrækkefølgen og få adgang til dem alle samtidigt uden at skifte mellem dias. Der er en vigtig forskel mellem ClassicUI og TouchUI:

  • I ClassicUI er forfatterelementerne (f.eks. Redigeringslinjer) en del af markeringen, der gengives med komponenten i redigeringstilstand.
  • I TouchUI gengives forfatterelementerne i et overlay. Markering af den endelige komponent gengives i en iframe. Kombinationen af ​​disse betingelser fører en forfatter til den situation, hvor det overhovedet ikke er muligt at interagere med komponenten i redigeringstilstand (f.eks. Klik på knapper, bladre gennem karruselens dias).

Så vi står over for tilfælde, hvor et par komponenter i vores bibliotek kræver en vis interaktion, før brugeren kan starte redigeringsprocessen, men dette kan ikke let opnås i TouchUI.

Løsninger

Der er dog et par rettelser, der kan betragtes som mulige løsninger:

  1. Der er en hurtig og enkel løsning, der ikke kræver nogen udviklingsindsats: alle redigerbare komponenter kan findes i indholdstræet og der er et skruenøgleikon ved siden af ​​hver enkelt af dem, der åbner redigeringsdialogen.
Sideindholdstræ i TouchUI interface
Sideindholdstræ i TouchUI-interface

2. For komplekse komponenter med mange underkomponenter kan markeringen af ​​komponenten i redigeringstilstand ændres for at gøre alle skjulte komponentområder åbne for forfatterens øjne. Dette vil betyde, at alt er synligt og tilgængeligt i redigeringstilstand.

3. Som en bedste praksis leverer Adobe en løsning til understøttelse af en sådan sag til forfatteroplevelse inden for AEM-kernekomponenter . Karruselkomponent og Fanekomponent bruger indstillingen Vælg panel i komponentværktøjslinjen til at omarrangere dias og se og ændre det aktuelt viste element.

Out-of-the-box-løsning til at nå indhold skjult fra ophavsmand
Out-of-the-box-løsning til at nå indhold skjult fra oprettelse

Knappen “Lås op side” fungerer ikke

Der er en standard AEM-mulighed for at låse og låse op siden for ændringer. Mens vi validerede TouchUI-migrationsmetoden, fandt vi en situation, hvor forfatteren ikke kunne vende en låst side til sin oprindelige tilstand. Heldigvis fungerer denne funktion korrekt via AEM Site Console.

Lås i TouchUI-interface
Lock option i TouchUI interface

Et lignende problem er beskrevet her og her .

Løsning

Fejlmeddelelsen i browserkonsollen siger, at den “Kan ikke læse ejendom” delt “af udefineret ”. Grundårsagen ligger i et manglende klientbibliotek cq.shared.

Fejlmeddelelse under behandling af Låsning / oplåsning -funktionalitet
Fejlmeddelelse under behandling af Låsning / oplåsning -funktionalitet

Inkluderet af cq.shared bibliotek i sidens JSP-løsninger problemet og knappen “Lås op side” begynder at virke som forventet.

Forfattere: Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

Oprindeligt udgivet på https://exadel.com den 17. oktober 2019.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *