Add a touch-optimized dialog (for the YouTube component)

In this short session, you will learn how to add a touch-optimized dialog for the YouTube component. As I mentioned earlier, a touch-optimized GUI is designed for using in hand-held devices, such as iPad, tablets, and so on.

(I have uploaded the package in GitHub. You should use: YouTubeComponent-1.0.3.zip)

Double-click the component that we developed. The dialog you see is called the Classic dialog. It should ideally come up only if you are in the Classic mode. Right now, you are on Touch-Optimized mode; the Classic dialog comes up here, because we have not created a Touch-Optimized dialog.

Let us start working by logging into CRXDE Lite. We will follow the same strategy we used before. Copy and paste a dialog that is already created, and then customize it.

1. Go to /libs/wcm/foundation/components/title/.
2. Copy cq:dialog node from there.
3. Paste the node under the YouTube component.
4. Expand the node.
5. We need only title node here. (We want users to enter only one property; that’s the url.)
6. Delete the other node.
7. Change the following properties to match them with what we entered for Classic dialog:
8. FieldDescription: Enter YouTube URL
9. FieldLabel: YouTube URL
10. Now refresh the page.
11. Select the component and select Edit.
12. Note that the dialog has changed.
13. Now, go to the Classic view and see the dialog.
14. You see the classic dialog. To summarize, cq:dialog is used for Touch-Optimized dialogs. You add various fields to it depending on the requirement. Fields are inherited from granite/ui/components/foundation/form/textfield.

That’s about this session. See you soon.