Mapping datasets to widgets directly

[taboca]

Can I map a dataset to populate widgets?

For instance instead:
<dataset name="dset" src="adlist.xml"/>
<simplelayout axis="y"/>
<view name="list" datapath="dset:/adlist/item">
<simplelayout axis="x"/>
<text datapath="@image"/>
</view>

I want to set a collection of views to use @image which is the src.

[antun]

Sure - that's what the Weather app does (here's the full source):

http://www.laszlosystems.com/lps-v1/viewer/viewer.jsp?file=/sample-apps/weather/weather.lzx

Basically in the Weather app there's custom class named "image":


<class name="image">
<method name="applyData" args="d">
if (d == null) { return; }
setSource( d );
</method>
</class>


The only tricky thing with images is that you have to overwrite a view's applyData() method. This is a "magic" method that gets called whenever the data mapped to a view changes, and it's called with an argument of the data. So if you give the image a datapath that resolves to a URL, then you can play with that URL inside the method. The setSource() method is being called above.

That class can be instantiated as follows:


<image name="icon" width="32"
height="32" stretches="both" x="1" y="1"
datapath="@imageurl" />

[taboca]

All right Antun,

I see that really works. Thanks a lot. For reference and to help other developers I am including here the sample I created based on your help. I wanted to load images based on data stored in XML file (list of items with filenames) and then be able to manipulate and access them via JavaScript. Here is my XML file:

<adlist>
<item image="logo.gif" />
<item image="aolbg1.jpg" />
</adlist>

So I created a class that is called "imagex" and extends the view. The method applyData sets its source.

<class name="imagex" extends="view">
<method name="applyData" args="d">
if (d == null) { return; }
setSource( d ); // setsource http://www.laszlosystems.com/developers/learn/documentation/lzxref/view.php
</method>
</class>

A dataset element has the reference to an XML file:

<dataset name="dset" src="adlist.xml"/>

Then I have a view element that represents the collection of images that I want to load. And inside it, another view element has a datapath. So multiple views will be created one for each item of the XML datasource.

<view name="collection" x="50" y="50">
<view datapath="dset:/adlist/item">
<imagex datapath="@image"/>
</view>
</view>


And for each view created, there is an imagex which is actually a view that gets loaded with the src images from the XML file (the @image attribute).

[taboca]

Forgot to add a point.

What is nice is the fact that via doing that, we can later on use

collection.subviews[x] to access and manipulate the array of element items.