Touching the AEM component dialogMateusz Chromiński

Curiousity

Pre-AEM 6.0

Pre-AEM 6.0

/content/page/jcr:content/parsys/component.infinity.json

{    "jcr:primaryType":"nt:unstructured",   "property1":"value1",   "nested":{       "jcr:primaryType":"nt:unstructured",      "property2":"value2",

{    "jcr:primaryType":"cq:Dialog",   "title":"My Component",   "xtype":"tabpanel",   "items":{       "jcr:primaryType":"cq:WidgetCollection",

/apps/myApp/myComponent/dialog.infinity.json

Pre-AEM 6.0

"xtype":"cqinclude"

Pre-AEM 6.0

/apps/components/list/_cq_dialog.html

/content/page/jcr:content/list

granite/ui/components/foundation/form/select

TouchUI

GET /apps/components/list/_cq_dialog

.html/content/page/jcr:content/list

?resourceType=components%2Farticle

query parameter

suffix

extension

resource path

content link

dialog rendering

component resource type

request.getRequestPathInfo().getSuffixResource()

URL decomposition

Stores user data

Widget

AEM authoring

sling:resourceType

Content

Defines form field HTML markup

DialogLists all dialog field types with content links

• @SlingServlet(resourceType=...

Sling servlets• /bin/app/myServlet.json

Resource scripts• /apps/myApp/component/component.jsp

Resource Resolution

<selection jcr:primaryType=”nt:unstructured” sling:resourcetype=”granite/ui/components/foundation/form/select” fieldLabel=”Select one”> <items jcr:primaryType=”nt:unstructured”> <item_0 jcr:primaryType=”nt:unstructured” text=”Option 1” value=”value1”/> <item_1 jcr:primaryType=”nt:unstructured” text=”Option 2” value=”value2”/>

Datasource - static

<selection jcr:primaryType=”nt:unstructured” sling:resourcetype=”granite/ui/components/foundation/form/select” fieldLabel=”Select one”> <datasource jcr:primaryType=”nt:unstructured” sling:resourceType=”cq/gui/components/projects/admin/datasource/gadgetdatasource”>

/libs/cq/gui/components/projects/admin/datasource/gadgetdatasource/gadgetdatasource.jsp

<%@include file=”/libs/foundation/global.jsp”%><%

...

request.setAttribute(DataSource.class.getName(), ds);%>

Datasource – dynamic

@SlingServlet(resourceTypes = { ”touch/components/datasource” })public class DataSourceServlet extends SlingSafeMethodsServlet {

@Override protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {

List<Resource> resources = new ArrayList<>(); List<MyItemModel> items = getItems(); for (MyItemModel item : items) { ValueMap valueMap = new ValueMapDecorator(new HashMap<>()); valueMap.put(”value”, item.getValue()); valueMap.put(”text”, item.getText());

resources.add(new ValueMapResource(request.getResourceResolver(), new ResourceMetadata(), JcrConstants.NT_UNSTRUCTURED, valueMap); } DataSource dataSource = new SimpleDataSource(resources.iterator()); request.setAttribute(DataSource.class.getName(), dataSource); }}

Datasource on servlet

@SlingServlet(resourceTypes = { ”touch/components/widgetInclude” })public class WidgetIncludeServlet extends SlingSafeMethodsServlet {

@Override protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException, IOException {

Resource finalResource = getFinalResource(request); if(finalRequest == null) { response.sendError(404); } else { RequestDispatcher dispatcher = request.getRequestDispatcher(finalResource); dispatcher.include(request, response); }

}}

Include through servlet

Front-end

CoralUIStyling

jQueryDynamic

Classic UI Touch UI

Data return format JSON HTML

Data rendering way infinity.json JSP / Sling rendering

HTTP dialog calls 2+ 1

Processing side Front-side Back-end

Styling ExtJS Coral

Dynamic ExtJS hooks jQuery

Comparison

Mateusz ChromińskiSenior Software Engineer @ Cognifide

mateusz.chrominski@cognifide.com mateusz_chrominski

Thank you