Setting a Datapath to that of a Replicated Node

[antun]

When developing data-driven Laszlo apps you will often find yourself with a replicated set of nodes that present a high-level view of your data, from which you want to be able to drill-down.

Here we've got some stock information, and we only want to show the user the symbols first. When they click on a symbol, we want to populate a global view with the detailed data of the node that was clicked on. Now of course the most elegant way to do this is to set the datapath of our global view to that of the replicated node.

Before LPS 2.0p, this was cumbersome - either you had to build up the XPATH as a string (impossible with arbitrarily deep data structures), or you had to call a confusing combination of methods.

Now of course, it's much neater:


<canvas debug="true">
<debug y="100"/>
<dataset name="testdata">
<Stocks>
<!--Sample Data-->
<item>
<symbol>MSFT</symbol>
<updated>07/19/2003</updated>
<quote>27.08</quote>
</item>
<item>
<symbol>SBUX</symbol>
<updated>06/15/2001</updated>
<quote>32.64</quote>
</item>
<item>
<symbol>IBM</symbol>
<updated>12/12/2002</updated>
<quote>83.72</quote>
</item>
<item>
<symbol>YHOO</symbol>
<updated>07/19/2003</updated>
<quote>29.90</quote>
</item>
<item>
<symbol>ORCL</symbol>
<updated>06/12/2003</updated>
<quote>12.077</quote>
</item>
</Stocks>
</dataset>

<simplelayout axis="y" spacing="15" />

<text>Click on a stock symbol to view detailed data:</text>

<view>
<simplelayout axis="y" />
<view datapath="testdata:/Stocks[1]/item" clickable="true">
<method event="onclick">
debug.write(this.tickerSymbol.getText())
viewAttributes.datapath.setPointer( this.datapath.p );
</method>
<text name="tickerSymbol" datapath="symbol/text()"/>
</view>
</view>

<view name="viewAttributes" x="20" datapath="" bgcolor="yellow">
<simplelayout/>
<text><b>Detailed Data</b></text>
<view>
<simplelayout axis="x"/>
<text>Symbol:</text>
<text datapath="symbol/text()"/>
</view>
<view>
<simplelayout axis="x"/>
<text>Last Updated:</text>
<text datapath="updated/text()"/>
</view>
<view>
<simplelayout axis="x"/>
<text>Quote ($):</text>
<text datapath="quote/text()"/>
</view>
</view>
</canvas>


Watch out for more new 2.0p features in the coming weeks. Enjoy!