March 28, 2020
Estimated Post Reading Time ~

Differences between Classic UI & Touch UI

Classic UI Dialog                                        Touch UI Dialog

Classic UI dialog is based on ExtJS        Touch UI dialog is based on Coral UI +                                                            Granite UI

Classic UI dialog is not responsive         Touch UI dialog is responsive & uses                                                                Mobile-first approach

the dialog is the root node                    cq:dialog is the root node

Root node uses ExtJS xtypes                 Root node uses Granite UI resource                                                                Types

The dialog is rendered on client-side      Touch UI dialog is rendered on the                                                                  Server-side

Granite UI is the foundation UI framework to build touch-enabled UI consoles and component dialogs also to develop modular, layerable and reusable components. It provides a set of out-of-the-box (OOTB) components that you can use to build consoles or component
It consists of two parts client-side and server-side and achieved through a REST call.

Coral UI is an elegant framework provided by Adobe to ease the front end development. Complete Coral UI framework comes as default with AEM and can be found under /etc/clientlibs/granite/coralui2. ... Granite, GraniteUI and Coral UI and the relationship between them.

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

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.



By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.