Migration To Touch UI

MIGRATION TO TOUCH UI

AEM introduced a new user interface for the first time in AEM 5.6 (2013) referred to as the "touch-enabled UI" (simply as "touch UI") that is aligned to Adobe user interface guidelines.

They have provided Improved Touch UI Authoring interface (usable) with lots of improvements from AEM 6.1 onwards.

With near feature parity reached, this has become the standard UI in AEM with the legacy, desktop-oriented interface referred to as “classic UI”.

Note: It will take some time to adopt Touch UI, but once u get used to of it, you will love Touch UI, as this is designed to provide consistency in the user experience across multiple products.

Currently AEM does not provide configuration support to disable any of the UI (Touch or Classic) but soon Adobe will deprecate the classic UI.

 

The basic principles of the touch-enabled UI are:

 

·         Responsive design

·         Context relevant display

·         Reusable

·         Bottom-up design to ensure these principles are applied to every element and component

·         Mobile first (with desktop in mind)

 

Developer needs to make sure that their components are using Touch UI Dialog along with Classic Dialog. If you are trying to enable existing components to support Touch UI, then follow following practice:

1.     Use Dialog Conversion tool to convert existing EXTJS dialogs to Touch Dialogs.

2.     For any customization you did in Classic dialog (custom xtypes) you need similar widget for Touch UI.

3.     It’s not necessary that Classic UI & Touch UI dialog is always same (classic ui dialog can have multiple tabs, but for touch UI, you can have all fields in same tabs), but in ideal case they should be.

4.     Unlike Classic UI, Touch UI build complete dialog in single request (all cq:include) and return complete dialog html.

5.     Use/Create “Datasource” to dynamically populate any element value in Touch UI dialog.

6.     Show/Hide rules in touch ui is simplified, can be done by adding some class name in dialog’s attribute property, and is managed by Jquery.

7.     Custom Show/Hide rules can be easily created and used by creating clientlibs.

8.     If a component don’t have Touch dialog, then classic dialog can be used in Touch UI.

Difference Between Classic UI and Touch UI dialog

Touch UI is responsive, supports desktop & touches devices and uses mobile first approach

         Classic UI Text Component Dialog          Touch UI Text Component Dialog

 Touch UI is based on CORAL UI + GRANITE UI

·        CORAL UI has been used to provide widgets (CSS+JS)

·        GRANITE UI provides the foundation components

 

Currently the components are located in the Granite repository at:

·        Coral UI 2: /libs/granite/ui/components/foundation

·        Coral UI 3: /libs/granite/ui/components/coral/foundation

 

 

Migration of functionality from Classic UI to TOUCH UI that are deprecated/missing and which are completed are found at below URL:

https://helpx.adobe.com/in/experience-manager/6-3/release-notes/touch-ui-features-status.html

AEM have two sets of Granite UI components based on Coral UI 2 and Coral UI 3, below are the differences mentioned:

1.     A new set of Sling components of Granite UI Foundation is created for Coral3 under /libs/granite/ui/components/coral/foundation

2.     A new clientlib of Granite UI Foundation, named granite.ui.coral.foundation is also created

3.     The new set will not be just a copy-paste of the old set, rather it will be cleaned up (e.g. streamlining, removing deprecated feature)

4.     It is recommended that a page only use either CoralUI 3-based or CoralUI 2-based set (i.e. not mixed)

5.     The new set will not use the layout concept anymore. This is to increase the simplicity of the understanding of Granite UI. Each layout component thus becomes a standard component.

6.     The layout mechanic itself is still there for other to use if needed.

Before

     

After

Reasons to upgrade to higher versions of AEM

Adobe Experience Manager 6.4 continues to enhance the system's stability, performance and supportability via: 

·         A system overview dashboard.

·         New health checks and maintenance tasks.

·         Improved online compaction.

·         Use of oak-run.jar to re/indexing Oak indexes without impacting system performance.

·         Improvements to upgrade tooling allowing for easier and quicker upgrades, including the pattern detector, compatibility package, and repository restructuring to facilitate easier upgrades.

·         A variety of usability improvements including the return of tree-based navigation, keyboard shortcuts, updates Omnisearch experience, and virtual scroll in AEM Assets.

 

Ø Website Creation made easy

AEM Sites introduces a number of features designed to accelerate the creation and build-out of websites:

·         Core Components v2 adds to and extends AEM's suite of ready-to-use components.

·         The Style System allows components to be easily styled to suit every need.

·         Translations enhancements allow AEM Sites to easily translated into multiple languages at once.

 

Ø Asset Management

AEM Assets continues building on its rich set of Asset management capabilities to improve using, managing and understanding the DAM.

·         AEM Assets can be accessed directly from within Adobe Creative Cloud tools using Adobe Asset Link.

·         Metadata Import and Export allows asset metadata to be exported in bulk to CSV, updated in data management tools like Microsoft Excel, and re-imported into AEM.

·         Permissions, via Closed User Groups (CUGs), can be applied to Assets folders.

Ø Introduction of Machine Learning and artificial intelligence

 

AEM continues to build its integration with smart technologies to improve all experiences.

·         AEM Assets' Enhanced Smart Tags (via Feature Pack) allows the Smart Tags service to be trained with custom tags.

·         AEM Assets' Dynamic Media Smart Crop uses Adobe Sensei to automatically crop images while retaining both the focal point and overall image composition.

·         Smart Translation Search supports the automatic translation of search terms, allowing increased discoverability of content in AEM across languages.

 

Ø Integrations

 

AEM grows its ability to integrate with other Adobe services:

·         Experience Fragments integration with Adobe Target.

·         Adobe Launch cloud service, allowing AEM Sites to leverage the latest in tag management technology.

 

Key features introduction to various versions of AEM can be found here:

 

https://helpx.adobe.com/experience-manager/kt/platform-repository/using/upgrade-aem-article-understand.html

 

Introduction to HTL

 

The HTML Template Language has been introduced with AEM 6.0, and takes the place of JSP (JavaServer Pages) as the preferred and recommended server-side template system for HTML. For web developers who need to build robust enterprise websites, the HTML Template Language helps to achieve increased security and development efficiency.

 

HTL or JSP?

 

It is recommended for new AEM projects to use the HTML Template Language, as it offers multiple benefits compared to JSP. For existing projects though, a migration only makes sense if it is estimated to be less effort than maintaining the existing JSPs for the coming years.

 

Features provided by HTL are:

 

1.     Increased security - The HTML Template Language increases the security of sites that use it in their implementation, as compared to JSP and to most other template systems, because HTL is capable of automatically applying the proper context-aware escaping to all variables being output to the presentation layer.

 

2.     Simplified development - The HTML Template Language is easy to learn and its features are purposely limited to ensure that it stays simple and straight-forward. This allow HTML developers without Java knowledge and with little product-specific knowledge to be able to edit HTL templates, allowing them to be part of the development team.

 

3.     Reduced Costs - Increased security, simplified development and improved team collaboration, translates for AEM projects in reduced effort, faster time to market (TTM), and lower total cost of ownership (TCO).

 

To get more info about HTL go to below link:

https://docs.adobe.com/content/help/en/experience-manager-htl/using/getting-started/getting-started.html