Touching the AEM component dialog

03 September 2015
Mateusz Chrominski
Frink_Cognifide_2016_HeaderImages_0117

Touch UI has been widely available for some time already. New features are added to AEM with each release. Although there is still no parity between Touch and Classic UI it’s clear the latter one is going retire sooner or later. Thus said let’s take a deep breath and consider how much we actually know about working in the new technology.

Where were we

RESTful based frameworks integrate perfectly to JSON-friendly Javascript libraries. One could say, they just speak the same JSON language. The ExtJS library, used widely to build the author interface in the pre-AEM age worked seamlessly with Sling URL resolution. In AEM, the content visible to users is rendered by application scripts that reside in the same repository. These two objects, accessible through simple and easy to predict URLs are bread and butter for ExtJS. The application resource is analyzed to build the dialog and widgets, while the other part feeds the form fields and provides current data for the editable component. It is important to notice there is limited data processing on the client-side, as all provided data and configuration are JSON objects that can be directly used by the JS library.

What’s next

Though ExtJS has been in use for some time, it’s only now that the new Granite approach uses all the best that Sling can offer. The basics are nicely described within the Adobe’s Touch-Optimized UI Concepts documentation – definitely worth visiting. Leaving the visual part aside for now, the most obvious technical difference is the browser-to-server integration. We no longer experience double AJAX calls. The dialog definition and the content to be rendered in the dialog requests have been replaced by a single, combined AJAX call. The performance gain is noticeable, but don’t ascribe it purely to the lowered number of HTTP calls. It surely makes a difference, but the important upgrade is the HTML rendering part. The call for the dialog in Granite returns you fully usable markup ready to be placed into the page body. Mix and match it with modern CSS stylesheets and you are ready to roll. Your dialog looks nice and shiny with no Javascript magic.

That’s it?

Looks simple, doesn’t it? In fact it is! But as with all new technologies one needs to get familiar with it.

Register for AEMHub 2015 in London on 8-9 September and listen to my lecture on the second day to get to know more:

·       How, using Sling suffixes and URL decomposition, is one HTTP call enough to render the dialog?

·       How can writing a Sling servlet help me building reusable dialog parts?

·       How can I add dynamic behavior to TouchUI dialogs?