Thursday, 7 May 2015

Using Event Handlers in Adobe Experience Manager Touch UI Components

When developing Adobe Experience Manager (AEM) Touch UI components, handling events is an important task. In AEM 6, the Touch UI APIs do not have event handler methods. For information about the AEM Touch UI APIs, see Granite UI documentation.

As a result, to handle events, use DOM supported events. You can use JQuery to handle events. For example, the following code represents the event handler that is invoked when the Touch UI dialog is opened:

    $document.on("dialog-ready", function() {
        $(window).adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");

This event handler produces an alert message box that appears when the Touch UI dialog is opened, as shown in the following illustration.

This development article discusses how to create a Touch UI component that uses event handlers. To read this development article, click

Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner

I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.

TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel

1 comment:

  1. Two problems:
    1-This action binds to ALL components dialogs in the page ¿how can I bind it specifically to one component dialog?
    2-In my case I have two components that needs to bind "dialog-ready", every one with a different action for it's dialog, unfortunately using this approach both actions gets executed, how can I fix that?
    SO, this is not a correct solution, I guess you never used this in a real example, with more than one component been involved...