Struttura dell’interfaccia AEM structure-of-the-aem-ui

L’interfaccia utente dell’AEM ha diversi principi di base ed è composta da diversi elementi chiave:

Console consoles

Layout e ridimensionamento di base basic-layout-and-resizing

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 header-bar

La barra dell’intestazione mostra gli elementi globali, tra cui:

Barra degli strumenti toolbar

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 left-rail

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

Il valore predefinito è Solo contenuto (barra nascosta).

Authoring delle pagine page-authoring

Quando si creano le pagine, le aree strutturali sono le seguenti.

Frame del contenuto content-frame

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 editor-frame

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:

Pannello laterale side-panel

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 side-panel-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 side-panel-asset-groups

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

Pannello laterale - Componenti side-panel-components

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 side-panel-content-tree

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 overlays

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 layer

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

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.

Switcher livello layer-switcher

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 component-toolbar

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 further-information

Per ulteriori informazioni tecniche, consulta il set di documentazione JS per l'editor pagina.

Unified Shell 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: