Structure of the AEM Touch-Optimized UI

The touch-optimized UI, as implemented in AEM, has several underlying principles and is made up of several key elements:

Consoles

Basic Layout and Resizing

The UI caters for both mobile and desktop devices, though rather than creating two styles Adobe has decided to use one style that works for all screens and devices.  

All modules use the same basic layout, in AEM this can be seen as: 

file

This layout adheres to a responsive design style and will accomodate itself to the size of the device you are using: 

file

Remarque

When the resolution goes below 1024px the rail will be automatically hidden when not in active use; for example, on a mobile device.

Header Bar

file

The header bar shows global elements including:

  • the logo
  • a link to the Marketing Cloud
  • the specific product/solution that you are currently using; for AEM this also forms a link to the Projects console, also used as the welcome screen
  • breadcrumb links to the current location
  • icon for opening/closing the rail
  • a link to the help resources
  • a indicator of any alerts or Inbox items that are waiting for you
  • the user icon, together with a link to your profile management 

Toolbar

This is contextual to your location and surfaces tools relevant to controlling the view or assets in the page below. The toolbar is product specific, but there is some commonality to the elements.

In any location the toolbar shows the actions currently available: 

file

Left Rail

The left rail can be opened/hidden as required. When expanded the rail can be used for navigation. 

file

Secondary Rail

When certain actions are selected (such as references, timeline, etc) a secondary rail (also known as the inner rail) opens to provide extra information and/or actions:

file

Page Authoring

When authoring pages the structural areas are as follows.

Content Frame

Here the page content is rendered.

This frame is completely independent of the editor - to ensure that there are no conflicts due to CSS or javascript.

file

Editor Frame

This realises the editing features (left-side and top of window).

file

Side Panel

This contains two default tabs to allow you to select Assets and Components (effectively the successor of the Sidekick).

file

Side Panel - Asset Groups

In the Asset tab there is a drop down that you can use to select the specific asset groups.

file

Side Panel - Components

In the Components tab you can select from the range of components. You can also filter on a specific term, or select a group.

file

Overlays

These overlay the content frame and are used by the layers to realize the mechanics of how you can interact (completely transparently) with the components and their content.

file

Layer

A layer is an independent bundle of functionality that can be activated to:

  • provide a different view of the page
  • allow you to manipulate and/or interact with a page

The layers provide sophisticated functionality for the entire page, as opposed to specific actions on an individual component.

AEM comes with several layers already implemented for page authoring; including for example, edit, preview, annotate.

Remarque

Layers are a powerful concept that affect the user's view of and interaction with the page content. When developing your own layers you need to ensure that the layer cleans up when it is exited.

Layer Switcher

The layer switcher allows you to choose the layer you want to use.

file

Component Toolbar

Each instance of a component will reveal its toolbar when clicked. The toolbar contains the specific actions (e.g. copy, paste, open-editor) that are available for the component instance (Editable) on the page.

file

Editable

In the context of page authoring an Editable:

  • describes the instance of a component on a page
  • uses the constructor: Granite.author.Editable
  • inherits from Granite.author.Inspectable
  • allows access to the page’s DOM
  • allows access to the page’s overlay
  • is aware of the JCR path and edit configuration
  • all Editables on the current page are accessible through the global object Granite.author.store
​