L’interfaccia AEM touch presenta diversi principi di base ed è composta da diversi elementi chiave:
L'interfaccia utente è destinata sia ai dispositivi mobili che a 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, AEM può essere visto come:
Il layout aderisce a uno stile di progettazione reattivo e si adatta alle dimensioni del dispositivo/finestra in uso.
Ad esempio, quando la risoluzione è inferiore a 1024 px (come su un dispositivo mobile), il display viene regolato di conseguenza:
La barra di intestazione mostra gli elementi globali, tra cui:
Questo è contestuale agli strumenti relativi alla posizione e alle superfici per controllare la visualizzazione o le risorse nella pagina sottostante. La barra degli strumenti è specifica per il prodotto, ma gli elementi sono comuni.
In qualsiasi punto della barra degli strumenti sono visualizzate le azioni attualmente disponibili:
Dipende anche dalla selezione di una risorsa:
La barra a sinistra può essere aperta o nascosta come richiesto per mostrare:
Il valore predefinito è Solo contenuto (barra nascosta).
Durante l’authoring delle pagine, le aree strutturali sono le seguenti:
Il contenuto della pagina viene rappresentato nella cornice contenuto. La cornice contenuto è completamente indipendente dall'editor, per garantire che non vi siano conflitti dovuti a CSS o javascript.
La cornice contenuto si trova nella sezione destra della finestra, sotto la barra degli strumenti.
La cornice dell’editor realizza le funzioni di modifica.
La cornice dell'editor è un contenitore (astratto) per tutti gli elementi di authoring delle pagine. Vive sopra la cornice contenuto e include:
Contiene due schede predefinite che consentono di selezionare risorse e componenti; possono essere trascinate da qui e rilasciate sulla pagina.
Per impostazione predefinita, il pannello laterale è nascosto. Se selezionata, la finestra verrà visualizzata a sinistra oppure scorrerà per coprire l’intera finestra (quando la dimensione della finestra è inferiore a 1024 px; ad esempio su un dispositivo mobile).
Nella scheda Risorse puoi selezionare una delle risorse disponibili. Potete anche filtrare un termine specifico o selezionare un gruppo.
Nella scheda Risorsa è disponibile un elenco a discesa che potete usare per selezionare i gruppi di risorse specifici.
Nella scheda Componenti è possibile selezionare uno dei componenti disponibili. Potete anche filtrare un termine specifico o selezionare un gruppo.
Questi elementi sovrappongono la cornice contenuto e vengono utilizzati dai livelli per comprendere quali sono le modalità di interazione (completamente trasparente) con i componenti e il relativo contenuto.
Le sovrapposizioni sono presenti nella cornice dell’editor (con tutti gli altri elementi di authoring delle pagine), ma in realtà sovrappongono i componenti appropriati nella cornice contenuto.
Un livello è un pacchetto indipendente di funzionalità che può essere attivato per:
I livelli forniscono funzionalità sofisticate per l’intera pagina, anziché azioni specifiche su un singolo componente.
AEM sono disponibili diversi livelli già implementati per l’authoring delle pagine; ad esempio, modifica, anteprima, annotazione.
I livelli sono un concetto potente che influisce sulla visualizzazione e l'interazione dell'utente con il contenuto della pagina. Quando sviluppate i vostri livelli, dovete assicurarvi che il livello si pulisca quando viene estratto.
Lo switcher di livello consente di scegliere il livello da usare. Una volta chiuso, indica il livello attualmente in uso.
Lo switcher di livello è disponibile come elenco a discesa dalla barra degli strumenti (nella parte superiore della finestra, all’interno della cornice dell’editor).
Ogni istanza di un componente visualizzerà la propria barra degli strumenti quando viene fatto clic (una volta o con un doppio clic lento). La barra degli strumenti contiene le azioni specifiche (ad es. copia, incolla, editor aperto) disponibili per l’istanza del componente (modificabile) sulla pagina.
A seconda dello spazio disponibile, le barre degli strumenti dei componenti sono posizionate nell’angolo superiore o inferiore destro del componente appropriato.
Per ulteriori dettagli sui concetti relativi all'interfaccia touch, continuate con l'articolo Concetti dell'interfaccia AEM touch.
Per ulteriori informazioni tecniche, consultate la sezione Documentazione JS set per l'editor pagina touch.