L’interfaccia AEM touch presenta diversi principi di base ed è composta da diversi elementi chiave:
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:
La barra dell’intestazione mostra gli elementi globali, tra cui:
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:
La barra a sinistra può essere aperta o nascosta in base alle esigenze:
Il valore predefinito è Solo contenuto (barra nascosta).
Durante l’authoring delle pagine, le aree strutturali sono le seguenti:
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.
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:
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).
Nella scheda Risorse puoi selezionare un intervallo di risorse. Puoi anche filtrare un termine specifico o selezionare un gruppo.
Nella scheda Risorsa è disponibile un elenco a discesa che puoi utilizzare per selezionare i gruppi di risorse specifici.
Nella scheda Componenti puoi selezionare uno dei diversi componenti disponibili. Puoi anche filtrare un termine specifico o selezionare un gruppo.
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.
Un livello è un bundle 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 include 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 sull’interazione dell’utente con il contenuto della pagina. Quando si sviluppano i propri livelli, è necessario assicurarsi che il livello si ripulisca quando viene lasciato.
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).
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.
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.