Strange, frustrating problem with data and states.

[RoloDMonkey]

I have spent almost two hours trying to figure this out. It doesn't make any sense. It appears to be a bug, but maybe somebody can help with this. I am using 3.3.3. Here is a distilled version of the code:

<canvas width="100%" proxied="false" height="100%" debug="true"
bgcolor="#FFFFFF">

<dataset name="pagedata" src="xml/professional_furnishings.xml" />

<datapath xpath="pagedata:/page">
<handler name="ondata">
Debug.write(this.xpathQuery("@content_size"));
// canvas.applyState(this.xpathQuery("@content_size"));
</handler>
</datapath>

<state name="small_state">
<handler name="onapply">
canvas.setAttribute("bgcolor", 0xFFDDDD);
</handler>
</state>

<method name="applyState" args="s">
canvas.small_state.apply();
</method>

</canvas>

If I run it as is, the background is white and the word 'medium' is printed to the debug window.

If I remove the comment from this line:

canvas.applyState(this.xpathQuery("@content_size"));

Then I get this in the debug window:

medium
WARNING: content_size.lzx:20: reference to undefined property 'small_state'
WARNING: content_size.lzx:20: undefined object does not have a property 'apply'

And the background color is still white.

What the hell is going on? This is seriously delaying my project. If this is a bug, is there a work-around? Help!

[RoloDMonkey]

After more research, it appears that this is a timing issue. Both the state and the datapath are children of the canvas. However the datapath is "special" and it is instantiated earlier. Apparently the ondata event is fired off during instantiation. I tried adding initstage="defer" to the datapath, but I still got the same errors.

What I am trying to do is to have the canvas look different based on an attribute in the XML file. I have heard that it is a good idea to use states for this kind of thing, but obviously I am having trouble with this. Is there a better way to do this?

P.S.

If you are getting similar error messages, check out Appendix A of the Developer's Reference:

http://www.openlaszlo.org/lps/docs/guide/initialization-and-instantiation.html

[notzippy]

The only way I have had any success on this is to use a view and overlay the canvas with the view.
You may also want to look at the "style" class...

[RoloDMonkey]

I am experimenting with nesting a view to solve this problem right now.

I like the style class, but one thing I left out is that I want to do more than just change colors. I actually want the state's onapply method to trigger a series of animations that will change the layout of the content. It is all rather complicated, but it looks really neat. I will try to post a working example later.

[RoloDMonkey]

In the end I decided that states were not the appropriate solution to what I wanted to do. In case anyone comes across this thread based on a search I have attached my final solution to this problem. Take a look and let me know what you think.