In this tutorial, 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:
Your Project Structure should look like below image:
Creating a Template in AEM:
Follow the below steps to create a Template in AEM.
· Select the Template Folder. Right, Click and select create a template.
· Enter the below details in create template dialog.
· Enter Allowed Path: /content(/.*)?
· Click Next. Click Finish and Save Changes.
Creating a Touch UI Component in AEM:
· Select Components Folder. Right, Click and select create component.
· Enter the 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.
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 the below code.
1
2
3
4
5
6
7
8
| <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?
Testing the Newly Created Touch UI Component:
· Go to Site Admin.
· Create a New Folder to maintain the readability of the Project.
· From Top Bar Select New –> New Page.
§ Enter Page Name
§ Select Template(Touch UI Template)
· 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 the 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.
Note:- You can always change the 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.
Basic Trouble Shooting in Touch UI
· If the blank/white page is opening in Touch UI, make sure that you have added Super Type at the time of the creation of the component or sling:superResourceType is present on the component Node.
· add sling:superResourceType as par base 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.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.