Klasszikus és érintéses felhasználói felület áttelepítése az AEM számára: További tippek Tapasztalat

(Liubou Masiuk) (2019. október 17.)

Korábbi (a klasszikusról a TouchUI migrációra vonatkozó bejegyzésünkben) átfogó „hibrid módú” megközelítésünket ismertettük egy teljesen klasszikus felhasználói felület-összetevő könyvtár Touch UI-ra történő migrálásához Az AEM kompatibilitási módja. A bejegyzésben néhány „furcsaságra” utaltunk, amelyekkel találkoztunk. Ebben az új bejegyzésben sokkal részletesebben kitérünk ezekre a furcsaságokra és arra, hogy miként kezeljük ezeket a furcsaságokat.

Bár a Hibrid mód rendkívül hasznos, vannak bizonyos korlátai, amelyek megakadályozhatják a fejlesztői csapatot abban, hogy elfogadja A TouchUI további erőfeszítések nélkül nagy projektekben. Íme néhány olyan probléma, amellyel találkoztunk, és a megoldások, amelyekkel a fejlesztő csapatunk előállt.

A szerző nem húzhatja el a képeket & komponens szerkesztése közben

A ClassicUI Widget könyvtár SmartImage komponenst biztosít a képek feltöltéséhez és feldolgozásához. A képi eszközök alapértelmezés szerint kétféle módon tölthetők fel:

  • A fájlrendszerből
  • A DAM-ból (Digital Asset Manager) a kép húzásával az oldal tartalomkeresőjéből panel a bal oldalon
DAM-eszközök panel (TouchUI interfész)
DAM-eszközök panel (TouchUI interfész)

Merüljünk el mélyen a TouchUI megvalósításának technikai részleteiben. A kompatibilitási mód a ClassicUI párbeszédpanelt jeleníti meg egy iframe-en belül. Valamilyen oknál fogva a kompatibilis módnak nincs logikája az & események dobozon kívüli esésének nyomon követésére. Ez korlátozza a szerzőket abban, hogy képeket ne húzzanak ki az Eszközök panelről (ahogyan azt a ClassicUI élményen belül szokták). Ez azt jelenti, hogy nincs módjuk elhelyezni a képet az összetevőben. Ezenkívül, ha képmező szükséges, a szerzőnek nincs lehetősége az összetevő konfigurálásának befejezésére egy üres kötelező mező miatt.

Megoldás

A probléma megoldására úgy döntöttünk, hogy kiterjessze a Standard SmartImage összetevőt, hogy a meglévő funkcionalitás mellett elérési utat jelenítsen meg. Ennek eredményeként a szerző megkapja a képet az útvonal használatával, és a kép megjelenik a SmartImage területen, hogy szükség esetén előnézeti és / vagy megváltoztassa a képet. Nem létező elérési utak (vagy nem képi útvonalak) esetében a mező érvénytelenként van kiemelve.

Az alkatrészen belül szükséges képterület
Szükséges képterület az összetevő belsejében
  1. Az eredeti htmlsamartimage xtype újraregisztrálása egy eredendő kiterjesztéssel CQ HtmlSmartImage widget. Az új widget inicializálásakor hozzáadunk egy további PathField modult az alkatrésztartályokhoz. Ezenkívül kevés frissítést adunk az alapértelmezett widget-elrendezéshez, amely az ExtJS-alapú kezelőfelületek általános felhasználói felületének frissítése.
  2. Kötésvezérlők (PathFields) az összes HTMLSmartImages alkalmazásban. Először is segítőket készítünk elő azáltal, hogy módszereket hozunk létre az értékek megszerzéséhez és beállításához a PathPicker alkalmazásból, és ugyanazokat a módszereket az eredeti komponens számára. Az első pár a PathField setValue és getValue értéke, ami a könnyű rész. A trükkös rész az eredeti komponens értékével foglalkozik. A HTMLSmartImage nem tárolja az értékét hozzáférhető állapotban.

Az aktuális kép elérési útjának megszerzéséhez ezt a.fileReferenceField.getValue () metódust használhatja. Ahhoz azonban, hogy az eredeti widget értékét beállítsuk, egy képerőforrás-csökkenést kell utánoznunk az összetevőn. Ezt a következő módon kezelhetjük:

