Struttura dell'AEM interfaccia touch

L’interfaccia AEM touch presenta diversi principi di base ed è composta da diversi elementi chiave:

Console

Layout di base e ridimensionamento

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:

Barra intestazione

La barra di intestazione mostra gli elementi globali, tra cui:

• il logo e lo specifico prodotto/soluzione che state utilizzando; per AEM questo collegamento viene creato anche un collegamento alla navigazione globale
• Ricerca
• icona per accedere alle risorse della guida
• icona per accedere ad altre soluzioni
• un indicatore di (e l'accesso a) eventuali avvisi o elementi in entrata in attesa
• l'icona utente, insieme a un collegamento alla gestione del profilo

Barra degli strumenti

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:

Barra a sinistra

La barra a sinistra può essere aperta o nascosta come richiesto per mostrare:

• Timeline
• Riferimenti
• Filtro

Il valore predefinito è Solo contenuto (barra nascosta).

Authoring delle pagine

Durante l’authoring delle pagine, le aree strutturali sono le seguenti:

Cornice contenuto

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.

Fotogramma editor

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:

• barra degli strumenti superiore
• il pannello laterale
• tutte le sovrapposizioni
• qualsiasi altro elemento di authoring delle pagine; ad esempio, la barra degli strumenti del componente

Pannello laterale

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).

Pannello laterale - Risorse

Nella scheda Risorse puoi selezionare una delle risorse disponibili. Potete anche filtrare un termine specifico o selezionare un gruppo.

Pannello laterale - Gruppi di risorse

Nella scheda Risorsa è disponibile un elenco a discesa che potete usare per selezionare i gruppi di risorse specifici.

Pannello laterale - Componenti

Nella scheda Componenti è possibile selezionare uno dei componenti disponibili. Potete anche filtrare un termine specifico o selezionare un gruppo.

Sovrapposizioni

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.

Livello

Un livello è un pacchetto indipendente di funzionalità che può essere attivato per:

• fornire una visualizzazione diversa della pagina
• consente di manipolare e/o interagire con una pagina

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.

Commutatore livello

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).

Barra degli strumenti del componente

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.

Ulteriori informazioni

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.