Klassiek naar Touch UI-migratie voor AEM: meer tips van Ervaring

(Liubou Masiuk) (17 oktober 2019)

In onze vorige (post over de migratie van klassiek naar TouchUI) hebben we onze algemene benadering in de “hybride modus” beschreven voor het migreren van een volledig klassieke bibliotheek met componenten van de gebruikersinterface naar de gebruikersinterface van Touch AEMs compatibiliteitsmodus. In de post wezen we op enkele “eigenaardigheden” die we tegenkwamen. In dit nieuwe bericht gaan we veel dieper in op deze eigenaardigheden en hoe we met sommige van deze eigenaardigheden om kunnen gaan.

Hoewel de hybride modus buitengewoon nuttig is, heeft deze enkele beperkingen waardoor het ontwikkelingsteam geen gebruik kan maken van TouchUI zonder extra inspanning bij grote projecten. Hier zijn enkele van de problemen die we tegenkwamen en de oplossingen die ons ontwikkelingsteam bedacht.

Auteur kan & afbeeldingen niet slepen tijdens het bewerken van een component

De ClassicUI Widget-bibliotheek biedt een SmartImage-component voor het uploaden en verwerken van afbeeldingen. Afbeeldingsitems kunnen standaard op twee verschillende manieren worden geüpload:

  • Vanuit het bestandssysteem
  • Vanuit de DAM (Digital Asset Manager) door de afbeelding vanuit de pagina-inhoudzoeker te slepen paneel aan de linkerkant
DAM Assets-paneel (TouchUI-interface)
DAM Assets-paneel (TouchUI-interface)

Laten we dieper ingaan op de technische details van TouchUI-implementatie. De compatibiliteitsmodus geeft een ClassicUI-dialoogvenster weer in een iframe. Om de een of andere reden heeft de compatibele modus geen logica voor het bijhouden van slepen & drop-gebeurtenissen out-of-the-box. Dit zorgt ervoor dat auteurs geen afbeeldingen uit het middelenpaneel kunnen slepen (zoals ze gewend zijn binnen de ClassicUI-ervaring). Dit betekent dat ze geen manier hebben om de afbeelding in de component te plaatsen. Bovendien, wanneer een afbeeldingsveld vereist is, heeft de auteur niet de mogelijkheid om de componentconfiguratie te voltooien vanwege een leeg verplicht veld.

Oplossing

Om dit probleem op te lossen hebben we besloten om breid de Standard SmartImage-component uit om naast de bestaande functionaliteit een padveld weer te geven. Als resultaat krijgt de auteur de mogelijkheid om een ​​afbeelding te selecteren met behulp van het padveld en de afbeelding verschijnt in het SmartImage-gebied om een ​​voorbeeld van de afbeelding te bekijken en / of de afbeelding indien nodig te wijzigen. Voor niet-bestaande paden (of niet-afbeeldingspaden) wordt het veld gemarkeerd als ongeldig.

Vereist afbeeldingsgebied binnen de component
Vereist afbeeldingsgebied binnen de component
  1. Registreer het originele htmlsamartimage xtype opnieuw met een inherent aangepast type dat het origineel uitbreidt CQ HtmlSmartImage-widget. Bij de initialisatie van de nieuwe widget voegen we een extra PathField-widget toe aan de componentcontainers. Bovendien bieden we kleine updates voor de standaard widgetlay-out die een algemene UI-update is voor op ExtJS gebaseerde UIs.
  2. Bindingsbesturingselementen (PathFields) in alle HTMLSmartImages. Allereerst bereiden we helpers voor door methoden te creëren voor het ophalen en instellen van waarden van PathPicker en dezelfde methoden voor de originele component. Het eerste paar is setValue en getValue van PathField, wat het makkelijke gedeelte is. Het lastige is het omgaan met de oorspronkelijke componentwaarde. HTMLSmartImage slaat zijn waarde niet op in een toegankelijke staat.

Het huidige afbeeldingspad ophalen is eenvoudig te doen door de methode this.fileReferenceField.getValue () te gebruiken. Maar om de waarde in te stellen op de originele widget, moeten we een afbeeldingsresource-drop op de component emuleren. We kunnen dat op de volgende manier beheren:

