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. Relationship between Granite, Granite UI and Coral UI in AEM: Before proceeding with creating a component using coral UI in Touch UI, let's get an understanding of what is coral UI and where it fits in AEM Technology Stack. It consists of two parts client-side and server-side and achieved through a REST So that you can focus more on your product. Click here For a complete list of Coral UI widgets, components and styles available. Advantages of Coral UI:- There are various advantages of using coral UI over create our own CSS and js files for UI customization. Create a Component using Coral UI 3 Now let's see how we can use coral UI in our JSP to ease our development efforts.
<html>
<%@include 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:- Touch UI:
Classic UI:
After completing this tutorial, you will have a clear understanding of:-
· Relationship between Granite, Granite UI and Coral UI in AEM .
· What are the advantages of using Coral UI .
· How to create a component using Coral UI .
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 whereas EXTJS is Fat Client.
· Granite UI provides universal clientlibs whereas ExtJS provides specialized clientlibs.
Granite:- Granite is an open development project within Adobe which means anyone 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.
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, toolbar, tables, grid, dialogs, etc. and save you time from developing these components.
Note:- It is is an implementation of the CloudUI visual style from Adobe XD.
· Modular:- All the components are developed as modules, that can be used individually, allowing you to use just what you want.
· Icons:- Coral UI provides a wide range of icons to choose from and is fully customizable according to customer needs. It provides around 400+ icons to choose from.
· Open Development:- It is an open development project that means it allows everyone inside adobe to contribute.
· XD Approved:- All the designs and components are XD approved.
· Create a component in Touch UI Click Here
· Open touchComponent.jsp
Open page from site admin:-
Touch UI(editor.html) :
Classic UI(cf#) :
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 a complete list of available coral UI components in 6.0 and later Click Here
Image Credit : docs.adobe.com
No comments:
Post a Comment
If you have any doubts or questions, please let us know.