Struktur för det AEM användargränssnittet med pekskärm structure-of-the-aem-touch-enabled-ui

Det AEM användargränssnittet med pekskärm har flera underliggande 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 har Adobe valt att använda ett format som fungerar för alla skärmar och enheter.

Alla moduler använder samma grundläggande layout, AEM detta kan ses som:

Layouten följer en responsiv designstil och anpassas till storleken på enheten/fönstret som du använder.

Om upplösningen till exempel ligger under 1 024 px (som på en mobil enhet) justeras skärmen därefter:

Sidhuvudsfält header-bar

Rubrikraden visar globala element som:

Verktygsfält toolbar

Det här är kontextuellt för platsen och ytverktygen som är relevanta för att styra vyn eller resurserna på sidan nedan. Verktygsfältet är produktspecifikt, men det finns vissa gemensamma element.

Alla tillgängliga åtgärder visas i verktygsfältet:

Beroende på om en resurs är markerad:

Vänster linje left-rail

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

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

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

Redigeringsram editor-frame

Redigeringsramen har redigeringsfunktionerna.

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

Side Panel side-panel

Detta innehåller två standardflikar där du kan välja resurser och komponenter; de kan dras härifrån och släppas på sidan.

Sidpanelen är dold som standard. När det här alternativet är markerat visas det antingen på vänster sida, eller glida över för att täcka hela fönstret (när fönsterstorleken är under bredden 1024px; som på en mobil enhet).

Side Panel - Assets side-panel-assets

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

Sida - Resursgrupper side-panel-asset-groups

På fliken Resurser finns det en listruta där du kan välja specifika 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 välja en grupp.

Övertäckningar overlays

Dessa överlägg innehållsramen och används av lager för att utnyttja mekanismerna i hur du kan interagera (helt transparent) 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.

Lager layer

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

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, som till exempel redigering, förhandsgranskning och anteckning.

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

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 (t.ex. kopiera, klistra in, öppna redigeringsprogram) som är tillgängliga för komponentinstansen (redigerbar) 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.

Ytterligare information further-information

Mer information om begreppen kring det beröringsaktiverade användargränssnittet finns i artikeln Koncepten i det AEM användargränssnittet med pekskärm.

Mer teknisk information finns i JS-dokumentationsuppsättning för den pekaktiverade sidredigeraren.