Migrazione dellinterfaccia utente dalla modalità classica al tocco per AEM: altri suggerimenti da Esperienza

(Liubou Masiuk) (17 ottobre 2019)

Nel nostro precedente (post sulla migrazione da Classic a TouchUI) abbiamo descritto il nostro approccio globale “Hybrid Mode” alla migrazione di una libreria di componenti dellinterfaccia utente interamente Classic a Touch UI utilizzando Modalità di compatibilità di AEM. Nel post abbiamo accennato ad alcune “stranezze” che abbiamo riscontrato. In questo nuovo post, entreremo molto più in dettaglio su queste stranezze e su come affrontarle.

Sebbene la modalità ibrida sia estremamente utile, presenta alcune limitazioni che possono impedire al team di sviluppo di adottare TouchUI senza ulteriori sforzi su grandi progetti. Ecco alcuni dei problemi che abbiamo riscontrato e le soluzioni che il nostro team di sviluppo ha trovato.

Lautore non può trascinare & rilasciare immagini durante la modifica di un componente

La libreria di widget ClassicUI fornisce un componente SmartImage per il caricamento e lelaborazione delle immagini. Gli asset immagine per impostazione predefinita possono essere caricati in due modi diversi:

  • Dal file system
  • Dal DAM (Digital Asset Manager) trascinando limmagine dalla pagina di ricerca dei contenuti pannello sul lato sinistro
Pannello Risorse DAM (interfaccia TouchUI)
Pannello Risorse DAM (Interfaccia TouchUI)

Immergiamoci nei dettagli tecnici dellimplementazione TouchUI. La modalità di compatibilità esegue il rendering di una finestra di dialogo ClassicUI allinterno di un iframe. Per qualche motivo la modalità compatibile non ha alcuna logica per il monitoraggio del trascinamento & rilascia eventi fuori dalla scatola. Ciò impedisce agli autori di trascinare le immagini fuori dal pannello Risorse (poiché sono abituati a farlo allinterno dellesperienza ClassicUI). Ciò significa che non hanno un modo per posizionare limmagine nel componente. Inoltre, quando è richiesto un campo immagine, lautore non ha la possibilità di completare la configurazione del componente a causa di un campo obbligatorio vuoto.

Soluzione

Per risolvere questo problema abbiamo deciso di estendere il componente SmartImage standard per eseguire il rendering di un pathfield in aggiunta alle funzionalità esistenti. Di conseguenza, lautore ha la possibilità di selezionare unimmagine utilizzando il campo del percorso e limmagine appare allinterno dellarea SmartImage per visualizzare in anteprima e / o modificare limmagine se necessario. Per percorsi non esistenti (o percorsi non immagine) il campo è evidenziato come non valido.

Area immagine richiesta allinterno del componente
Area immagine richiesta allinterno del componente
  1. Registra nuovamente il htmlsamartimage xtype originale con uno personalizzato intrinseco che estende loriginale Widget CQ HtmlSmartImage. Allinizializzazione del nuovo widget, aggiungiamo un widget PathField aggiuntivo ai contenitori dei componenti. Inoltre, forniamo piccoli aggiornamenti al layout del widget predefinito che è un aggiornamento dellinterfaccia utente comune per le interfacce utente basate su ExtJS.
  2. Controlli di associazione (PathField) in tutti gli HTMLSmartImages. Prima di tutto, prepariamo gli helper creando metodi per ottenere e impostare valori da PathPicker e gli stessi metodi per il componente originale. La prima coppia è setValue e getValue del PathField, che è la parte facile. La parte difficile sta affrontando il valore del componente originale. HTMLSmartImage non memorizza il proprio valore in uno stato accessibile.

Per ottenere il percorso dellimmagine corrente è possibile farlo facilmente utilizzando il metodo this.fileReferenceField.getValue (). Ma per impostare il valore sul widget originale, dobbiamo emulare una goccia di risorse immagine sul componente. Possiamo gestirlo nel modo seguente:

Ora, quando abbiamo tutte le funzioni di accesso ai valori, dobbiamo sapere quando loriginale e il valore Pathfield cambiano. Per tenere traccia delle modifiche a Pathfield possiamo utilizzare un evento “sfocatura”. Per il widget originale levento “imagestate” è il più adatto. Dobbiamo tenere traccia di due tipi di modifiche allo stato dellimmagine: “originalremoved” e “originalavailable”, quindi lascoltatore può essere il seguente:

Ora è pronto per il binding. Per mantenere il meccanismo di convalida nella nuova implementazione, sovrascriviamo la logica di convalida originale per listanza del pathfield incorporata.

Tutte le finestre di dialogo dei campi di scaffolding sono disabilitate

AEM La modalità Scaffolding consente a un autore di creare facilmente pagine basate su una specifica struttura del modulo scaffold. Gli scaffold sono estremamente utili per creare contenuti strutturati ben definiti (ad es. Articoli, post di blog).

In modalità ibrida tutti i campi del modulo scaffolding sono disabilitati, il che significa che non possono essere modificati.

Esempio di modulo per ponteggi
Esempio di modulo per ponteggio

Soluzione

Linclusione della libreria cq.security nel JSP della pagina ha risolto il problema e i moduli di scaffolding hanno iniziato a funzionare correttamente.

La finestra di dialogo ibrida si chiude senza salvare i dati quando si fa clic su fuori dallarea di dialogo

Tutti i componenti vengono modificati allinterno della finestra di dialogo di configurazione dei componenti, che si apre in modalità di modifica.

Modifica di un componente in AEM (interfaccia TouchUI)
Modifica di un componente in AEM (interfaccia TouchUI)

Cè una piccola differenza nellesperienza utente nelle finestre di dialogo Ibrido e TouchUI:

  • Se un utente fa clic per uscire dalla finestra di dialogo TouchUI, non accade nulla.
  • Se un utente fa clic per uscire dallibrido finestra di dialogo, si chiude senza salvare i dati inseriti.

Ciò significa che tutti i dati non salvati sono g per perdersi in caso di clic accidentale allesterno del componente! Inutile dire che questo è abbastanza fastidioso per gli autori.

Soluzione

Fortunatamente la soluzione è piuttosto semplice. Inizialmente, lo sfondo della finestra di dialogo è in modalità “modale”. Per modificare la modalità di sfondo della finestra di dialogo, il file JSP della finestra di dialogo deve essere sovrapposto e la modalità di sfondo della finestra di dialogo deve essere impostata sul valore “statico”.

Alcuni campi di dialogo non si adattano allarea della finestra di dialogo

Come già descritto in precedenza, le finestre di dialogo dellinterfaccia utente vengono visualizzate in un iframe allinterno della finestra di dialogo TouchUI. Questa finestra di dialogo a volte non si adatta a tutto il contenuto dinamico, a volte causa un layout strano in cui vengono visualizzate barre di scorrimento aggiuntive allinterno della finestra di dialogo.

Scorrimento aggiuntivo elemento per il componente in modalità ibrida
Elemento di scorrimento aggiuntivo per il componente in modalità ibrida

Soluzione

Per ovviare a questo inconveniente, sovrapponiamo il file JSP che contiene tutte le impostazioni di configurazione per il rendering corretto delle finestre di dialogo in modalità compatibilità. Questo file JSP è inserito nel seguente sotto il seguente percorso:

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

Modifichiamo la larghezza e laltezza della finestra per considerare loriginale dimensioni della finestra di dialogo, così come la dimensione della finestra del browser.

Gestiamo questa situazione tramite uno script che fornisce effettivamente il collegamento tra il wrapper Touch UI (Coral) e la finestra di dialogo classica incorporata nelliframe. Levento “dialogwrapper-ready” + ns è necessario per quello con larghezza e altezza precalcolate come parametri della funzione gestore. È anche possibile eseguire il proprio ricalcolo e quindi impostare la larghezza e laltezza sul contenuto della finestra di dialogo Coral:

Alcuni componenti non possono essere modificati in TouchUI (facilmente)

Lesperienza di creazione è uno dei punti più importanti da considerare durante limplementazione dei componenti in AEM. Immagina un componente carosello che contiene un numero di diapositive. In modalità Modifica, è meglio eseguire il rendering di tutte le diapositive del carosello come una colonna in modo che lautore possa facilmente riorganizzare lordine delle diapositive e accedervi simultaneamente senza passare da una diapositiva allaltra. Cè unimportante differenza tra ClassicUI e TouchUI:

  • In ClassicUI gli elementi di creazione (ad esempio, le barre di modifica) sono una parte del markup che viene renderizzato con il componente in modalità Modifica.
  • In TouchUI gli elementi di creazione vengono visualizzati in una sovrapposizione. Il markup del componente finale viene visualizzato in un iframe. La combinazione di queste condizioni porta un autore alla situazione in cui non è affatto possibile interagire con il componente in modalità Modifica (ad esempio, fare clic sui pulsanti, sfogliare le diapositive di un carosello).

Quindi affrontiamo casi in cui un paio di componenti nella nostra libreria richiedono una certa interazione prima che lutente possa avviare il processo di modifica, ma ciò non può essere facilmente ottenuto in TouchUI.

Soluzioni

Tuttavia, ci sono un paio di correzioni che potrebbero essere considerate come possibili soluzioni:

  1. Esiste una soluzione rapida e semplice che non richiede sforzi di sviluppo: tutti i componenti modificabili possono essere trovati nella struttura dei contenuti e è presente unicona a forma di chiave inglese accanto a ciascuna di esse che apre la finestra di dialogo di modifica.
Albero dei contenuti della pagina in TouchUI interface
Albero dei contenuti della pagina nellinterfaccia TouchUI

2. Per i componenti complessi con molti sottocomponenti, il markup del componente in modalità Modifica può essere modificato per rendere tutte le aree dei componenti “nascoste” aperte agli “occhi” dellautore. Ciò significherebbe che tutto è visibile e accessibile tramite la modalità Modifica.

3. Come best practice, Adobe fornisce una soluzione per supportare questo tipo di esperienza di creazione allinterno di AEM Core Components . Componente Carousel e Componente Tabs utilizzano lopzione Seleziona pannello nella barra degli strumenti del componente per riordinare le diapositive e visualizza e modifica lelemento attualmente visualizzato in anteprima.

Soluzione immediata per raggiungere contenuti nascosti alla creazione
Soluzione pronta alluso per raggiungere contenuti nascosti alla creazione

Il pulsante “Sblocca pagina” non funziona

Esiste unopzione AEM standard per bloccare e sbloccare la pagina per le modifiche. Durante la convalida dellapproccio alla migrazione TouchUI, abbiamo riscontrato una situazione in cui lautore non poteva riportare una pagina “bloccata” al suo stato iniziale. Fortunatamente questa funzionalità funziona correttamente tramite la console del sito AEM.

Opzione
” Opzione Lock “nellinterfaccia TouchUI

Un problema simile è descritto qui e qui .

Soluzione

Il messaggio di errore nella console del browser dice che “Impossibile leggere la proprietà condivisa di undefined “. La causa principale risiede in una libreria client mancante “cq.shared”.

Messaggio di errore durante la gestione della funzionalità
Messaggio di errore durante la gestione della funzionalità “Blocco / Sblocco”

Linclusione della libreria “cq.shared” nel JSP della pagina risolve il problema e il pulsante “Sblocca pagina” inizia a funzionare come previsto.

Autori: Volha Lunkova , Liubou Masiuk, Aliaksei Stsefanovich

Originariamente pubblicato su https://exadel.com il 17 ottobre 2019.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *