Struttura dell’interfaccia utente 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 è adatta sia ai dispositivi mobili che a quelli desktop. Invece di creare due stili, l’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 visualizzato come segue:

Il layout aderisce a uno stile di progettazione reattivo e si adatta alle dimensioni del dispositivo o della 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 dell’intestazione mostra gli elementi globali, tra cui:

• il logo e lo specifico prodotto/soluzione attualmente in uso; per AEM si tratta anche di un collegamento alla navigazione globale
• Ricerca
• icona per accedere alle risorse dell’Aiuto
• icona per accedere ad altre soluzioni
• un indicatore di (e accesso a) tutti gli avvisi o gli elementi della casella in entrata che ti aspettano
• l’icona utente, insieme a un collegamento alla gestione del profilo

Barra degli strumenti

Questo è contestuale agli strumenti di posizione e superfici rilevanti per il controllo della visualizzazione o delle risorse nella pagina sottostante. La barra degli strumenti è specifica per il prodotto, ma esiste una certa comunanza tra gli elementi.

In qualsiasi posizione la barra degli strumenti mostra le azioni attualmente disponibili:

Dipende anche dal fatto che una risorsa sia attualmente selezionata o meno:

Barra a sinistra

La barra a sinistra può essere aperta o nascosta in base alle esigenze:

• Timeline
• Riferimenti
• Filtro

Il valore predefinito è Solo contenuto (barra nascosta).

Authoring delle pagine

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

Frame del contenuto

Viene eseguito il rendering del contenuto della pagina nel frame del contenuto. La cornice contenuto è completamente indipendente dall’editor, per garantire che non ci siano conflitti dovuti a CSS o javascript.

La cornice contenuto si trova nella sezione destra della finestra, sotto la barra degli strumenti.

Frame editor

La cornice dell'editor realizza le funzioni di modifica.

Il frame dell'editor è un contenitore (astratto) per tutti i elementi di authoring delle pagine. Si trova sopra la cornice del 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

Questa contiene due schede predefinite per la selezione di risorse e componenti; possono essere trascinati da qui e rilasciati sulla pagina.

Il pannello laterale è nascosto per impostazione predefinita. Se selezionata, la finestra verrà visualizzata sul lato sinistro o scivolerà lungo per coprire l'intera finestra (quando la dimensione della finestra è inferiore a 1024 px; come, ad esempio, su un dispositivo mobile).

Pannello laterale - Risorse

Nella scheda Risorse puoi selezionare un intervallo di risorse. Puoi anche filtrare un termine specifico o selezionare un gruppo.

Pannello laterale - Gruppi di risorse

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

Pannello laterale - Componenti

Nella scheda Componenti puoi selezionare uno dei diversi componenti disponibili. Puoi anche filtrare un termine specifico o selezionare un gruppo.

Sovrapposizioni

Sovrappongono il frame del contenuto e vengono utilizzati dal livelli realizzare la meccanica su come interagire (in modo completamente trasparente) con i componenti e i loro contenuti.

Le sovrapposizioni sono presenti nel frame dell’editor (con tutti gli altri elementi di authoring delle pagine), anche se sovrappongono i componenti appropriati nel frame del contenuto.

Livello

Un livello è un bundle 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 include diversi livelli già implementati per l’authoring delle pagine; ad esempio modifica, anteprima, annotazione.

Selettore livello

Lo switcher di livello consente di scegliere il livello da utilizzare. Una volta chiuso, indica il livello attualmente in uso.

Il commutatore di livello è disponibile come un menu 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 mostra la relativa barra degli strumenti quando viene fatto clic su (una volta o con un doppio clic lento). La barra degli strumenti contiene le azioni specifiche (ad esempio copia, incolla, editor aperto) disponibili per l’istanza del componente (modificabile) nella 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, continua a seguire l’articolo Concetti dell’interfaccia AEM touch.

Per ulteriori informazioni tecniche consulta la sezione Set di documentazione JS per l’editor pagina touch.

Risorse Business.Adobe.com

Auto Text Summarization Style System Cms Cloud Document Generation Content As A Service Content Management