How to get a view based on coordinate in openlaszlo?

Question

In JavaScript we have document.elementfrompoint to get an element based on coordinates. Is there any thing like that in Openlaszlo to get a view based on coordinate?

Answer 1

There is no direct support for that functionality in OpenLaszlo, but for ActionScript 3 based runtimes you can utilize the flash.display.DisplayObjectContainer#getObjectsUnderPoint() method. In the DHTML runtime, you can use the document.elementFromPoint(x, y), and based on Quirksmode that should be supported by all modern browsers.

Here is an example program implementing an canvas.elementFromPoint() method:

<canvas debug="true">

    <passthrough when="$as3">
        import flash.geom.Point;
    </passthrough>

    <view id="background" width="100%" height="100%" bgcolor="#eeeeee" clickable="true"/>

    <view id="red" x="200" y="100" width="200" height="200" bgcolor="#ff0000" opacity="0.3" clickable="true" />
    <view id="green" x="150" y="200" width="200" height="200" bgcolor="#00ff00" opacity="0.3" clickable="true"/>
    <view id="blue" x="250" y="200" width="200" height="200" bgcolor="#0000ff" opacity="0.3" clickable="true"/>

    <handler name="onclick" reference="lz.GlobalMouse">
        canvas.elementFromPoint();
    </handler>

    <method name="elementFromPoint"><![CDATA[
        var mouseX = canvas.getMouse('x'),
            mouseY = canvas.getMouse('y'),
            objects = null,     // array of objects at mouse pointer in SWF runtime
            element = null;     // The element we are looking for
        Debug.info( 'mouse position: x=' + mouseX + ' / mouseY=' + mouseY );
        if ($as3) {
            // in SWF runtime, use the DisplayObjectContainer.getObjectsUnderPoint() method
            objects = canvas.getDisplayObject().getObjectsUnderPoint(new Point(mouseX, mouseY));
            element = objects[objects.length-1].owner;
        } else {
            // in DHTML, we can use elementFromPoint, and need to retrieve the owner view of the div
            element = document.elementFromPoint(mouseX, mouseY).owner.owner;
        }
        Debug.info('View under mousecursor:', element);
        return element;
    ]]></method>

</canvas>

There are 4 views, one background view scaled to 100% x 100%. And three color views: red, green and blue - with the blue one being the top one. When clicking on the view, the correct view object is returned.

The code has been tested in the DHTML runtime with Chrome 22.0, Firefox 16.0.1, and Opera 12.02. Flash should work in every browser, I haven't tested with IE.