Most, hogy minden érték-hozzáférővel rendelkezünk tudni, hogy mikor változik az eredeti és mikor az útvonal értéke. A Pathfield változásainak nyomon követésére használhatunk egy „elmosódott” eseményt. Az eredeti widget számára az „imagestate” esemény a legalkalmasabb. Kétféle képállapot-változást kell követnünk: originalremoved és originalavailable, így a hallgató a következő lehet:

Most készen áll a kötésre. Annak érdekében, hogy az érvényesítési mechanizmus megmaradjon az új megvalósításban, felülbíráljuk a beágyazott útmező példány eredeti validációs logikáját.

Minden állványmező párbeszédablak le van tiltva

AEM Állványozási mód lehetővé teszi a szerző számára, hogy egyszerűen létrehozzon oldalakat egy adott állvány űrlapstruktúra alapján. Az állványok rendkívül hasznosak jól definiált strukturált tartalom (pl. Cikkek, blogbejegyzések) létrehozásához.

Hibrid módban az összes állvány űrlapmezője le van tiltva, ami azt jelenti, hogy nem lehet szerkeszteni őket.

Példa állványok űrlapjára
Példa állványok űrlapjára

Megoldás

A cq.security könyvtár beillesztése az oldal JSP-be megoldotta a problémát, és az állványlapok megfelelően működni kezdtek.

A hibrid párbeszédablak bezárul, adatok mentése nélkül kattintva a párbeszédpanelen kívül

Az összes összetevőt az összetevő konfigurációs párbeszédablakában szerkesztik, amely szerkesztési módban jelenik meg.

Komponens szerkesztése AEM-ben (TouchUI interfész)
Komponens szerkesztése AEM-ben (TouchUI interfész)

Van kis különbség a felhasználói élményben a Hibrid és a TouchUI párbeszédablakokban:

  • Ha egy felhasználó kattint a TouchUI párbeszédpanelen, akkor semmi sem történik.
  • Ha egy felhasználó eltávolodik a hibridtől párbeszédablakban bezáródik a bevitt adatok mentése nélkül.

Ez azt jelenti, hogy az összes nem mentett adat g elveszhet, ha véletlen kattintás történik az alkatrészen kívül! Mondanom sem kell, hogy ez nagyon bosszantó a szerzők számára.

Megoldás

Szerencsére a megoldás meglehetősen egyszerű. Kezdetben a párbeszéd háttér “modális” módban van. A párbeszéd háttér módjának megváltoztatásához a párbeszédpanel JSP fájlját át kell fedni, és a párbeszéd háttér módját „statikus” értékre kell állítani.

Néhány párbeszédmező nem illik a párbeszédablak területéhez

Amint azt már korábban leírtuk, a felhasználói felület párbeszédpanelei egy iframe-ben jelennek meg a TouchUI párbeszédablakban. Ez a párbeszédablak néha nem felel meg az összes dinamikus tartalomnak, néha furcsa elrendezést okoz, ahol extra gördítősávok jelennek meg a párbeszédpanelen belül.

További görgetés elem az összetevőhöz hibrid módban
További görgetőelem az összetevőhöz hibrid módban

Megoldás

Ennek a kellemetlenségnek a leküzdése érdekében átfedjük a JSP fájlt, amely tartalmazza az összes konfigurációs beállítást a párbeszédpanelek kompatibilitási módban történő megfelelő megjelenítéséhez. Ez a JSP fájl a következő helyre kerül a következő elérési út alatt:

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

Megváltoztatjuk az ablak szélességét és magasságát, hogy az eredeti legyen párbeszédpanel méreteit, valamint a böngésző ablakméretét.

Ezt a szkriptet kezeljük, amely valójában összekapcsolást biztosít a Touch UI (Coral) burkoló és az iframe-be beágyazott Classic párbeszédablak között. A „dialogwrapper-ready” + ns eseményre ehhez szükség van, előre kiszámított szélességgel és magassággal, mint a kezelő funkció paraméterei. Lehetséges saját újraszámítás, majd a szélesség és a magasság beállítása a Coral Dialog tartalmának:

