Question

Suppose, that I need to have a HTML control inside my Flex/AIR app.

The user should be able to click somewhere into the currently rendered HTML-page and the flex app should know, which DOM element the user clicked.

Ideally, the app would be able to retrieve the DOM path of the selected element. Posting back the innermost surrounding DIV-element to some Flex/AIR method would be fine too.

Q: Does flex provide something in the framework for this task? Or do you know of sample code?

Answer 1

You add a callback to the window property of the HTMLLoader within the HTML element. A quick example (using jQuery for expediency):

HTML page here: http://fiddle.jshell.net/w23Xx/1/show/ (Source here)

Flex code:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function html1_creationCompleteHandler(event:FlexEvent):void
            {
                // Add the click callback
                html.htmlLoader.window.flexClickCallback = function(element:Object):void
                {
                    trace("Element ID:", element.id);
                };
            }

        ]]>
    </fx:Script>

    <mx:HTML id="html" location="http://fiddle.jshell.net/w23Xx/1/show/" left="10" right="10" top="10" bottom="10" creationComplete="html1_creationCompleteHandler(event)" />

</s:WindowedApplication>

I believe you can add listeners directly, but this shows how you access the page’s window.

Edit:

Mike Chambers posted an example of doing DOM manipulation directly within the AS of an AIR app.