Struttura dell’interfaccia AEM 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:

chlimage_1-142

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:

chlimage_1-143

Barra intestazione

chlimage_1-144

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:

chlimage_1-145

Dipende anche dalla selezione di una risorsa:

chlimage_1-146

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

chlimage_1-147

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.

chlimage_1-148

Editor Frame

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

chlimage_1-149

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

chlimage_1-150

Pannello laterale - Risorse

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

chlimage_1-151

Pannello laterale - Gruppi di risorse

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

chlimage_1-152

Pannello laterale - Componenti

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

chlimage_1-153

Sovrapposizioni

Questi elementi sovrappongono la cornice contenuto e vengono utilizzati dai livelli per comprendere la tecnica di interazione (completamente trasparente) con i componenti e il relativo contenuto.

Le sovrapposizioni sono live nella cornice dell’editor (con tutti gli altri elementi di authoring delle pagine), anche se sovrappongono effettivamente i componenti appropriati nella cornice contenuto.

chlimage_1-154

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.

Nota

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.

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

chlimage_1-155

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.

chlimage_1-156

Ulteriori informazioni

Per ulteriori dettagli sui concetti relativi all’interfaccia touch, continuate con l’articolo Concetti dell’interfacciaAEM touch.

Per ulteriori informazioni tecniche, consultate la documentazione JS impostata per l'editor pagina touch.

In questa pagina