Develop a Component in Touch UI
In this tutorials we are going to see How to develop a component in Touch UI (Touch Optimized UI). As the name indicates Touch UI is introduced to make content authoring possible onĀ Mobile devices such as iPad.
Topics covered in this tutorials:-
- Create Project Structure in AEM.
- Create a Template for Touch UI.
- Create a Touch UI Component in AEM.
- Testing Touch UI Component.
- Basic Trouble Shooting for Touch UI Component
Create a Project Structure:
Create a Project structure as shown in previous tutorial.
Your Project Structure should look like below image:
Creating a Template in AEM:
Follow below steps to create aĀ Template in AEM.
- Select Template Folder. Right Click and select create template.
- Enter below details in create template dialog.
- Enter Allowed Path:Ā /content(/.*)?
- Click Next. Click Finish and Save Changes.
For more details: How to create a TemplateĀ in AEMĀ Ā Click here
Creating a Touch UI Component in AEM:
Follow below steps to create redirect component:
- Select ComponentsĀ Folder. Right Click and select create component.
- Enter below details in create componentĀ dialog.
Note:-Ā Entering Super Type is not mandatory in case of classic UI, but for opening a page in touch ui it is mandatory to provide Super Type, JCR internally convert it to sling:resourceSuperType. - Click Next. Click Finish and Save Changes.
- Double click on touchComponent .jsp and replace the jsp code with below code.
<html> <%@include file="/libs/foundation/global.jsp" %> <cq:include script="/libs/wcm/core/components/init/init.jsp"/> <body> <h1>Here is where your Touch UI component will go</h1> <cq:include path="par" resourceType="foundation/components/parsys" /> </body> </html>
Note:-Ā Make sure that if you are creating aĀ page component . It’s sling:resourceSuperType is set to /foundation/components/page as It inherits both dialog and cq:dialog. WhichĀ will solve both the editor.html and page properties issues.
For more details How to create a component in AEMĀ Click Here
Testing Newly Created Touch UI Component:
Now lets test our newly created Touch UI component. Follow below steps to testĀ component in AEM:
- Go to Site Admin.
- Create a New Folder to maintain readability of Project.
- From Top Bar Select New –> New Page.
- Enter Page Name
- Select Template(Touch UI Template)
- For more details viewĀ How to create pages in site admin
- Double click on the Page.
- By default Page will open in Touch UI if you are using AEM 6 or above.
Note:- You can always changeĀ default authoring environment either to classic UI or Touch UI in AEM 6 and above. Click Here to see how to configure default authoring in AEM 6 and above.
- If no components are visible after opening page in Touch UI. Click Here to Learn how to display components in Touch UI.
Basic Trouble Shooting in Touch UI
- If blank/white page is opening in touch ui, make sure that you have added Super Type at the time of creation of the component or sling:superResourceType is present on component Node.
- add sling:superResourceType as parbase if you toĀ inherit attributes from other components. Like if you want your component to be authorable and draggable add parbase to it.So that they can inherit the image and text rendering properties when added to a Paragraph system
If you have any further doubt, Please leave a comment.
Leave a Reply