The touch-optimized UI, as implemented in AEM, has several underlying principles and is made up of several key elements:
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.
The layout adheres to a responsive design style and will accomodate itself to the size of the device/window you are using.
For example, when the resolution goes below 1024px (as on a mobile device) the display will be adjusted accordingly:
The header bar shows global elements including:
- the logo and the specific product/solution that you are currently using; for AEM this also forms a link to the Global Navigation
- icon for accessing the help resources
- icon for accessing other Solutions
- a indicator of (and access to) any alerts or Inbox items that are waiting for you
- the user icon, together with a link to your profile management
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.
The left rail can be opened/hidden as required to show:
The default is Content Only (rail hidden).
The editor frame is a container (abstract) for all the page authoring elements. It lives on top of the content frame, and includes:
- the top toolbar
- the side panel
- all the overlays
- any other page authoring element; for example, the component toolbar
This contains two default tabs to allow you to select assets and components; they can be dragged from here and dropped onto the page.
The side panel is hidden by default. When selected it will either be shown at the left side, or will slide across to cover the entire window (when the window size is below a width of 1024px; as, for example, on a mobile device).
In the Assets tab you can select from the range of assets. You can also filter on a specific term, or select a group.
In the Components tab you can select from the range of components. You can also filter on a specific term, or select a group.
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.
The overlays live in the editor frame (with all other page authoring elements), though they actually overlay the appropriate components in the content frame.
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.
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.
The layer switcher allows you to choose the layer you want to use. When closed, it indicates the layer currently in use.
The layer switcher is available as a drop down from the toolbar (at the top of the window, within the editor frame).
Each instance of a component will reveal its toolbar when clicked (either once or with a slow double-click). The toolbar contains the specific actions (e.g. copy, paste, open-editor) that are available for the component instance (Editable) on the page.
Depending on the space available, the component toolbars are positioned at the top-, or bottom-, right corner of the appropriate component.
For further information see the JS documentation set.