XML Table Component

[byweb]

I would like someone to guide me how to build this Table Component (http://flashden.net/item/table-component-xml/17997) with KoolMoves and XML. Thanks.

[mvivit]

I haven't had a chance to really delve into it, byweb, but you might take a look at the KM SimpleTable class for a starting point.

[blanius]

I think it should work. I've been fiddling with reading the XML data for a couple of days and can help you with that part.

<people>
<person name="Mims Wright" suffix="III">
<age>27</age>
<aka>Mims H Wright</aka>
<aka>Teh AWesoeomes!</aka>
<bio><![CDATA[This guy <b>rulz<b>!]]></bio>
</person>
<person name="Roger Braunstein">
<age>26</age>
<aka>Rog</aka>
<aka>That guy</aka>
<bio><![CDATA[Likes food.]]></bio>
</person>
</people>;


var xmlLoader:URLLoader = new URLLoader();

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest("test.xml"));


function LoadXML(e:Event):void {
var xmlData:XML = new XML(e.target.data);
xmlData.ignoreWhitespace=true;
trace (myxml.person.age);
/*results in
<age>27</age>
<age>26</age>
*/
}


for more see http://dispatchevent.org/roger/as3-e4x-rundown/
That's where I got most of my info.
Now as for the simpleTable, I've barely looked at it so far.

[blanius]

Interesting I decided to play a bit and voila, no Header with sorting but it's a start.


import km.components.*;
import km.display.*;
import km.skins.*;

var myxml:XML=
<people>
<person name="Mims Wright" suffix="III">
<age>27</age>
<aka>Mims H Wright</aka>
<aka>Teh AWesoeomes!</aka>
<bio><![CDATA[This guy rulz!]]></bio>
</person>
<person name="Roger Braunstein">
<age>26</age>
<aka>Rog</aka>
<aka>That guy</aka>
<bio><![CDATA[Likes food.]]></bio>
</person>
</people>;

function fn(cell:SimpleTableCell):void {
cell.content = new LabelButton();
cell.content.label.text = '';
ScriptedSkin.applyTo(cell.content);
}

var table:SimpleTable = new SimpleTable();
table.onCellCreate = fn;
table.setSize(500, 160);
table.move(20, 20);
table.colWidths = [.80, .80, .90];
table.rowHeights = [.25, .25, .25];
table.cellPadding = 3;

trace(myxml.person.length());
//table.cell(0,0).content.label.text=myxml.person[0];
for (idx=0;idx<=myxml.person.length()-1;idx++){
trace("in for loop"+idx);
table.cell(0,idx).content.label.text=myxml.person. @name[idx];
table.cell(1,idx).content.label.text=myxml.person. age[idx];
table.cell(2,idx).content.label.text=myxml.person. bio[idx];
}
table.update();

addChild(table);

function trace(s:String){
txt1.text+=s+"\n";
}

[blanius]

You might be able to impletment the sorting function I found here for sorting XML, Sort then reload the table with the new xmldata that is sorted
http://www.nuff-respec.com/technology/sort-xml-by-attribute-in-actionscript-3

[byweb]

:) Thanks B.Lainus for your help, always I apreciate this. Your second example is near of the I want to do, but I need that the file XML is external. I want study this example and look at the link page that you sent me. I have it publish the results here. Thanks B.Lainus.:thumbsup:

[blanius]

It's not universal like the component you linked to but just combine the two examples and you'll have it.

var xmlLoader:URLLoader = new URLLoader();

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest("test.xml"));


function LoadXML(e:Event):void {
var xmlData:XML = new XML(e.target.data);
xmlData.ignoreWhitespace=true;

var table:SimpleTable = new SimpleTable();
table.onCellCreate = fn;
table.setSize(500, 160);
table.move(20, 20);
table.colWidths = [.80, .80, .90];
table.rowHeights = [.25, .25, .25];
table.cellPadding = 3;

trace(myxml.person.length());
//table.cell(0,0).content.label.text=myxml.person[0];
for (idx=0;idx<=myxml.person.length()-1;idx++){
trace("in for loop"+idx);
table.cell(0,idx).content.label.text=myxml.person. @name[idx];
table.cell(1,idx).content.label.text=myxml.person. age[idx];
table.cell(2,idx).content.label.text=myxml.person. bio[idx];
}
table.update();

addChild(table);


}

function fn(cell:SimpleTableCell):void {
cell.content = new LabelButton();
cell.content.label.text = '';
ScriptedSkin.applyTo(cell.content);
}

[byweb]

Thanks B:Lainus for this example. I use the your XML file of the first post I called it as "test.xml" and send me the output error:


ReferenceError: Error #1065: No se ha definido la variable myxml.
at doc_fun::MainTimeline/LoadXML()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()


I think that "trace" is not supported in KoolMoves. In this code line is the error


........
trace(myxml.person.length());
........





Thanks again for you help.

[w.brants]

It's not the trace. trace is supported !
Try thisfunction fn(cell:SimpleTableCell):void {
cell.content = new LabelButton();
ScriptedSkin.applyTo(cell.content);
}

var table:SimpleTable = new SimpleTable();
table.onCellCreate = fn;
table.setSize(500, 160);
table.move(20, 20);
table.colWidths = [.80, .80, .90];
table.rowHeights = [.25, .25, .25];
table.cellPadding = 3;
addChild(table);

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, onComplete);
xmlLoader.load(new URLRequest('test.xml'));

function onComplete(e:Event):void {
var xmlData:XML = new XML(e.target.data);
for (var idx:int = 0; idx <= xmlData.person.length() - 1; idx++){
table.cell(0, idx).content.label.text = xmlData.person.@name[idx];
table.cell(1, idx).content.label.text = xmlData.person.age[idx];
table.cell(2, idx).content.label.text = xmlData.person.bio[idx];
}
table.update();
}

[byweb]

Thanks Wilbert now works well. I had to change this node in the XML for works fine:

<bio><![CDATA[This guy <b>rulz<b>!]]></bio>

for this:

<bio><![CDATA[This guy rulz.]]></bio>

Now I have to create cells in the header, and number the rows it was defined for the number of nodes, in this moment only there are three, if I add other person in the file XML not add table at the swf file, these should not be a button, and then give functions to each button, for example load one image, gotoAndStop one frame, or URLrequest this site ... etc.
Do I have to do it in the XML file or in the AS3 code?
Thanks too a B. Lainus for your works.

[blanius]

Yeah this is just a jumping off point.
Anyway you need to dynamically create the table based on XML data
So try in this example to get number of rows needed by getting the length of the node people

xmlData.people.length() and use that to create a string of row heights ( ".25,.25,.25" and so on) in a loop then size the table

table.rowHeights = [yourstring];
table.update;

Forgive me if I'm not quite there as I'm posting this at 11pm after having worked since 6am mostly in the 96 degree heat.

[w.brants]

Bret, it's not required to set widths and heights for each column or row if you want the cells to be of equal size. In that case you can use the two optional parameters of the setSize function to set the number or columns and rows.

table.setSize(300, 160, 4, 4);

will set the size of the table to 300px x 160px and create four columns and four rows. It's mentioned in the documentation.

Byweb, both is possible. If you want to define everything in the actionscript code, you probably have to determine what cell was clicked and use a switch / case construction. You could also define the action (in the form of a text string) in the xml code and let the actionscript code read that and act upon it.

[blanius]

I admit I haven't fully understood the simpleTable as of yet, still looking it over myself, Thanks Wilbert for your input.

[byweb]

....And, How I can change the color of the cells ?

[w.brants]

Byweb, there's some info in the docs but there's also a contribution on KoolExchange named "SimpleTable examples" that may help you out.
There's also an example created by Chris on www.km-codex.com .

[byweb]

Ah, OK. I look at in compilador As3 code help and can to read this:
bgColor property
public var bgColor:uint
Table background color [ARGB].
but I do not know how to implement, Now go to look at these examples that your comment. Thanks.

[Chris_Seahorn]

As Wilbert mentioned I have one download that utilizes his SimpleTable component in my Source Code section.

A running example of the download is here:
http://www.km-codex.com/?p=435