modifying a <view> datapath attribute at runtime to create a slideshow?

[lyndonwong]

Hi Antun,

I've been struggling with how to create a little slideshow 'blog widget' that cycles through a series of jpg images as defined by a list in an external XML file.

What is the simplest approach, and am I on the right track in the code below? I would like to increment the node number of the datapath attribute of the 'slidewindow' view in some manner. Right now, everything works as I wish, but I must edit that node number manually (not!!). Can you show me how to do this automatically, preferably in an infinite loop?

thx -- lww

slideshow.lzx ---------------------------------------------
<canvas width="184" height="584" debug='false'>

<!-- RESOURCES -->

<font name="serif" src="timmonsr.ttf" />
<font name="san" src="helmetr.ttf" />


<!-- App parameter values in an external XML file -->
<dataset name="slideshow_list" src="slideshow_list.xml" />

<!-- APP INTERFACE -->

<!-- Widget border created via two nested views -->

<view x="3" y="3" width="180" height="580" bgcolor="gray" >

<view width="178" height="578" x="1" y="1" bgcolor="black" datapath="slideshow_list:/slideshow/" >

<simplelayout axis="y" />
<text x="29" y="2" height="22" font="san" fontsize="14" width="170" fgcolor='green' datapath='title/text()' />

<!-- Display slideshow image data -->
<view name='slidewindow' x="29" width="170" clip="true" font="serif" fontsize="12" datapath="image[1]/">

<simplelayout axis="y" />

<view name="photo" width="120" height="90" stretches="both" datapath="path/text()">
<method event="ondata">
this.setSource( data );
</method>
<animatorgroup process="sequential" >
<animator attribute="opacity" from="0" to="1" duration="750" relative="false" />
<animator attribute="opacity" from="1" to="1" duration="2000" relative="false" />
<animator attribute="opacity" from="1" to="0" duration="750" relative="false" />
</animatorgroup>
</view>

<!-- <view resource="img02.jpg" /> -->

<text name='imgTitle' fontsize="14" fgcolor='green' width="166" datapath="caption/text()" />
<text name='imgPathValue' fontsize="10" fgcolor='gray' width="166" datapath="path/text()" />

</view>
</view>
</view>
</canvas>

slideshow_list.xml ---------------------------------------
<slideshow>
<title>Southeast Asia</title>
<image>
<caption>An infant</caption>
<path>img01.jpg</path>
</image>
<image>
<caption>Infant's mother</caption>
<path>img02.jpg</path>
</image>
<image>
<caption>Toraja Grandma</caption>
<path>img03.jpg</path>
</image>
<image>
<caption>Hmong Kids</caption>
<path>img04.jpg</path>
</image>
<image>
<caption>Toraja Farmer</caption>
<path>img05.jpg</path>
</image>
</slideshow>

[antun]

Let's leave the fading out of this for a minute. You have the right idea - change the datapath of the view using XPath syntax to change the photo. To change the datapath, you use the setDatapath() method of a view. Right now you can only set a full XPath this way (you can't just change the "image[x]" part. So the logical thing to do would be to

To do this automatically, you need to set a timer. See here for more on that:

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=138&highlight=lzdelegate

So here are the changes I made to go with the black view with a datapath of slideshow_list:/slideshow/:


<attribute name="slide_number" type="number" value="1" />

<method name="changePhoto">
this.slide_number++;
var dp = 'slideshow_list:/slideshow/image['
+ this.slide_number + ']';
this.slidewindow.setDatapath( dp );
this.setDelay();
</method>

<method name="setDelay">
this.photoDel = new LzDelegate( this, 'changePhoto' );
LzTimer.addTimer( this.photoDel, 2000 );
</method>


-Antun