Touch UI and Classic UI

The touch-enabled UI is now the standard UI for AEM, though the classic UI is still supported.


The touch-enabled UI has been designed by Adobe to provide consistency in the user experience across multiple products. It is based on:

  • Coral UI (CUI) an implementation of Adobe’s visual style for the touch-enabled UI. Coral UI provides everything your product / project / web application needs to adopt the UI visual style.
  • Granite UI components are built with Coral UI.

Differences with the Classic UI

The differences between Granite UI and ExtJS (used for the classic UI) are also of interest:

ExtJS Granite UI
Remote Procedure Call State Transistions
Data transfer objects Hypermedia
Client knows server internals Client does not know internals
“Fat client” “Thin client”
Specialized client libraries Universal client libraries

Coral UI

Coral UI (CUI) is an implementation of Adobe’s visual style for the touch-enabled UI, that has been designed to provide consistency in the user experience across multiple products. Coral UI provides everything you need to adopt the visual style used on the authoring environment.


Coral UI is a UI library made available to AEM customers for building applications and web interfaces within the boundaries of their licensed use of the product.

Use of Coral UI is only permitted:

  • When it has been shipped and bundled with AEM.
  • For use when extending the existing UI of the authoring environment.
  • Adobe corporate collateral, ads, and presentations.
  • The UI of Adobe-branded applications (the font must not be readily available for other uses).
  • With minor customizations.

Use of Coral UI should be avoided in:

  • Documents and other items not related to Adobe.
  • Content-creation environments (where the preceding items might be generated by others).
  • Applications/components/web pages that are not clearly connected to Adobe


This UI was meant to address the growing need for authors to be able to create and edit content on their tablets and phones while on the go. Touch UI is designed with the author in mind, allowing for easy updates using a touch-device, while still supporting navigation with a mouse for users working on a laptop or desktop.

This is based on CORAL UI(Adobe product). CORAL UI will provide common look and feel for all Adobe marketing cloud solutions.

If we used editor.html then touch ui will be opened

When editing pages in AEM, several modes are available; including, in the touch-optimized UI, Developer mode. This opens a side panel with several tabs that provide a developer with infomation about the current page. The three tabs are:

Components for viewing sructure and performance information.

Tests for running tests and analyzing the results.

Errors to see any problems occuring.


Classic UI is used for desktop applications. This is not responsive

Its Based on EXT JS framework(Sencha).Widgets,dialogs are based on EXT.js

if we used cf# then classic mode will be opened

Dialog creation is separate for Classic and touch


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s