Create Touch UI Component Using Coral UI AEM

Coral UI is introduced in AEM to ease the work of a front end developer. All components build in coral ui are simple, responsive and powerful. All Coral UI css and js files are bundled and shipped with AEM and can be found under /etc/clientlibs/granite/coralui2.

In this tutorial we will see what Coral UI is and how to use Coral UI in AEM for building components in touch ui or classic ui.

After completing this tutorial, you will have a clear understanding of:-

Touch-optimized UI is designed by Adobe to provide consistent user experience across multiple platforms, like mobile, tablet and desktop. Touch UI uses Granite UI whereas classic UI use ExtJS.

The major difference between Granite UI and EXTJS are:

  • Granite UI is Thin client where as EXTJS is Fat Client.
  • Granite UI provides universal clientlibs whereas ExtJS provides specialized clientlibs.

Relationship between Granite, Granite UI and Coral UI in AEM:


Before proceeding with creating a component  using coral ui in Touch UI, lets get an understanding about what is coral UI and where it fits in AEM Technology Stack.

aem granite coral ui technolgy architecture

Granite:- Granite is an open development project within Adobe which means any one from adobe can contribute to the code, discussions and issues. It is basically a collection of several open source projects like Apache Sling, Felix, Jackrabbit and Lucene.

Note:- Granite is not an open source project. Adobe has clearly stated that what can be used public and what is internal.

Granite UI:- Granite UI is a foundation UI framework provided by adobe to develop modular, layerable and reusable components.
It consist of two parts client-side and server-side and achieved through REST call.

Coral UI:- It is a set of CSS and JS files designed and built for Adobe Cloud products. Coral UI provides a wide range of html components pre developed for your website like buttons, navigation bar, tool bar,tables, grid, dialogs etc. and save you time from developing these components.
So that you can focus more on your product. Clik here For complete list of Coral UI widgets, components and styles avalibale.

Note:- It is an is an implementation of the CloudUI visual style from Adobe XD.

Advantages of Coral UI:-


There are various advantages of using coral ui over create our own css and js files for ui customization.

  • Modular :- All the components are developed as modules,that can be used individually, allowing you to use just what you want.
  • Icons:- Coral UI prvides a wide range of icons to choose from and are fully customizable according to customer need. It provides around 400+ icons to choose from.
  • Open Development:- It is an open development project means it allows every one inside adobe to contribute.
  • XD Approved:- All the designs and components are XD approved.

Create a Component using Coral UI 3


Now lets see how we can use coral ui in our jsp to ease our development efforts.

  • Create a component in Touch UI Click Here for more info.
  • Open touchComponent.jsp and add below code in jsp.
<html>
<[email protected] file="/libs/foundation/global.jsp" %>  
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
   <cq:includeClientLib categories="coralui2"/>
<body>


<h1>Here is where your Touch UI component will go</h1>


<button class="coral-Button coral-Button--square coral-Button--warning">
  <i class="coral-Icon coral-Icon--delete"></i>
</button>
<button class="coral-Button coral-Button--square">
  <i class="coral-Icon coral-Icon--add"></i>
</button>
<button class="coral-Button coral-Button--square coral-Button--secondary">
  <i class="coral-Icon coral-Icon--alert"></i>
</button>
<button class="coral-Button coral-Button--square coral-Button--primary">
  <i class="coral-Icon coral-Icon--checkCircle"></i>
</button>


<div class="coral-Wait coral-Wait--large"></div>


<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Test Page in Touch UI and Classic UI:- 

Open page from site admin:-

Touch UI(editor.html) :

touchui coral ui page

Classic UI(cf#) :

classic ui coral ui page

Note:- Coral UI supports both classic Ui as well as Touch UI.

Similarly we can add other components like Accordion, Tab Panel, File upload , Progress bar, spinners and many more.

For complete list of list of available coral ui components in 6.0 and later Click Here.

Image Credit : docs.adobe.com

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *