Migrazione all’interfaccia utente touch

A partire dalla versione 6.0, Adobe Experience Manager (AEM) ha introdotto una nuova interfaccia utente denominata interfaccia touch (noto anche semplicemente come interfaccia touch). È allineato al Adobe Experience Cloud e alle linee guida generali dell’interfaccia utente di Adobe. Questa è diventata l’interfaccia utente standard in AEM con l’interfaccia legacy orientata al desktop denominata interfaccia classica.

Se utilizzi l’AEM con l’interfaccia classica, adotta un’azione per migrare l’istanza. Questa pagina ha lo scopo di fungere da trampolino di lancio fornendo collegamenti a singole risorse.

NOTA

Tale progetto di migrazione può avere un impatto significativo sulla tua istanza. Consulta Gestione dei progetti - Procedure consigliate per le linee guida consigliate.

Nozioni di base

Durante la migrazione, tieni presente le seguenti differenze principali tra l’interfaccia utente classica e l’interfaccia touch:

Interfaccia classica Interfaccia touch
È descritto nell’archivio JCR come struttura di nodi. Ogni nodo che rappresenta un elemento dell’interfaccia utente è denominato Widget ExtJS ed eseguito sul lato client da ExtJS. Descritto anche nell’archivio JCR come struttura di nodi. Tuttavia, in questo caso, ogni nodo fa riferimento a un tipo di risorsa Sling (componente Sling), che è responsabile del rendering. L’interfaccia utente viene quindi sottoposta a rendering lato server.

sling:resourceType

  • non utilizzato
 sling:resourceType
  • utilizzato
  • ad esempio
    cq/gui/components/authoring/dialog

Nodi finestra di dialogo:

  • Nome: dialog
  • jcr:primaryType: cq:Dialog

Nodi finestra di dialogo:

  • Nome: cq:dialog
  • jcr:primaryType: nt:unstructured

Percorso JavaScript:

  • Le parti imperative sono direttamente incorporate utilizzando listener o gestite in clientlibs.

Percorso JavaScript:

  • Le parti imperative non possono essere incorporate nella definizione del dialogo; separazione delle responsabilità.

Gestione degli eventi:

  • I widget per finestre di dialogo fanno riferimento direttamente al codice JavaScript.

Gestione degli eventi:

  • JavaScript osserva gli eventi di dialogo.
Rendering eseguito dal client:
  • Il client crea in modo dinamico i componenti dell’interfaccia utente.
  • Richieste client (pull) definizione componente (come JSON) dal server.
 Rendering eseguito dal server:
  • Il client richiede le pagine insieme alla relativa interfaccia utente.
  • Il server invia (invia) l’interfaccia utente come documenti HTML, utilizzando i componenti dell’interfaccia utente Coral.

In altre parole, la migrazione di una sezione dell’interfaccia utente dall’interfaccia classica all’interfaccia touch comporta la portabilità di un Widget ExtJS a un Componente Sling. Per semplificare questa operazione, l’interfaccia utente touch si basa sul framework dell’interfaccia utente Granite, che fornisce già alcuni componenti Sling per l’interfaccia utente (denominati componenti dell’interfaccia utente Granite).

Prima di iniziare, controlla lo stato e i consigli correlati:

Le nozioni di base sullo sviluppo dell’interfaccia utente touch forniscono una solida base:

Migrazione in corso dell’authoring delle pagine

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

Migrazione delle console

Puoi anche personalizzare le console:

Sebbene non siano direttamente correlate a una migrazione all’interfaccia utente touch, è consigliabile considerare alcuni problemi correlati allo stesso tempo, in quanto sono anche una pratica consigliata:

NOTA

Ulteriori risorse

Per informazioni complete sullo sviluppo dell’AEM, consulta la raccolta di risorse sotto:

ATTENZIONE

Gli strumenti di modernizzazione dell’AEM sono un’iniziativa della comunità e non sono supportati o giustificati dall’Adobe.

In questa pagina