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:

Console di AEM Sites

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:

Visualizzazione mobile della console Sites

Barra intestazione header-bar

Barra di intestazione AEM

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

Barra degli strumenti di AEM Sites

Dipende anche dalla selezione di una risorsa:

Barra degli strumenti di AEM Sites selezionata

Barra a sinistra left-rail

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

Barra a sinistra

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 del contenuto

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:

  • Barra degli strumenti superiore
  • Pannello laterale
  • Tutte le sovrapposizioni
  • Qualsiasi altro elemento di creazione pagina, ad esempio la barra degli strumenti del componente

Cornice dell’editor

Pannello laterale side-panel

Contiene tre schede predefinite. Il Risorse e Componenti Le schede consentono di selezionare tali elementi, trascinarli dal pannello e rilasciarli sulla pagina. Il Struttura contenuto Questa scheda ti consente di controllare la gerarchia dei contenuti 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

Pannello laterale - Risorse side-panel-assets

Nella scheda Risorse puoi selezionare dall’intervallo di risorse. Puoi anche filtrare in base a un termine specifico o selezionare un gruppo.

Scheda Risorse

Pannello laterale - Gruppi di risorse side-panel-asset-groups

Nella scheda Risorse è disponibile un elenco a discesa che consente di selezionare i gruppi di risorse specifici.

Gruppi di risorse

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.

Scheda Componenti

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.

Struttura contenuto

Sovrapposizioni overlays

Sovrappone la cornice del contenuto e viene utilizzato da livelli realizzare i meccanismi necessari per 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.

Sovrapposizioni

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

NOTE
I livelli sono un concetto potente che influisce sulla visualizzazione e sull’interazione dell’utente con il contenuto della pagina. Quando sviluppate i vostri livelli, assicuratevi che il livello si ripulisca quando esce.

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

Selettore livello

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.

Barra degli strumenti del componente

Ulteriori informazioni further-information

Per ulteriori informazioni tecniche, vedere Set di documentazione JS per l’editor pagina.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab