Touch UI Dialog Structure

While creating dialog for Touch UI, we are creating nodes in the name of cq:dialog, content, layout etc via "Create node" unlike an option named "Create dialog" for classic view.
Each of this has resourceType/Granite UI component associated.

cq:dialog cq/gui/components/authoring/dialog
content granite/ui/components/foundation/container or granite/ui/components/coral/foundation/container
layout Granite UI has many layouts available. Most frequent being fixedcolumns, tabs with section
items plain nt:unstructured node.Required dialog fields can be defined under this node.

Below is the screenshot of Touch UI dialog containing two textfields with fixedcolumn layout.


Highlighted in Red:

  • cq:dialog:
    • Logic/markup defined in cq/gui/components/authoring dialog wherein it includes the resources under the node named content.
    • This is the reason why we create node named content under cq:dialog. 

Highlighted in yellow:

 content: 
    • Logic defined in granite/ui/components/foundation/container or granite/ui/components/coral/foundation/container which includes the resources defined under it within a single div tag per the layout definitions.
    • granite/ui/components/coral/foundation/container has two additional attributes that can be added to content node. 
      • margin -> true (boolean) -> in the UI, we can observe additional space below the grey line and the dialog fields.
      • maximized -> true (boolean) -> no visible difference as with below example as similar CSS properties are handled in outermost class (the one with div framed via container component/content node)
  • layout:  granite/ui/components/foundation/layouts/fixedcolumns
    • It doesn't has any visible difference in UI as compared to tabs layout in desktop. 
    • Per the documentation, it will be useful for rendering dialog fields as columns in tablet landscape view. (I haven't tried this, so couldn't produce a screenshot)
  • items: 
    • Fields needed goes under this but not directly. Instead, via another container. ie. 
      • items-> content(granite or coral container) -> items
    • as mentioned above, div gets framed for the entire set of dialog fields that we include under container/items (with some padding via the class in the div it frames) - screenshot A for reference.
    • I tried adding the fields directly under items (ie. without container -> result can be evident from screenshot B.)
By the term "includes the resources" mentioned above, trying to imply that it uses Granite's ComponentHelper API(com.adobe.granite.ui.components.ComponentHelper) and sling:include resource (this in particular on ../coral/foundation/container)

Screenshot A: surrounding div for two dialog fields with respective CSS


Screenshot B: No surrounding div  for the two dialog fields as highlighted and hence the impact on UI



This is with basic structure of touch UI dialog.
Coming up next : Minor difference on coralui2 based textfield and coralui3 based textfield (used in this post) in a collapsible layout.
Reference: Official AEM docs, Adobe helpx links on Granite UI.

P.S : This blog share is not from a teaching standpoint, just in thought of sharing my learnings. Request you all to highlight any suggestions/corrections if any.

Comments

Post a Comment

Popular posts from this blog

Embedding Third party dependency/OSGi bundle in AEM application hosted in AEMasCS

Image
This post illustrate the ways of embedding third party dependency in AEM maven project. Steps are mentioned considering the project structure to be followed for AEMasCS while the same can be followed for classic versions too.  Before we begin, I would like to explain the scenario of including a dependency in our AEM maven project.  When we would like to make use of an API that is not already available in our project, we look for that in maven-central repository and specify the dependency in main pom.xml and desired module's pom.xml file. (Lets say, AWS S3 Java SDK V2 dependency) Upon updating the project in the IDE, we would see our class files (making use of those APIs) are compiled/build successfully without any errors.  Now, in the context of AEM/OSGi environment, when the same package and hence the bundle is deployed to AEM instance, dependencies that we added new might not be resolved/available in the OSGi as a bundle. Something like the below This indicates that the added dep
Read more

OSGI Factory Configuration implementation

OSGI Factory configuration is used to have many instances of an OSGI config (represented/identified via an identifier) for the single OSGI service/PID. Most often used OOB Factory configurations for example: Logger Factory/writer configuration (for log statements) Service user Mapper service Amendment (for using service resource resolver in projects) Few sample real time use case for the need of OSGI factory config: For multi tenant projects, if we have generic service used across tenants with properties/attributes specific to tenant. For single tenant, generic service targeting all locales with properties/attributes specific to locale. (where generic service -> holds logic in the lines of calling third party service for retrieving/updating information.) Implementation: ( In terms of OSGI R6 annotations ): Create Object Class Definition(OCD) defining desired properties for the OSGI service. - OSGIFactoryConfigOCD.java OSGI Service/Factory service to retrieve
Read more

Creation of Template Types for Editable templates

Image
In this post, we will create templates types which is the base for creating editable templates. Before getting to the subject directly, have added an introduction about templates in general. Template is the base for creating pages. Starting AEM 6.2, we have categorisation for templates - Static and Editable templates. Static templates :  This has been available for several versions of AEM/CQ Created using "Create Template" option with base page component as resourceType (which is responsible for rendering the page structure).  Template ( base page component as resourceType ) -> Page This cannot be edited as such. Since it just holds a reference to base page component, any changes to the page (other than authorable components), would need a change in base page component which is ultimately a work of developer. (calls for a code change) Allowed components are configured using Design mode (list being saved to etc/designs/projectfolder/templatename/jcr:content)
Read more