Bizonyos összetevőket nem lehet szerkeszteni a TouchUI-ban (könnyen)

A szerzői tapasztalat az egyik legfontosabb szempont, amelyet figyelembe kell venni az AEM összetevőinek megvalósítása során. Képzeljen el egy körhinta komponenst, amely számos diát tartalmaz. Szerkesztés módban jobb, ha az összes körhinta diát oszlopként rendereli, így a szerző egyszerűen átrendezheti a diák sorrendjét, és egyidejűleg hozzáférhet mindegyikhez anélkül, hogy a diák között váltana. Egy fontos különbség van a ClassicUI és a TouchUI között:

  • A ClassicUI-ban a szerzői elemek (pl. A szerkesztősávok) a jelölés részét képezik, amelyet az összetevővel szerkesztési módban renderelnek.
  • A TouchUI alkalmazásban a szerzői elemek átfedésben jelennek meg. A végső komponens jelölése egy iframe-ben jelenik meg. Ezeknek a feltételeknek a kombinációja olyan helyzetbe sodorja a szerzőt, amikor a szerkesztés módban egyáltalán nem lehet interakcióba lépni az összetevővel (például kattintson a gombokra, lapozgassa a körhinta diáit).

Tehát olyan esetekkel kell szembenéznünk, amikor a könyvtárunk néhány összetevője némi interakciót igényel, mielőtt a felhasználó megkezdheti a szerkesztési folyamatot, de ez a TouchUI-ban nem érhető el könnyen.

Megoldások

Van azonban néhány javítás, amelyet lehetséges megoldásnak tekinthetünk:

  1. Van egy gyors és egyszerű megoldás, amely nem igényel fejlesztési erőfeszítéseket: az összes szerkeszthető összetevő megtalálható a Tartalomfában és mindegyik mellett található egy csavarkulcs ikon, amely megnyitja a szerkesztési párbeszédpanelt.
Oldal tartalmafa a TouchUI-ban felület
Az oldal tartalmafa a TouchUI felületen

2. A sok alkomponensű összetett komponensek esetében az összetevő jelölése Szerkesztés módban megváltoztatható, hogy az összes „rejtett” komponens terület nyitva álljon a Szerző szeme előtt. Ez azt jelentené, hogy minden látható és elérhető a Szerkesztés módban.

3. Bevált gyakorlatként az Adobe megoldást kínál egy ilyen szerzői élmény esetére az AEM alapkomponenseken belül.A körhinta-összetevő és a lapok-összetevő a komponensek eszköztárának Válassza ki a paneljét elemével helyezze át a diákat és nézetekkel módosíthatja az aktuálisan megtekintett elemet.

Készen kívüli megoldás a szerzői készítés elől rejtett tartalom eléréséhez
Készenléti megoldás a szerzői készítés elől rejtett tartalom elérésére

Az “Oldalak feloldása” gomb nem működik

Van egy szabványos AEM opció az oldal lezárására és feloldására a változtatásokhoz. A TouchUI migrációs megközelítés érvényesítése során olyan helyzetet találtunk, amikor a szerző nem tudta visszaállítani a „lezárt” oldal eredeti állapotát. Szerencsére ez a funkció megfelelően működik az AEM webhelykonzolon keresztül.

Lock opció a TouchUI felületen
Lock opció a TouchUI felületen

Hasonló problémát itt és itt .

Megoldás

A böngésző konzolon megjelenő hibaüzenet azt mondja, hogy „Nem olvasható undefined shared tulajdonság ”. A kiváltó ok a hiányzó cq.shared ügyfélkönyvtárban rejlik.

Hibaüzenet a „Zárolás / Feloldás” funkcionalitás kezelésekor
Hibaüzenet a „Zárolás / Feloldás” funkcionalitás kezelésekor

A cq.shared könyvtár beillesztése az oldal JSP-be megoldja a probléma és az „Oldalkezelés feloldása” gomb a várt módon működik.

Szerzők: Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

Eredetileg a https://exadel.com 2019. október 17-én.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük