table display of repeating values

[felasfa]

Does anyone know how to make a table display from a list of items - without writing a script to place each item with specific coordinates ?.

In other words, how to display, say, 5 items (presumably with a "simplelayout") on a line then start a new line.

All the examples I have seen for "grid" display specify each column specifically - usually as attributes of a node.

I want to display an XML node at each cell taking advantage of LZX layouts (i.e. ability to resize, etc.) without having to loop a datapointer through my dataset and creating a subview at (x,y) for each element.

I'm surprised this hasn't come up as a question/feature yet. Anybody have a suggestion ?

thank you.

[hqm]

You can have a view which contains a vertical layout (axis="y") and it can contain child views who contain layouts which are horizontal (axis="x"). Each child view could contain five views which are placed out horizontally by the horizontal layout, which would cover the case you are
asking about, I believe.



<view>
<simplelayout axis="y"/>
<view>
<simplelayout axis="x"/>
<text>foo</text>
<text>bar</text>
...
</view>
...
...
</view>

[felasfa]

thanks for the reply.

The problem with that solution (which is what is proposed in the LZX docs) is that it does not work for dynamically filled tables.

In other words, if you obtain an XML document via HTTP, it's not obvious how you could iterate through the items (i.e. nodes) and populate the tables, say five items per row.

It would also be useful to be able to set the number of columns dynamically, if the user resizes the window, for example.

What I guess I would like is a <layout> class where one specfies the number of columns per row, as well as x & y spacing then simply assign it a "datapath" to dynamically populate a table.

[antun]

Could you give an example of the kind of data you mean?

I'm sure you'd have to write a little procedural logic to deal with varying numbers of columns, but there would probably be an elegant way of doing it so the code was reusable.

-Antun

[felasfa]

sure, here is a simple example


<canvas>
<dataset name="my_data">
<items>
<item name="1">item 1</item>
<item name="2">item 2</item>
<item name="3">item 3</item>
<item name="4">item 4</item>
<item name="5">item 5</item>
<item name="6">item 6</item>
<item name="7">item 7</item>
<item name="8">item 8</item>
<item name="9">item 9</item>
<item name="10">item 10</item>
<item name="11">item 11</item>
<item name="12">item 12</item>
<item name="13">item 13</item>
</items>
</dataset>
<view bgcolor="0xe5e5e5" >
<simplelayout axis="y" spacing="5" />
<view width="500" >
<simplelayout axis="x" spacing="5"/>
<view bgcolor="0xffffff" width="25" datapath="my_data:/items/item">
<text datapath="@name" resize="true"/>
</view>
</view>
</view>
</canvas>



this is the basic way of displaying data I'm familiar with - using a "datapath" to get a set of nodes and allowing "simplelayout" to display them horizontally or vertically.

In this example, the numbers 1 - 13 get written out in a single line.

What I want, though, is to write them in, say, 3 lines of four items each.

The line of code stating "<simplelayout axis="y" ..." is obviously ignored in this example.

Even to write a simple procedure using a datapointer and iterating through the nodes, I'm stumped since I don't seem to grasp how to instantiate a veiw (or custom class) and place it on the "stage" at a certain (x,y).

It seems like a simple problem but I've haven't been able to crack it.

Any ideas ? (curious to see what tricks you pull out this time !)

thanks.

[antun]

I pondered over this for quite some time. I thought that maybe the way to do this was to have a class that dynamically set the datapath of individual rows by calculating the start and position, so that you would be setting an XPath with a range (e.g. item[1-4] for the first row).

Then I realized there's something that does something similar to what you want already - a wrappinglayout:


<canvas>
<include href="utils/layouts/wrappinglayout.lzx" />
<dataset name="my_data">
<items>
<item name="1">item 1</item>
<item name="2">item 2</item>
<item name="3">item 3</item>
<item name="4">item 4</item>
<item name="5">item 5</item>
<item name="6">item 6</item>
<item name="7">item 7</item>
<item name="8">item 8</item>
<item name="9">item 9</item>
<item name="10">item 10</item>
<item name="11">item 11</item>
<item name="12">item 12</item>
<item name="13">item 13</item>
</items>
</dataset>
<view bgcolor="0xe5e5e5" >
<view width="120">
<wrappinglayout horz_spacing="5" vert_spacing="2"/>
<view bgcolor="0xffffff" width="25"
datapath="my_data:/items/item">
<text datapath="@name" resize="true"/>
</view>
</view>
</view>
</canvas>


This will actually realign the views as required - you could put it in a resizeable window and play with the window size.

layout is actually an extendable class - <wrappinglayout> is a lzx class that extends it - have a look in:

C:\lps-v1\jakarta-tomcat-4.1.12\webapps\lps-v1\WEB-INF\lps\components\utils\layouts

-Antun

[felasfa]

amazing !

If this doesn't demonstrate what a cool concept LPS is, then you're jaded.

thanks.

[felasfa]

umm, small problem with the above solution.

When the <wrappinglayout> is used with a view whose dataset is static (or "autorequested"), it works fine.

When it is used with a dataset that is requested at run time, e.g.


<dataset name="file_list_xml" request="false" src="xml/file_list.xml" type="http"/>


it doesn't work - in fact it hangs up after displaying all the objects on top of each other.

Is this a "lock" problem, and if so, how does one lock the layout until data arrives ?

thanks.

[antun]

Hmmm. This appears to be a bug with wrappinglayout. Here's what I did:


<canvas debug="true">
<include href="utils/layouts/wrappinglayout.lzx" />
<dataset name="my_data" request="false" src="mydata.xml" type="http">
</dataset>

<simplelayout spacing="5" />
<button>
<method event="onclick">
canvas.datasets.my_data.doRequest();
myLayout.update();
</method>
Do Request
</button>

<view bgcolor="0xe5e5e5" >
<view width="120" datapath="my_data:/items[1]">
<wrappinglayout id="myLayout" horz_spacing="5" vert_spacing="2"/>
<view bgcolor="0xffffff" width="25"
datapath="item">
<text datapath="@name" resize="true"/>
</view>
</view>
</view>

</canvas>


The update method of a layout is for refreshing it. For some reason it doesn't get called automatically with the wrappinglayout class.

HOWEVER, I had to click the button twice. Weird. I filed the bug as #1706.

-Antun

[felasfa]

I copied your code exactly and it still didn't work.

OS X 10.2.6, flash player 6.0.79

It works when request=true.

With request=false, clicking the button once draws the squares on top of each other (so that only "13" is visible). Clicking twice hangs up the player.

What system are you using ?

[antun]

I'm on a PC Win XP IE 6 Flash player 6.

Did you click the button twice?

-Antun

[felasfa]

clicking it twice hangs up the Flash player ("A script is causing you computer to run very slowly. Do you wish to abort ?")

Again, with request="true" <wrapperlayout> works fine.

With request="false" and then clicking the button, <wrapperlayout> fails. All the squares are drawn on top of each other. Clicking the button once more hangs up the player.

Looking at the code for <wrapperlayout>, I'm suspecting it has to do with manipulating subviews which have yet to be fully initialized because data has not yet arrived. On my machine, this causes a crash.

I'm using LPS v1 build lps-v1-000610-0003 which comes with tomcat 4.1.12.

[antun]

clicking it twice hangs up the Flash player ("A script is causing you computer to run very slowly. Do you wish to abort ?")


I see... On my PC it just hung for ages, but then it did arrange the replicated views as it's supposed to. On your machine it hit the horrible script running slowly error too soon.

Like I said, the bug is filed, so something should be done about it. If I find a workaround I'll let you know.

-Antun

[felasfa]

here is a procedural workaround:


<canvas debug="true" height="800" width="800">
<debug height="200" width="600" x="50" y="450"/>
<dataset name="my_data" request="false" src="mydata.xml" type="http"/>
<simplelayout spacing="5"/>
<button>
<method
event="onclick"><![CDATA[
grid_view.reset_grid();
canvas.datasets.my_data.doRequest();
]]></method> Do
Request </button>
<view bgcolor="0xe5e5e5" width="120" id="grid_view">
<attribute name="item_x" value="0" />
<attribute name="item_y" value="0" />
<attribute name="rowh" value="0" />
<method name="reset_grid"><![CDATA[
this.item_x= 0;
this.item_y= 0;
this.rowh= 0;
]]></method>
<view bgcolor="0xffffff" datapath="my_data:/items/item" height="25" ondata="place_item(5,5)" width="25">
<method args="horz_spacing,vert_spacing" name="place_item"><![CDATA[
this.setAttribute( 'x' , this.immediateparent.item_x);
this.setAttribute( 'y' , this.immediateparent.item_y);
this.immediateparent.item_x += horz_spacing + this.getAttribute( 'width' ) ;
this.immediateparent.rowh = math.max(this.immediateparent.rowh,this.getAttribu te( 'height' ));
if (( this.immediateparent.item_x > this.immediateparent.width) || (this.immediateparent.item_x+ horz_spacing + this.getAttribute( 'width' ) > this.immediateparent.width)) {
this.immediateparent.item_x=0;
this.immediateparent.item_y += this.immediateparent.rowh + vert_spacing;
}
]]></method>
<text datapath="@name" resize="true"/>
</view>
</view>
</canvas>


more information on the <wrapperlayout> bug:

when the following line in the wrapperlayout.lzx code is commented out

<!-- <attribute name="animated" value="100"/> -->
<attribute name="animated" value="0"/>

it doesn't hang up nearly as long.

Then, when the attribute "initstage" in the displayed "view" is set to "late", <wrapperlayout> actually works...but when it gets to idle mode, it re-runs its "update" routine and screws it up again.

Hope this helps whoever is going to fix <wrapperlayout> ....


f

[antun]

We found the bug in wrappinglayout. Here's a reliable workaround:


<canvas debug="true">
<include href="utils/layouts/wrappinglayout.lzx" />
<dataset name="my_data" request="false" src="mydata.xml" type="http">
</dataset>

<simplelayout spacing="5" />
<button>
Do Request
<method event="onclick">
canvas.datasets.my_data.doRequest();
</method>
</button>

<class name="mywrappinglayout" extends="wrappinglayout">
<attribute name="animated" value="0" />
<method name="addSubView" args="v">
super.addSubView( v );
this.update();
</method>
</class>

<view bgcolor="0xe5e5e5" >
<view width="120" datapath="my_data:/items[1]">
<mywrappinglayout horz_spacing="5" vert_spacing="2"/>

<view bgcolor="0xffffff" width="25"
datapath="item">
<text datapath="@name" resize="true"/>
</view>
</view>
</view>

</canvas>


What we did was to create a new layout class that extended <wrappinglayout>. We then turned the animation off and overwrote the addSubView() method in the new class. The problem was that the addSubView() method (which got called every time the view added a subview (i.e. when the data came in and the replication manager created the views) didn't update the layout.

This solution is going to work until for now, however you might notice a flaw in it - the update() method gets called every time a view is added, which could become a performance issue. We may add an event to the LPS at some stage that goes off when the last of a bunch of subviews gets added, so we'd only have to call that method once.

-Antun

[antun]

I should point out that in the above post, you could just as easily have made a copy of the entire wrappinglayout lzx file, made edits to that, and included it instead. Extending the class is just a little less verbose and more elegant.

-Antun