Interesting example

[mericson]

Well, after several iterations I was finally succeeded at my goal. Here is the code I think it might be helpful to other n00bs out there.

Basically this implements a hierarchical browser for browsing through an XML strucutre. I wanted to create a browser-pane component that could be easily reused and be very flexible.

Give it a try, and please any more experienced Laszlo developers let me know if there is a better way!


<canvas debug="true" height="200" width="500">

<dataset name="dset">
<data>
<a name="a1">
<b name="a1.b1">a1.b1.text</b>
</a>
<a name="a2">
<b name="a2.b1">a2.b1.text</b>
<b name="a2.b2">a2.b2.text</b>
</a>
</data>
</dataset>

<class name="browserpane" extends="view">
<attribute name="title" type="string"/>
<!-- title displayed above the browserpane -->
<attribute name="txtpath" type="string"/>
<!-- relative xpath for the listitem string -->
<attribute name="childpath" type="string"/>
<!-- relative xpath for children (all the listitems) -->
<attribute name="clickdest" type="expression"/>
<!-- change the datapointer of this node when an item is clicked -->

<simplelayout axis="y" spacing="2" />
<text name="t" text="${parent.title}" fontstyle="bold"/>

<list height="${parent.height - parent.t.height - 2}" width="${parent.width}">
<textlistitem datapath="${parent.parent.childpath}" text="$path{this.parent.parent.txtpath}"
onclick="parent.parent.clickdest.datapath.setPointer(this.d atapath.p)"/>
</list>
</class>

<simplelayout axis="x" spacing="5"/>
<browserpane id="A" title="A" height="100" width="50"
datapath="dset:/data" childpath="a" txtpath="@name" clickdest="$once{B}"/>

<browserpane id="B" title="B" height="100" width="50"
datapath="" childpath="b" txtpath="@name" clickdest="$once{C}" />

<text y="15" id="C" datapath="" text="$path{'text()'}"></text>
</canvas>