Show Menu
ARGOMENTI×

Migration to the Touch UI

A partire dalla versione 6.0, Adobe Experience Manager (AEM) ha introdotto una nuova interfaccia utente denominata interfaccia ** touch (detta anche interfaccia touch ). È allineata ad Adobe Marketing Cloud e alle linee guida generali dell'interfaccia utente di Adobe. Questa è diventata l’interfaccia standard di AEM con l’interfaccia precedente, orientata al desktop, detta interfaccia classica .
Se utilizzi AEM con l’interfaccia classica, devi agire per migrare l’istanza. Questa pagina è destinata a fungere da trampolino di lancio, fornendo collegamenti alle singole risorse.
Tale progetto di migrazione potrebbe avere un impatto significativo sull’istanza. Consultate Gestione dei progetti - Best practice per le linee guida consigliate.

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 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 è (sostanzialmente) rappresentata lato server.
sling:resourceType
  • non utilizzato
sling:resourceType
  • utilizzato
  • for example 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 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:

Migrazione delle console

Potete inoltre personalizzare le console:

Ulteriori risorse

Per informazioni complete sullo sviluppo di AEM, consulta la raccolta di risorse in:
Gli strumenti di modernizzazione di AEM sono uno sforzo della community e non sono supportati o giustificati da Adobe.