Als we nu alle waardeaccessors hebben, moeten we weet wanneer het origineel en wanneer de Pathfield-waarde verandert. Om Pathfield-wijzigingen bij te houden, kunnen we een ‘blur’ -gebeurtenis gebruiken. Voor de originele widget is het evenement ‘imagestate’ het meest geschikt. We moeten twee soorten wijzigingen in de afbeeldingsstatus bijhouden: originalremoved en originalavailable, dus de luisteraar kan de volgende zijn:

Nu is het klaar om te binden. Om het validatiemechanisme in de nieuwe implementatie te behouden, overschrijven we de oorspronkelijke validatielogica voor de ingesloten pathfield-instantie.

Alle scaffolding-velden-dialoogvensters zijn uitgeschakeld

AEM Steigermodus stelt een auteur in staat eenvoudig paginas te maken op basis van een specifieke steigervormstructuur. Steigers zijn uitermate handig voor het maken van goed gedefinieerde gestructureerde inhoud (bijv. Artikelen, blogposts).

In de hybride modus zijn alle steigerformuliervelden uitgeschakeld, wat betekent dat ze niet kunnen worden bewerkt.

Voorbeeld steigerformulier
Voorbeeld steigerformulier

Oplossing

Het opnemen van de cq.security-bibliotheek in de JSP van de pagina loste het probleem op en de steigervormen begonnen correct te werken.

Hybride dialoogvenster sluit zonder gegevens op te slaan bij klikken buiten het dialoogvenster

Alle componenten worden bewerkt in het componentconfiguratiedialoogvenster, dat verschijnt in de bewerkingsmodus.

Een component bewerken in AEM (TouchUI-interface)
Een component bewerken in AEM (TouchUI-interface)

Er is een klein verschil in gebruikerservaring in Hybride en TouchUI-dialoogvensters:

  • Als een gebruiker wegklikt uit het TouchUI-dialoogvenster, gebeurt er niets.
  • Als een gebruiker wegklikt van de hybride dialoogvenster, wordt het gesloten zonder de ingevoerde gegevens op te slaan.

Dit betekent dat alle niet-opgeslagen gegevens g kunnen verloren gaan in geval van een onbedoelde klik buiten het onderdeel! Dit is natuurlijk best vervelend voor auteurs.

Oplossing

Gelukkig is de oplossing vrij eenvoudig. Aanvankelijk bevindt de achtergrond van het dialoogvenster zich in de “modale” modus. Om de achtergrondmodus van het dialoogvenster te wijzigen, moet het JSP-bestand van het dialoogvenster worden bedekt en moet de achtergrondmodus van het dialoogvenster worden ingesteld op de “statische” waarde.

Sommige dialoogvelden passen niet in het dialoogvenstervenster

Zoals we al eerder hebben beschreven, worden UI-dialoogvensters weergegeven in een iframe in het TouchUI-dialoogvenster. Dit dialoogvenster past soms niet op alle dynamische inhoud, waardoor er soms een rare lay-out ontstaat waarin extra schuifbalken in het dialoogvenster verschijnen.

Extra scroll element voor de component in hybride modus
Extra scroll-element voor de component in hybride modus

Oplossing

Om dit ongemak te verhelpen, leggen we het JSP-bestand over elkaar dat alle configuratie-instellingen bevat voor het correct weergeven van dialoogvensters in de compatibiliteitsmodus. Dit JSP-bestand wordt binnen het volgende onder het volgende pad geplaatst:

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

We wijzigen de breedte en hoogte van het venster om rekening te houden met het origineel de afmetingen van het dialoogvenster, evenals de venstergrootte van de browser.

We behandelen deze situatie via een script dat daadwerkelijk een binding biedt tussen de Touch UI (Coral) wrapper en het ingesloten klassieke dialoogvenster in iframe. De gebeurtenis “dialogwrapper-ready” + ns is daarvoor nodig met vooraf berekende breedte en hoogte als handlerfunctieparameters. Het is ook mogelijk om uw eigen herberekening uit te voeren en vervolgens de breedte en hoogte in te stellen op de Coral Dialog-inhoud:

Sommige componenten kunnen niet (gemakkelijk) worden bewerkt in TouchUI

De authoring-ervaring is een van de belangrijkste punten om te overwegen bij het implementeren van componenten in AEM. Stel je een carrouselcomponent voor die een aantal dias bevat. In de bewerkingsmodus is het beter om alle carrouseldias als een kolom weer te geven, zodat de auteur de volgorde van de dias gemakkelijk kan wijzigen en ze allemaal tegelijk kan openen zonder tussen dias te schakelen. Er is een belangrijk verschil tussen ClassicUI en TouchUI:

  • In ClassicUI maken de authoring-elementen (bijv. Bewerkbalken) deel uit van de opmaak die wordt weergegeven met de component in de bewerkingsmodus.
  • In TouchUI worden de authoring-elementen weergegeven in een overlay. De opmaak van de laatste component wordt weergegeven in een iframe. De combinatie van deze voorwaarden leidt een auteur naar de situatie waarin het helemaal niet mogelijk is om met de component te communiceren in de bewerkingsmodus (bijv. Op knoppen klikken, door de dias van een carrousel bladeren).

We worden dus geconfronteerd met gevallen waarin een aantal componenten in onze bibliotheek enige interactie vereisen voordat de gebruiker het bewerkingsproces kan starten, maar dit kan niet gemakkelijk worden bereikt in TouchUI.

Oplossingen

Er zijn echter een aantal reparaties die als mogelijke oplossingen kunnen worden beschouwd:

  1. Er is een snelle en eenvoudige oplossing die geen ontwikkelingsinspanning vereist: alle bewerkbare componenten zijn te vinden in de inhoudsstructuur en er is een moersleutelpictogram naast elk ervan waarmee het bewerkingsvenster wordt geopend.
Structuur van pagina-inhoud in TouchUI interface
Pagina-inhoudstructuur in TouchUI-interface

2. Voor complexe componenten met veel subcomponenten kan de opmaak van de component in de bewerkingsmodus worden gewijzigd om alle ‘verborgen’ componentgebieden open te stellen voor de ‘ogen’ van de auteur. Dit zou betekenen dat alles zichtbaar en toegankelijk is via de bewerkingsmodus.

3. Als best practice biedt Adobe een oplossing ter ondersteuning van een dergelijke authoring-ervaring binnen AEM-kerncomponenten . Carrouselcomponent en Tabbladcomponent gebruiken de optie Paneel selecteren in de componentwerkbalk om de dias opnieuw te ordenen en bekijkt en wijzigt het element dat momenteel wordt bekeken.

Kant-en-klare oplossing voor het bereiken van inhoud die verborgen is voor het schrijven
Kant-en-klare oplossing voor het bereiken van inhoud die voor het schrijven verborgen is

De knop “pagina ontgrendelen” werkt niet

Er is een standaard AEM-optie om de pagina te vergrendelen en te ontgrendelen voor wijzigingen. Bij het valideren van de TouchUI-migratiebenadering hebben we een situatie gevonden waarin de auteur een ‘vergrendelde’ pagina niet kon terugzetten naar de oorspronkelijke staat. Gelukkig werkt deze functionaliteit correct via de AEM Site Console.

Lock-optie in TouchUI-interface
Lock optie in TouchUI-interface

Een soortgelijk probleem wordt hier en hier .

Oplossing

Het foutbericht in de browserconsole zegt dat het “Kan eigenschap gedeeld van ongedefinieerde ”. De hoofdoorzaak ligt in een ontbrekende clientbibliotheek cq.shared.

Foutmelding bij het omgaan met de functie Vergrendelen / ontgrendelen
Foutmelding bij het omgaan met de Vergrendelen / Ontgrendelen-functionaliteit

Het opnemen van de cq.shared bibliotheek in de JSP van de pagina lost op het probleem en de knop “Ontgrendel pagina” begint zoals verwacht te werken.

Auteurs: Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

Oorspronkelijk gepubliceerd op https://exadel.com op 17 oktober 2019.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *