Openlaszlo DHTML custom cursor issue

Question

I am currently migrating my swf 10 OL 5.0 code to DHTML runtime and i am facing this problem.

I am not able to set a custom cursor for a view that i am dragging. Then i found that the code that is given in the documentation is also not working. The following code is running fine in swf 10 runtime but its not working in DHTML runtime.

I have attached the sample code

<canvas height="30">
   <resource name="waitcursor" src="wait.png"/>
   <view bgcolor="yellow" cursor="waitcursor">
     <text>Roll over to change the cursor</text>
      <handler name="onmouseover">
       lz.Cursor.showHandCursor(false);
      </handler>
   </view>
 </canvas>

I am able to see only a normal cursor. I tried changing the cursor through javascript but also didn't work. I figured out that the sprite event class is managing this and its not possible to work it out with javascript.

I am currently testing this in 5.0 version and using Firefox 16.0 Windows.

Answer 1

You are using the wrong name for the resource. When manipulating the mouse cursor in DHTML, the name of the resource is directly used as a value for the CSS property cursor .

This code works as expected:

<canvas height="500">

    <!-- The name attribute used here is directly set as a CSS property
         cursor: {value of name property}. -->
    <resource name="wait" src="cursor_wait.png"/>

    <view bgcolor="yellow" cursor="wait">
        <text>Roll over to change the cursor</text>
        <handler name="onmouseover">
            lz.Cursor.showHandCursor(false);
        </handler>
    </view>

</canvas>

Have a look at the W3C Wiki documenting the CSS property cursor and the allowed values . The allowed values are:

[ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit

Your code sets the cursor value to cursor: waitcursor , and the browser cannot recognize that value. This limitation is mentioned in the developer guide as well, Chapter 31: Input devices and gestures :

With OpenLaszlo 4, you can set custom cursors in DHTML and SWF. If you plan to use custom cursors across DHTML and SWF, be sure you're using appropriate cursor IDs for DHTML (see http://www.quirksmode.org/css/cursor.html for more info), and make sure you've included resources named after those IDs for SWF.