Migrazione all'interfaccia utente touch

A partire dalla versione 6.0, Adobe Experience Manager (AEM) ha introdotto una nuova interfaccia utente denominata interfaccia touch (detta anche semplicemente interfaccia touch). È allineata all'Adobe Marketing Cloud e alle linee guida generali 'interfaccia utente del Adobe. Questa è diventata l'interfaccia standard in AEM con l'interfaccia precedente orientata al desktop, denominata interfaccia classica.

Se avete già usato AEM con l’interfaccia classica, dovrete agire per migrare l’istanza. Questa pagina è destinata a fungere da trampolino di lancio, fornendo collegamenti alle singole risorse.

NOTA

Tale progetto di migrazione potrebbe avere un impatto significativo sull’istanza. Per le linee guida consigliate, vedere Gestione dei progetti - Best practice.

Nozioni di base

Durante la migrazione, è importante tenere presente le seguenti (principali) differenze tra l’interfaccia classica e quella touch:

Interfaccia classica	Interfaccia utente touch
Viene descritta nell'archivio JCR come una struttura di nodi. Ogni nodo che rappresenta un elemento dell'interfaccia utente è denominato widget ExtJS ed è rappresentato sul lato client da `ExtJS`.	Anche descritto nell'archivio JCR come una struttura di nodi. Tuttavia, in questo caso ogni nodo fa riferimento a un tipo di risorsa Sling (componente Sling), responsabile del rendering. Quindi l'interfaccia utente è (in pratica) rappresentata lato server.
`sling:resourceType` non utilizzato	`sling:resourceType` utilizzato ad esempio `cq/gui/components/authoring/dialog`
Nodi di dialogo: Nome: `dialog` jcr:primaryType: `cq:Dialog`	Nodi di dialogo: Nome: `cq:dialog` jcr:PrimaryType: `nt:unstructured`
Posizione JavaScript: Le parti imperative vengono incorporate direttamente utilizzando listener o gestite in clientlibs.	Posizione JavaScript: Non è possibile incorporare parti immateriali nella definizione del dialogo; separazione delle responsabilità.
Gestione degli eventi: I widget delle finestre di dialogo fanno direttamente riferimento al codice JavaScript.	Gestione degli eventi: Javascript osserva gli eventi di dialogo.
Rendering eseguito dal client: Client crea in modo dinamico i componenti dell'interfaccia utente. Definizione di componente (come JSON) richieste dal client dal server.	Rendering eseguito dal server: Il client richiede le pagine insieme all'interfaccia utente correlata. Il server invia (push) l’interfaccia utente come documenti HTML; utilizzo dei componenti dell'interfaccia utente Coral.

In altre parole, migrare una sezione dell'interfaccia utente dall'interfaccia classica all'interfaccia touch significa portare un widget ExtJS su un componente Sling. Per facilitare questa fase, l’interfaccia utente touch si basa sulla cornice dell’interfaccia Granite, che include già alcuni componenti Sling per l’interfaccia (chiamati componenti dell’interfaccia Granite).

Prima di iniziare, controllate lo stato e le raccomandazioni correlate:

Le basi dello sviluppo dell’interfaccia touch forniranno una solida base:

Migrazione dell'authoring delle pagine

Le finestre di dialogo sono un fattore importante per la migrazione dei componenti:

Sviluppo di componenti AEM (con l’interfaccia touch)
Migrazione da un componente classico
Strumento di conversione delle finestre di dialogo per convertire le finestre di dialogo dei componenti dell’interfaccia classica in interfaccia touch
- Nell’interfaccia touch è disponibile un livello di compatibilità per aprire una finestra di dialogo dell’interfaccia classica all’interno di un wrapper dell’interfaccia touch, ma questo dispone di funzionalità limitate e non è consigliato a lungo termine.
Personalizzazione dei campi di dialogo nell’interfaccia utente touch
Creazione di un nuovo componente Campo interfaccia Granite
Personalizzazione dell’authoring di pagina (con l’interfaccia touch)

Migrazione delle console

Potete inoltre personalizzare le console:

Personalizzazione delle console (per l’interfaccia touch)

Sebbene non siano direttamente correlati a una migrazione all’interfaccia utente touch, è consigliabile tenere presenti anche alcuni problemi correlati:

NOTA

Vedere anche Sviluppo - Best Practices.