Struttura dell’interfaccia AEM
- Argomenti:
- Sviluppo
Creato per:
- Amministratore
- Sviluppatore
L’interfaccia utente dell’AEM ha diversi principi di base ed è composta da diversi elementi chiave:
Console
Layout e ridimensionamento di base
L’interfaccia utente supporta sia i dispositivi mobili che quelli desktop, ma invece di creare due stili, l’AEM utilizza uno stile che funziona per tutti gli schermi e i dispositivi.
Tutti i moduli utilizzano lo stesso layout di base:
Il layout aderisce a uno stile di progettazione reattivo e si adatta alle dimensioni del dispositivo, della finestra o di entrambi, che si sta utilizzando.
Ad esempio, quando la risoluzione scende al di sotto di 1024 pixel (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 il prodotto/soluzione specifico attualmente in uso. Per l’AEM, questo elemento costituisce anche un collegamento alla navigazione globale
- Ricerca
- Icona per accedere alle risorse della guida
- Icona per accedere ad altre soluzioni
- Indicatore e accesso a tutti gli avvisi o gli elementi della casella in entrata che ti aspettano
- L’icona utente, insieme a un collegamento per la gestione del profilo
Barra degli strumenti
La barra degli strumenti è contestuale alla posizione e mette in superficie gli strumenti rilevanti per il controllo della vista o delle risorse nella pagina seguente. La barra degli strumenti è specifica per il prodotto, ma presenta alcune caratteristiche in comune con gli elementi.
In qualsiasi posizione, la barra degli strumenti mostra le azioni attualmente disponibili:
Dipende anche dalla selezione di una risorsa:
Barra a sinistra
La barra a sinistra può essere aperta/nascosta come richiesto per mostrare:
- Solo contenuto
- Struttura contenuto
- Timeline
- Riferimenti
- Filtro
Il valore predefinito è Solo contenuto (barra nascosta).
Authoring delle pagine
Quando si creano le pagine, le aree strutturali sono le seguenti.
Frame del contenuto
Il rendering del contenuto della pagina viene eseguito nel frame del contenuto. Il frame del contenuto è indipendente dall’editor, per garantire che non vi siano conflitti dovuti a CSS o JavaScript.
La cornice di contenuto si trova nella sezione destra della finestra, sotto la barra degli strumenti.
Frame dell'editor
Il frame dell'editor abilita le funzioni di modifica.
Il frame dell’editor è un contenitore (astratto) per tutti gli elementi di authoring delle pagine. Si trova sopra la cornice del contenuto e include:
- Barra degli strumenti superiore
- Pannello laterale
- Tutte le sovrapposizioni
- Qualsiasi altro elemento di creazione pagina, ad esempio la barra degli strumenti del componente
Pannello laterale
Contiene tre schede predefinite. Le schede Assets e Components consentono di selezionare tali elementi e trascinarli dal pannello e rilasciarli sulla pagina. La scheda Struttura contenuto consente di controllare la gerarchia del contenuto nella pagina.
Il pannello laterale è nascosto per impostazione predefinita. Se questa opzione è selezionata, viene visualizzata sul lato sinistro o, se la larghezza della finestra è inferiore a 1024 pixel, scorre in avanti per coprire l’intera finestra come, ad esempio, su un dispositivo mobile.
Pannello laterale - Assets
Nella scheda Assets puoi selezionare una delle risorse disponibili. Puoi anche filtrare in base a un termine specifico o selezionare un gruppo.
Pannello laterale - Gruppi di risorse
Nella scheda Assets è 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 componenti disponibili. Puoi anche filtrare in base a un termine specifico o selezionare un gruppo.
Pannello laterale - Struttura contenuto
Nella scheda Struttura contenuto è possibile visualizzare la gerarchia del contenuto della pagina. Facendo clic su una voce nella scheda, si passa a e si seleziona l’elemento nella pagina all’interno dell’editor.
Sovrapposizioni
Sovrappone il frame del contenuto e vengono utilizzati dai livelli per realizzare i meccanismi con cui puoi interagire in modo trasparente con i componenti e i relativi contenuti.
Le sovrapposizioni sono live nel frame dell’editor (con tutti gli altri elementi di authoring della pagina), anche se in realtà sovrappongono i componenti appropriati nel frame del contenuto.
Layer
Un livello è un bundle indipendente di funzionalità che può essere attivato per:
- Fornisci una visualizzazione diversa della pagina
- Consente di manipolare e/o interagire con una pagina
I livelli forniscono funzionalità avanzate per l’intera pagina, anziché azioni specifiche per un singolo componente.
L’AEM include diversi livelli già implementati per l’authoring delle pagine, tra cui, ad esempio, i livelli Modifica, Anteprima e Annota.
NOTESwitcher livello
Il selettore livello consente di scegliere il livello da utilizzare. Quando è chiuso, indica il livello attualmente in uso.
Il selettore livelli è disponibile come elenco a discesa dalla barra degli strumenti (nella parte superiore della finestra, all’interno del frame dell’editor).
Barra degli strumenti del componente
Ogni istanza di un componente mostra la propria barra degli strumenti quando viene selezionata (una volta o con un doppio clic lento). La barra degli strumenti contiene le azioni specifiche (ad esempio, copia, incolla, open-editor) disponibili per l’istanza del componente nella pagina.
A seconda dello spazio disponibile, le barre degli strumenti del componente sono posizionate nell’angolo superiore o inferiore destro del componente appropriato.
Ulteriori informazioni
Per ulteriori informazioni tecniche, consulta il set di documentazione JS per l'editor pagina.
Unified Shell
Consulta AEM as a Cloud Service su Unified Shell se utilizzi Unified Shell come interfaccia utente AEM.
Se hai bisogno di effettuare, o hai già fatto, qualsiasi personalizzazione, Unified Shall può essere disabilitato:
-
dal codice del progetto, da:
-
il
/conf/global/setting/unifiedshell- impostazione della proprietà
Booleanenablesufalse
- impostazione della proprietà
-