Building a Touch UI dialog with Zen Garden

13 April 2016
Piotr Wilczynski
Frink_Cognifide_2016_HeaderImages_0117

ZenGarden_Stacked_rgb-fbAs touch screen devices of all shapes and sizes continue to proliferate in our lives, Touch UI is evolving, with the content author in mind, to enable easy content updates on any touch device.

The benefits of Touch UI for busy, multi-tasking authors are clear.  Touch screens are easier to use on the move, quicker to respond, simpler to view and operate on small devices, and more accessible to those with any physical issues that make a traditional mouse and keyboard option more of a challenge.

However, when Adobe introduced a new, mobile-friendly Touch UI with AEM 5.6, it was not readily or widely adopted.  In fact, it's only really now that we are seeing more widespread adoption with the introduction of many new features in AEM 6.1 such as responsive design and Granite components instead of Ext JS.  So we're doing everything we can to make conversion from Classic to Touch UI easier through our flagship site production accelerator, Zen Garden, which makes content authoring faster and more intuitive.

Zen Garden contains numerous dialogs so we've investigated a couple of different conversion approaches.

The easiest way to convert a Classic dialog to a Touch dialog is to take advantage of Adobe's Dialog Conversion Tool: cq-dialog-conversion-content-1.0.0.zip which is available and detailed in their documentation: Dialog Conversion Tool.  You simply have to do the following:

  • open the tool page
  • search for the dialog in /apps path
  • select the desired dialog
  • click convert button

In the case of a simple title component, the result will look something like this:

image2016-2-10 13-50-9

The new Touch UI dialog is built using sling:resourceType instead of xtype(e.g. sling:resourceType="cq/gui/components/authoring/dialog” ) and uses a separate file ("_cq_dialog.xml"), so the Classic and Touch versions will look very different.  If no Touch UI dialog has been provided - the Classic dialog will be used as a fallback.

The Touch UI dialog must be built using containers and within them you can use:

  • Layout - which describes how to render items inside the container (if not specified, a default one is selected).
  • Items - the items can be either specified literally using items subresource, or dynamic items using datasource.

However, dialogs created by this conversion tool will still feature extra containers which waste space. In the case of our title component, the 'general' tab is redundant.  This is where Zen Garden comes in.  We simplify the dialog for you, getting rid of any unwanted containers.  In Zen Garden, the new Touch UI dialog looks like this:

title

And so the new title component looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Title"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/textfield"
                        fieldDescription="If left empty, falls back to Navigation Title, then Page Title, then Title (Page Properties, Basic tab)"
                        fieldLabel="Title"
                        name="./title"/>
                    <headerSize
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/select"
                        fieldLabel="Header Size"
                        multiple="{Boolean}false"
                        name="./headerSize">
                        <items jcr:primaryType="nt:unstructured">
                            <h1
                                jcr:primaryType="nt:unstructured"
                                text="H1"
                                value="h1"/>
                            ...
                        </items>
                    </headerSize>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

We're constantly innovating and updating Zen Garden to speed up site production and to make life easier for content authors on AEM. In fact, the latest release, Zen Garden 4.1 Fluorite is out now. Now Touch UI really is a viable alternative.

twitter img