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:

Migrazione delle console

Potete inoltre personalizzare le console:

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

NOTA

Ulteriori risorse

Per informazioni complete sullo sviluppo AEM vedere la raccolta di risorse in:

ATTENZIONE

AEM Strumenti di modernizzazione sono uno sforzo comunitario e non sono supportati o giustificati da Adobe.

In questa pagina