New UI component availability

[javanaut]

At a recent talk on LPS I'm pretty sure that the speaker said that there is an upcoming release of UI components that will be an alternative or a supplement to the Redmond UI components. Can you confirm and elaborate on this? At the time I didn't know that I would become so interested in LPS or I would have pressed for more details! :)

[antun]

You're right - there's going to be a far more robust set of components in the next release. There will be more than just those provided by the Redmond components set, and they will have plenty of useful features, such as keyboard navigation and so forth.

-Antun

[javanaut]

Would a robust data grid component be one these new components?

[antun]

Not as far as I know.

I've never understood how a data grid component would be useful in Laszlo, seeing as it's so easy to create your own data grid using replicated views.

-Antun

[javanaut]

What are replicated views? I wanted to display the following in a grid that looked like a grid:

<canvas>
<dataset name="holdings">
<bonds>
<bond>
<cusip>000325AA</cusip>
<issuercode>FHLB</issuercode>
<coupon>3</coupon>
<maturity>30-JUL-08</maturity>
</bond>
<bond>
<cusip>000336AE</cusip>
<issuercode>000336</issuercode>
<coupon>6.88</coupon>
<maturity>01-JUN-08</maturity>
</bond>
<bond>
<cusip>00204AAF</cusip>
<issuercode>00204A</issuercode>
<coupon>2.06</coupon>
<maturity>20-MAY-06</maturity>
</bond>
<bond>
<cusip>00204CAA</cusip>
<issuercode>00204C</issuercode>
<coupon>6.75</coupon>
<maturity>01-APR-06</maturity>
</bond>
<bond>
<cusip>00203YAC</cusip>
<issuercode>00203Y</issuercode>
<coupon>8.84</coupon>
<maturity>25-FEB-32</maturity>
</bond>
<bond>
<cusip>00203YAE</cusip>
<issuercode>00203Y</issuercode>
<coupon>9.5</coupon>
<maturity>15-AUG-31</maturity>
</bond>
</bonds>
</dataset>
<view name="outercontainer" bgcolor="0xe5e5e5" width="500">
<simplelayout axis="y"/>
<view name="datarow" datapath="holdings:/bonds[1]/bond">
<text datapath="cusip/text()" x="10"/>
<text datapath="issuercode/text()" x="130"/>
<text datapath="coupon/text()" x="200"/>
<text datapath="maturity/text()" x="250"/>
</view>
</view>
</canvas>

I tried placing each column in its own view within the outercontainer view but all I got was the last bond. So how could I use replicated views to display results in a grid? I saw the reference to replicated views or clones but it was not clear to me how this could help me. Thanks in advance.

[antun]

When I ran your example, it looked like a grid to me, it just didn't have gridlines. They're easy to add:


<view name="gridborder" bgcolor="0x000000" width="${rows.width+4}"
height="${rows.height+4}" x="10" y="10">
<view name="rows" y="2" x="2">
<simplelayout axis="y" spacing="2" />
<view name="datarow" datapath="holdings:/bonds[1]/bond">
<simplelayout axis="x" spacing="2" />
<text datapath="cusip/text()" width="100"
bgcolor="0xe5e5e5" />
<text datapath="issuercode/text()" width="100"
bgcolor="0xe5e5e5" />
<text datapath="coupon/text()" width="50"
bgcolor="0xe5e5e5" />
<text datapath="maturity/text()" width="100"
bgcolor="0xe5e5e5" />
</view>
</view>
</view>


-Antun

[javanaut]

Thanks Antun! That certainly looks like a grid. Now could you explain what a replicated view is and how that could be used to create a grid?

[antun]

A replicated view is the view named "datarow" above, i.e. this view:


<view name="datarow" datapath="holdings:/bonds[1]/bond">


... gets replicated because its datapath matches more than once.

Essentially that view becomes an instance of the LzReplicationManager:

http://www.laszlosystems.com/developers/learn/documentation/lzxref/replicationmanager.php

This instance allows you to talk to individual clones of the view. For example,


datarow.getCloneNumber(2)


... would return a pointer to the 3rd clone (i.e. the 3rd row), which is a view, so you could use that to call methods on individual rows.

You could also get a lot fancier if you wanted a grid with more features - for example you might want resizeable columns. In that case you would constrain the widths of the "cells" to something outside of the replication manager, and manipulate that at runtime (see the contacts sample app for more).

-Antun