First Touch UI Component

Goal :

To create our first Touch UI component.

Steps:

1. Create a component name touchui.
2. Create a node with primary type nt:unstructured name cq:dialog.
1. Property sling:resourceType and value cq/gui/components/authoring/dialog.
3. Create a node with primary type nt:unstructured name content under cq:dialog node.
1. Property sling:resourceType and value granite/ui/components/foundation/container.
4. Create a node with primary type nt:unstructured name layout under content node.
1. Property sling:resourceType and value granite/ui/components/foundation/layouts/tabs.
2. Property type value as nav.
5. Create a node with primary type nt:unstructured name items under content node.
6. Create a node with primary type nt:unstructured name section under items node.
1. Property sling:resourceType and value granite/ui/components/foundation/section.
7. Create a node with primary type nt:unstructured name layout under section node.
1. Property sling:resourceType and value granite/ui/components/foundation/layouts/fixedcolumns.
8. Create a node with primary type nt:unstructured name items under section node.
9. Create a node with primary type nt:unstructured name column under items node.
1. Property sling:resourceType and value granite/ui/components/foundation/container
10. Create a node with primary type nt:unstructured name items under column node.
11. Create a node with primary type nt:unstructured name textfield under items node.
1. Property fieldLabel and value TextField
2. Property name and value ./name.
3. Property sling:resourceType and value granite/ui/components/foundation/form/textfield.

Note :

To develop all types of widgets in touch UI download below dialog implementation

TouchUI Component