Struktur för AEM structure-of-the-aem-ui

Det AEM användargränssnittet har flera bakomliggande principer och består av flera nyckelelement:

Konsoler consoles

Grundläggande layout och storleksändring basic-layout-and-resizing

Gränssnittet fungerar både för mobila och stationära enheter, men i stället för att skapa två format använder AEM ett format som fungerar för alla skärmar och enheter.

Alla moduler använder samma grundläggande layout:

AEM Sites-konsol

Layouten följer en responsiv designstil och passar sig till storleken på enheten, fönstret eller båda, som du använder.

När upplösningen till exempel är lägre än 1 024 pixlar (som på en mobil enhet) justeras visningen därefter:

Mobilvyn i webbplatskonsolen

Sidhuvudsfält header-bar

AEM rubrikfält

Rubrikraden visar globala element som:

  • Logotypen och den specifika produkt/lösning som du för närvarande använder. För AEM utgör det här elementet även en länk till den globala navigeringen
  • Sök
  • Ikon för att komma åt hjälpresurserna
  • Ikon för att komma åt andra lösningar
  • En indikator på - och åtkomst till - alla varningar och inkorgsobjekt som väntar på dig
  • Användarikonen tillsammans med en länk till din profilhantering

Verktygsfält toolbar

Verktygsfältet är sammanhangsberoende för din plats och de ytverktyg som är relevanta för att styra vyn eller resurserna på sidan nedan. Verktygsfältet är produktspecifikt, men det finns vissa gemensamma element.

I verktygsfältet visas de åtgärder som är tillgängliga för tillfället:

AEM Sites-verktygsfält

Även beroende på om en resurs är markerad:

AEM Sites-verktygsfältet har valts

Vänster linje left-rail

Den vänstra listen kan öppnas/döljas efter behov för att visa:

  • Endast innehåll
  • Innehållsträd
  • Tidslinje
  • Referenser
  • Filter

Standardvärdet är Endast innehåll (dold räl).

Vänster linje

Sidredigering page-authoring

När du skapar sidor är de strukturella områdena följande.

Innehållsram content-frame

Sidinnehållet återges i innehållsramen. Innehållsramen är oberoende av redigeraren för att säkerställa att det inte finns några konflikter på grund av CSS eller JavaScript.

Innehållsramen finns till höger i fönstret, under verktygsfältet.

Innehållsram

Redigeringsram editor-frame

Redigeringsramen aktiverar redigeringsfunktionerna.

Redigeringsramen är en behållare (abstrakt) för alla sidredigeringselement. Den ligger ovanpå innehållsramen och innehåller:

  • Det övre verktygsfältet
  • Sidpanelen
  • Alla övertäckningar
  • Andra sidredigeringselement, till exempel komponentens verktygsfält

Redigeringsram

Side Panel side-panel

Innehåller tre standardflikar. På flikarna Assets och Komponenter kan du markera sådana element och dra dem från panelen och släppa dem på sidan. På fliken Innehållsträd kan du inspektera hierarkin med innehåll på sidan.

Sidpanelen är dold som standard. När du väljer det här alternativet visas det antingen på den vänstra sidan eller när fönsterbredden är mindre än 1 024 pixlar, flyttas det över för att täcka hela fönstret som t.ex. på en mobil enhet.

Sidpanelen

Side Panel - Assets side-panel-assets

På fliken Assets kan du välja bland flera olika resurser. Du kan också filtrera efter en viss term eller markera en grupp.

Fliken Assets

Side Panel - Resursgrupper side-panel-asset-groups

På fliken Assets finns en listruta där du kan välja en specifik resursgrupp.

Resursgrupper

Side Panel - Components side-panel-components

På fliken Komponenter kan du välja bland komponenterna. Du kan också filtrera efter en viss term eller markera en grupp.

Fliken Komponenter

Panelen Sida - Innehållsträd side-panel-content-tree

På fliken Innehållsträd kan du visa hierarkin med innehåll på sidan. Om du klickar på en post på fliken flyttas den till och markerar objektet på sidan i redigeraren.

Innehållsträdet

Övertäckningar overlays

Överlappar innehållsramen och används av lagren för att realisera mekanismerna för hur du kan interagera genomskinligt med komponenterna och deras innehåll.

Övertäckningarna finns i redigerarramen (med alla andra sidredigeringselement), även om de faktiskt täcker över rätt komponenter i innehållsramen.

Övertäckningar

Lager layer

Ett lager är ett oberoende funktionspaket som kan aktiveras för att:

  • Ange en annan vy av sidan
  • Tillåt att du manipulerar och/eller interagerar med en sida

Lagren har avancerade funktioner för hela sidan, i motsats till specifika åtgärder för en enskild komponent.

AEM innehåller flera lager som redan har implementerats för sidredigering, till exempel redigering, förhandsgranskning och anteckning av lager.

NOTE
Lager är ett kraftfullt koncept som påverkar användarens vy och interaktion med sidinnehållet. När du utvecklar egna lager måste du se till att lagret rensas när det avslutas.

Lagerväxlare layer-switcher

Med lagerväljaren kan du välja det lager som du vill använda. När det är stängt visas det lager som används.

Lagerväljaren är tillgänglig som en listruta från verktygsfältet (längst upp i fönstret, i redigeringsramen).

Lagerväljaren

Komponentverktygsfältet component-toolbar

Varje instans av en komponent visar verktygsfältet när användaren klickar på det (antingen en gång eller med ett långsamt dubbelklick). Verktygsfältet innehåller de specifika åtgärder (till exempel kopiera, klistra in, öppna redigerare) som är tillgängliga för komponentinstansen på sidan.

Beroende på vilket utrymme som är tillgängligt placeras komponentens verktygsfält i det övre, eller nedre, högra hörnet av respektive komponent.

Komponentverktygsfältet

Ytterligare information further-information

Mer teknisk information finns i JS-dokumentationsuppsättningen för sidredigeraren.

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