Migrace Classic to Touch UI pro AEM: Další tipy od Zkušenosti

(Liubou Masiuk) (17. října 2019)

V našem předchozím (příspěvek o migraci z Classic na TouchUI) jsme popsali náš celkový „hybridní režim“ přístupu k migraci zcela klasické knihovny komponent uživatelského rozhraní do dotykového uživatelského rozhraní pomocí Režim kompatibility AEM. V příspěvku jsme se zmiňovali o některých „vtipech“, se kterými jsme se setkali. V tomto novém příspěvku pojednáme mnohem podrobněji o těchto zvláštnostech a o tom, jak se s některými z těchto zvláštností vypořádat.

Ačkoli je hybridní režim mimořádně užitečný, má určitá omezení, která mohou vývojovému týmu bránit v přijetí TouchUI bez dalšího úsilí u velkých projektů. Zde jsou některé z problémů, se kterými jsme se setkali, a řešení, s nimiž náš vývojový tým přišel.

Autor nemůže během úpravy komponenty přetahovat & přetahovat obrázky

ClassicUI knihovna widgetů poskytuje komponentu SmartImage pro nahrávání a zpracování obrázků. Implicitní obrázky lze ve výchozím nastavení nahrát dvěma různými způsoby:

  • Ze systému souborů
  • Z DAM (Digital Asset Manager) přetažením obrázku z vyhledávače obsahu stránky panel na levé straně
panel DAM Assets (rozhraní TouchUI)
panel DAM Assets (Rozhraní TouchUI)

Pojďme se ponořit hlouběji do technických detailů implementace TouchUI. Režim kompatibility vykreslí dialogové okno ClassicUI uvnitř prvku iframe. Kompatibilní režim z nějakého důvodu nemá žádnou logiku pro sledování událostí přetažení & ihned po vybalení. To omezuje autory v přetahování obrázků z panelu Aktiva (jak jsou zvyklí dělat to v prostředí ClassicUI). To znamená, že nemají způsob, jak umístit obrázek do komponenty. Pokud je navíc požadováno pole obrázku, autor nemá možnost dokončit konfiguraci komponenty kvůli prázdnému požadovanému poli.

Řešení

Abychom tento problém vyřešili, rozhodli jsme se rozšířit komponentu Standard SmartImage o vykreslení pole cesty kromě stávajících funkcí. Výsledkem je, že autor získá možnost vybrat obrázek pomocí pathfieldu a obrázek se objeví v oblasti SmartImage, aby v případě potřeby zobrazil náhled a / nebo změnil obrázek. U neexistujících cest (nebo cest bez obrázků) je pole zvýrazněno jako neplatné.

Povinná oblast obrázku uvnitř komponenty
Povinná oblast obrázku uvnitř komponenty
  1. Znovu zaregistrujte původní htmlsamartimage xtype s vlastní vlastní, která rozšiřuje původní Widget CQ HtmlSmartImage. Při inicializaci nového widgetu přidáme do kontejnerů komponent další widget PathField. Kromě toho poskytujeme malé aktualizace výchozího rozložení widgetu, které je běžnou aktualizací uživatelského rozhraní pro uživatelská rozhraní založená na ExtJS.
  2. Vazební ovládací prvky (PathFields) ve všech HTMLSmartImages. Nejprve připravíme pomocníky vytvořením metod pro získání a nastavení hodnot z PathPicker a stejných metod pro původní komponentu. První pár je setValue a getValue z PathField, což je snadná část. Složitá část pojednává o původní hodnotě komponenty. HTMLSmartImage neukládá svou hodnotu v přístupném stavu.

Chcete-li získat aktuální cestu k obrázku, lze to snadno provést pomocí metody this.fileReferenceField.getValue (). Abychom ale nastavili hodnotu na původní widget, musíme napodobit pokles zdroje obrázku na komponentě. Můžeme to spravovat následujícím způsobem:

Teď, když máme všechny přístupové hodnoty, musíme vědět, kdy se mění originál a kdy se hodnota Pathfield mění. Ke sledování změn Pathfield můžeme použít událost „rozmazání“. Pro původní widget je nejvhodnější událost „imagestate“. Musíme sledovat dva typy změn stavu obrázku: originalremoved a originalavailable, takže posluchač může být následující:

Nyní je připraven k vazbě. Abychom zachovali mechanismus ověřování v nové implementaci, přepíšeme původní logiku ověření pro instanci vloženého pole cesty.

Dialogy všech polí lešení jsou deaktivována

AEM Režim lešení umožňuje autorovi snadno vytvářet stránky na základě konkrétní struktury formuláře lešení. Lešení jsou mimořádně užitečná pro vytváření přesně definovaného strukturovaného obsahu (např. Článků, příspěvků na blogu).

V hybridním režimu jsou všechna pole formuláře lešení deaktivována, což znamená, že je nelze upravovat.

Příklad formuláře lešení
Příklad formuláře lešení

Řešení

Zahrnutí knihovny cq.security do JSP stránky problém vyřešilo a formuláře lešení začaly správně fungovat.

Hybridní dialog se zavře bez uložení dat po kliknutí mimo oblast dialogu

Všechny komponenty se upravují v dialogovém okně konfigurace komponent, které se zobrazí v režimu úprav.

Úpravy komponenty v AEM (rozhraní TouchUI)
Úpravy komponenty v AEM (rozhraní TouchUI)

Existuje malý rozdíl v uživatelském prostředí v hybridních a TouchUI dialozích:

  • Pokud uživatel klikne od dialogového okna TouchUI, nic se nestane.
  • Pokud uživatel klikne mimo hybridní dialog se zavře bez uložení zadaných dat.

To znamená, že všechna neuložená data jsou g Ztráta v případě náhodného kliknutí mimo součást! Není nutné říkat, že je to pro autory docela nepříjemné.

Řešení

Naštěstí je řešení docela jednoduché. Zpočátku je pozadí dialogového okna v „modálním“ režimu. Chcete-li změnit režim pozadí dialogového okna, je třeba soubor JSP dialogového okna překrýt a režim pozadí dialogového okna nastavit na „statickou“ hodnotu.

Některá pole dialogového okna se do oblasti dialogového okna nevejdou

Jak jsme již popsali dříve, dialogy uživatelského rozhraní se vykreslují v prvku iframe uvnitř dialogového okna TouchUI. Toto dialogové okno se někdy nevejde na veškerý dynamický obsah, což někdy způsobí podivné rozvržení, kde se uvnitř dialogu objeví další posuvníky.

Další posouvání prvek pro komponentu v hybridním režimu
Další posuvný prvek pro komponentu v hybridním režimu

Řešení

Abychom tuto nepříjemnost překonali, překryjeme soubor JSP, který obsahuje všechna nastavení konfigurace pro správné vykreslení dialogů v režimu kompatibility. Tento soubor JSP je umístěn pod následující cestou pod následující cestou:

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

Změníme šířku a výšku okna, abychom zohlednili původní rozměry dialogu, stejně jako velikost okna prohlížeče.

Tuto situaci řešíme pomocí skriptu, který ve skutečnosti poskytuje vazbu mezi obalem Touch UI (Coral) a vloženým klasickým dialogem v iframe. Událost „dialogwrapper-ready“ + ns je k tomu zapotřebí s předem vypočítanou šířkou a výškou jako parametry funkce obslužné rutiny. Je také možné provést vlastní přepočet a poté nastavit šířku a výšku na obsah Coral Dialog:

Některé komponenty nelze v TouchUI (snadno) upravovat

Autorská zkušenost je jedním z nejdůležitějších bodů, které je třeba při implementaci komponent v AEM vzít v úvahu. Představte si komponentu karuselu, která obsahuje řadu snímků. V režimu úprav je lepší vykreslit všechny snímky karuselu jako sloupec, aby autor mohl snadno přeskupit pořadí snímků a přistupovat ke všem současně bez přepínání mezi snímky. Mezi ClassicUI a TouchUI je jeden důležitý rozdíl:

  • V ClassicUI jsou redakční prvky (např. Editační lišty) součástí značky, která je vykreslena komponentou v režimu úprav.
  • V TouchUI se redakční prvky vykreslují v překrytí. Konečné označení komponenty je vykresleno v prvku iframe. Kombinace těchto podmínek vede autora k situaci, kdy není možné s komponentou v režimu úprav vůbec komunikovat (např. Klikat na tlačítka, listovat snímky karuselu).

Takže čelíme případům, kdy několik komponent v naší knihovně vyžaduje určitou interakci, než může uživatel zahájit proces úprav, ale v TouchUI toho nelze snadno dosáhnout.

Řešení

Existuje však několik oprav, které lze považovat za možná řešení:

  1. Existuje rychlé a jednoduché řešení, které nevyžaduje žádné úsilí vývojáře: všechny upravitelné komponenty najdete ve stromu obsahu a vedle každé z nich je ikona klíče, která otevírá dialog pro úpravy.
Strom obsahu stránky v TouchUI interface
Strom obsahu stránky v rozhraní TouchUI

2. U složitých komponent se spoustou dílčích komponent lze označení komponenty v režimu úprav změnit tak, aby byly všechny „skryté“ oblasti komponent otevřeny „očima“ autora. To by znamenalo, že vše je viditelné a přístupné v režimu úprav.

3. Osvědčeným postupem je, že Adobe poskytuje řešení na podporu takového případu zkušeností s vytvářením obsahu uvnitř AEM Core Components . Carousel Component a Component Tabs použijte k výběru pořadí snímků na panelu nástrojů komponenty možnost Select Panel a zobrazit a změnit aktuálně zobrazený prvek.

Out-of-the-box řešení pro dosažení obsahu skrytého při vytváření
Out-of-the-box řešení pro dosažení obsahu skrytého při vytváření

Tlačítko „odemknout stránku“ nefunguje

Je možné použít standardní možnost AEM zamknout a odemknout stránku a provést změny. Při ověřování přístupu migrace TouchUI jsme zjistili situaci, kdy autor nemohl vrátit „uzamčenou“ stránku do původního stavu. Naštěstí tato funkce prostřednictvím konzoly AEM Site Console funguje správně.

Možnost „Zamknout“ v rozhraní TouchUI
Možnost Zamknout v rozhraní TouchUI

Podobný problém je popsán zde a zde .

Řešení

Chybová zpráva v konzole prohlížeče říká, že „Nelze přečíst vlastnost„ sdílená “z nedefinované “. Hlavní příčina spočívá v chybějící klientské knihovně cq.shared.

Chybová zpráva při práci s funkcí Zamykání / odemykání
Chybová zpráva při práci s funkcí „Zamykání / odemykání“

Zahrnutí knihovny cq.shared do řešení JSP stránky problém a tlačítko „Odemknout stránku“ začne fungovat podle očekávání.

Autoři: Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

Původně publikováno v https://exadel.com 17. října 2019.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *