Struttura dell’interfaccia utente touch di Adobe Experience Manager structure-of-the-aem-touch-enabled-ui
L’interfaccia utente touch di Adobe Experience Manager (AEM) ha diversi principi di base ed è costituita da diversi elementi chiave:
Console consoles
Layout e ridimensionamento di base basic-layout-and-resizing
L’interfaccia utente è adatta sia per i dispositivi mobili che per quelli desktop, ma invece di creare due stili, Adobe ha deciso di utilizzare uno stile che funziona per tutti gli schermi e i dispositivi.
Tutti i moduli utilizzano lo stesso layout di base, che nell’AEM può essere visto come:
Il layout rispetta uno stile di progettazione reattivo e si adatta alle dimensioni del dispositivo o della finestra in uso.
Ad esempio, quando la risoluzione scende al di sotto di 1024 px (come su un dispositivo mobile), il display viene regolato di conseguenza:
Barra intestazione header-bar
La barra dell’intestazione mostra gli elementi globali, tra cui:
- il logo e lo specifico prodotto/soluzione attualmente in uso; per l’AEM questo costituisce anche un collegamento alla navigazione globale
- Ricerca
- icona per accedere alle risorse della guida
- icona per accedere ad altre soluzioni
- un indicatore (e l'accesso a) di tutti gli avvisi o elementi della casella in entrata che ti aspettano
- l’icona utente, insieme a un collegamento per la gestione del profilo
Barra degli strumenti toolbar
Ciò è contestuale alla posizione e rende visibili gli strumenti rilevanti per il controllo della vista o delle risorse nella pagina seguente. La barra degli strumenti è specifica per il prodotto, ma presenta alcune caratteristiche in comune con gli elementi.
In qualsiasi posizione, la barra degli strumenti mostra le azioni attualmente disponibili:
Dipende anche dalla selezione di una risorsa:
Barra a sinistra left-rail
La barra a sinistra può essere aperta/nascosta come richiesto per mostrare:
- Timeline
- Riferimenti
- Filtro
Il valore predefinito è Solo contenuto (barra nascosta).
Authoring delle pagine page-authoring
Quando si creano le pagine, le aree strutturali sono le seguenti.
Frame del contenuto content-frame
Il rendering del contenuto della pagina viene eseguito nel frame del contenuto. Il frame del contenuto è indipendente dall’editor, per garantire che non vi siano conflitti dovuti a CSS o JavaScript.
La cornice di contenuto si trova nella sezione destra della finestra, sotto la barra degli strumenti.
Frame dell'editor editor-frame
Il frame dell'editor consente di realizzare le funzioni di editing.
Il frame dell'editor è un contenitore (astratto) per tutti i elementi di creazione pagine. Si trova sopra la cornice del contenuto e include:
- barra degli strumenti superiore
- pannello laterale
- tutte le sovrapposizioni
- qualsiasi altro elemento di creazione pagina, ad esempio la barra degli strumenti del componente
Pannello laterale side-panel
Contiene due schede predefinite che consentono di selezionare risorse e componenti. Possono essere trascinati da qui e inseriti nella pagina.
Il pannello laterale è nascosto per impostazione predefinita. Se questa opzione è selezionata, verrà visualizzata sul lato sinistro o scorrerà per coprire l'intera finestra (quando la dimensione della finestra è inferiore a una larghezza di 1024 px, come ad esempio su un dispositivo mobile).
Pannello laterale - Assets side-panel-assets
Nella scheda Assets puoi selezionare una delle risorse disponibili. Puoi anche filtrare in base a un termine specifico o selezionare un gruppo.
Pannello laterale - Gruppi di risorse side-panel-asset-groups
Nella scheda Risorsa è disponibile un elenco a discesa che puoi utilizzare per selezionare i gruppi di risorse specifici.
Pannello laterale - Componenti side-panel-components
Nella scheda Componenti puoi selezionare uno dei componenti disponibili. Puoi anche filtrare in base a un termine specifico o selezionare un gruppo.
Sovrapposizioni overlays
Questi si sovrappongono al frame del contenuto e vengono utilizzati dai livelli per realizzare i meccanismi con cui puoi interagire (in modo trasparente) con i componenti e i relativi contenuti.
Le sovrapposizioni sono live nel frame dell’editor (con tutti gli altri elementi di authoring della pagina), anche se in realtà sovrappongono i componenti appropriati nel frame del contenuto.
Layer layer
Un livello è un bundle indipendente di funzionalità che può essere attivato per:
- fornisce una visualizzazione diversa della pagina
- consente di manipolare e/o interagire con una pagina
I livelli forniscono funzionalità avanzate per l’intera pagina, anziché azioni specifiche per un singolo componente.
L’AEM viene fornito con diversi livelli già implementati per l’authoring delle pagine, tra cui, ad esempio, modifica, anteprima e annota.
Switcher livello layer-switcher
Il selettore livello consente di scegliere il livello da utilizzare. Quando è chiuso, indica il livello attualmente in uso.
Il selettore livelli è disponibile come elenco a discesa dalla barra degli strumenti (nella parte superiore della finestra, all’interno del frame dell’editor).
Barra degli strumenti del componente component-toolbar
Ogni istanza di un componente mostra la propria barra degli strumenti quando viene selezionata (una volta o con un doppio clic lento). La barra degli strumenti contiene le azioni specifiche (ad esempio, copia, incolla, open-editor) disponibili per l’istanza del componente (Modificabile) nella pagina.
A seconda dello spazio disponibile, le barre degli strumenti del componente sono posizionate nell’angolo superiore o inferiore destro del componente appropriato.
Ulteriori informazioni further-information
Per ulteriori dettagli sui concetti relativi all'interfaccia utente touch, leggere Concetti dell'interfaccia utente touch AEM.
Per ulteriori informazioni tecniche, consulta Set di documentazione JS per l'editor di pagine touch.