Is it possible to directly access the div of a view in the OpenLaszlo DHTML runtime?

问题

Is there a public API for accessing the HTML div object of an OpenLaszlo view in the DHTML runtime? There doesn't seem to be an example for that in the OpenLaszlo documentation, but technically it should be possible.

回答1:

When the DHTML runtime was created, the OpenLaszlo team decided to hide the implementation details of the HTML div structure from the developer using LZX. While it's not recommended to directly access the underlying object structure of views, there are situations where you have to do it - but it might break your application with future updates of the platform.

Take the following simple example application:

<canvas debug="false">

  <view name="v1" x="10" y="10" width="100" height="100" bgcolor="red">
  </view>

</canvas>

If you compile the application using the query string

lzoptions=proxied(true)%2Cruntime(dhtml)&target=html

you will just get the application without the developer console. Now, when you inspect the page structure, you will see the following div structure:

<body>
  <div id="appcontainer" style="height: 100%; width: 100%; margin: 0px; padding: 0px; border: 0px none; overflow: hidden; text-align: left; ">
    <div class="lzappoverflow" style="width: 1905px; height: 429px; ">
      <div class="lzcanvascontextdiv" id="lzcanvascontextdiv">
        ...
      </div>
      <div class="lzcanvasdiv">
        <!-- visual part of view instance with id="v1" -->
        <div class="lzdiv" style="background-color: rgb(255, 0, 0); height: 100px; width: 100px; left: 10px; top: 10px; z-index: 2; "></div>
      </div>
    </div>
  </div>
</body>

I've removed the CSS information and added the comment to mark the div representing the view with id=v1. You don't see any div with the id value 'v1', since the view instances are instantiated as JavaScript objects storing a reference to the visual presentation. You can access the div by calling

v1.getDisplayObject()

which will return

<div class="lzdiv" style="background-color: rgb(255, 0, 0); height: 100px; width: 100px; left: 10px; top: 10px; z-index: 2; "></div>

The object hierarchy of a view is *view->sprite->__LZdiv* property. That means, for each view OpenLaszlo instantiates a runtime specific sprite object, which in turn generates the corresponding div for the DHTML runtime.

v1.sprite.__LZdiv.style.backgroundColor "rgb(255, 0, 0)"

Here are the links to the implementations of the LzView and LzSprite class, if you are interested to learn about the internals:

来源：https://stackoverflow.com/questions/11921849/is-it-possible-to-directly-access-the-div-of-a-view-in-the-openlaszlo-dhtml-runt

标签

dhtml

openlaszlo