Table Engine in ActionScript 3

Written by . Filed under ActionScript 3. Tagged , , , , , , , , . Bookmark the Permalink. Post a Comment. Leave a Trackback URL.

I write this Table Enigne for easy making of data forms, data view in easy
use like Tables in HTML that can contain any DisplayObject.

TableEngineItem.as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package layout.Engines
{
/**
* ...
* @author Garry Lachman
*/


import flash.display.DisplayObject;
import flash.display.Sprite;

public class TableEngineItem extends Sprite
{
private var aParams:Object;
private var aDisplayObject:DisplayObject

public function TableEngineItem(_sprite:DisplayObject, _params:Object=null)
{
this.aDisplayObject = _sprite;
this.addChild(this.aDisplayObject);

if (_params!=null)
this.aParams = _params;
}

public function set Params(_params:Object):void             {   this.aParams = _params;     }
public function get Params():Object                         {   return this.aParams         }
public function get DisplayObjectInstance():DisplayObject   {   return this.aDisplayObject  }

override public function get width():Number{return this.aDisplayObject.width;}
override public function get height():Number{return this.aDisplayObject.height;}
}

}

TableEngine.as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
package layout.Engines
{
import flash.display.Sprite;
import layout.Engines.TableEngineItem
import flash.text.TextField;

public class TableEngine extends Sprite
{
public static const DIRECTION_LTR:String = "dirLTR";
public static const DIRECTION_RTL:String = "dirRTL";
public static const DIRECTION_CENTER:String = "dirCenter";

private var direction:String;

private var aTable:Array;
private var aContainer:Sprite;

private var contentHeight:Number;
private var contentWidth:Number;

public function TableEngine(_cells:int, _direction:String="dirLTR")
{
this.direction = _direction;
this.aTable = new Array();

for (var i:int=0; i < _cells; i++)
aTable.push(new Array());

this.aContainer = new Sprite();
this.addChild(this.aContainer);
}

/**
* @param _cell
* @param _row
* @param _displayObject
* Adding an Element to the table
*/

public function AddElement(_cell:int, _row:int, _tableItem:TableEngineItem):void
{
if (_tableItem == null)
return;

trace("ADDING ELEMENT to " + _cell + " , " + _row);
if (this.aTable[_cell] == null)
throw new Error("Cell need to be added at the constractor");

this.aTable[_cell][_row] = _tableItem;
}

/**
*   Render the table, first of all check the max X and max Y then
*  Render the Display
*/

public function Render():void
{
/* Calculat the maximum X and maximum Y */
// Max X Per Cell.
var maxX:Array = [];
// Max Y Per Row.
var maxY:Array = [];

var maxTopX:Number = 0;

// Loop the Cell Array.
for each (var i:Array in this.aTable)
{
trace("work on: " + this.aTable.indexOf(i));
// Loop the Row Array.
for each (var ii:TableEngineItem in i)
{
if (ii == null)
continue;

trace("parse: " + ii + ", index: " + i.indexOf(ii));
// Check if maxX element for cell is not null... if its null set 0.
if (maxX[this.aTable.indexOf(i)] == null)
maxX[this.aTable.indexOf(i)] = 0;

// Check if the DisplayObject width of this row is bigger then maxX element
// for this cell... if true then set it to maxX
// * Check if the index is not 0, the first element must be 0.
if (ii.width > maxX[this.aTable.indexOf(i)] && this.aTable.indexOf(i) > 0)
maxX[this.aTable.indexOf(i)] = ii.width;

trace("maxX["+this.aTable.indexOf(i)+"]:" + maxX[this.aTable.indexOf(i)]);

if ((maxX[this.aTable.indexOf(i)] + ii.width) > maxTopX && this.aTable.indexOf(i) == this.aTable.length-1)
{
maxTopX = (maxX[this.aTable.indexOf(i)] + ii.width);
trace("set new maxTopX:" + maxTopX + ", ii.width:" + ii.width   );
}

// Check if maxY element for row is not null... if its null set 0.
if (maxY[i.indexOf(ii)] == null)
maxY[i.indexOf(ii)] = 0;

// Check if the DisplayObject height of this row is bigger then maxY element
// for this row... if true then set it to maxY.
if (ii.height > maxY[i.indexOf(ii)])
maxY[i.indexOf(ii)] = ii.height;
}
}

// Loop all over cells maxX and calc the start X refer to all table
for (var a:int; a < maxX.length; a++)
{
if (maxX[a-1] != null)
maxX[a] = maxX[a] + maxX[a - 1];
}

for (var aa:int; aa < maxY.length; aa++)
if (maxY[aa-1] != null)
maxY[aa] = maxY[aa] + maxY[aa-1];

// setting first element @ 0 position
maxY.unshift(0);

/* Render The Graphics */
for each (var b:Array in this.aTable)
{
trace("work on: " + this.aTable.indexOf(b));
// Loop the Row Array.
for each (var bb:TableEngineItem in b)
{
// adding to DisplayList and setting x and y

this.aContainer.addChild(bb);

if (this.direction == TableEngine.DIRECTION_RTL)
{
if (maxX[this.aTable.indexOf(b)+1] != null)
bb.x = maxX[this.aTable.indexOf(b) + 1] - bb.DisplayObjectInstance.width;
else
bb.x = maxTopX - bb.DisplayObjectInstance.width;
}
else if (this.direction == TableEngine.DIRECTION_CENTER)
{
bb.x = maxX[this.aTable.indexOf(b)]
}
else
{
bb.x = maxX[this.aTable.indexOf(b)]
}
bb.y = maxY[b.indexOf(bb)];
this.contentHeight = bb.y + bb.height;
this.contentWidth = bb.x + bb.width;
}
}
}

override public function get height():Number    {       return this.contentHeight;      }
override public function get width():Number {       return this.contentWidth;       }

/**
*   Delete All elements and clear the data
*/

public function Clear(_cells:int):void
{
for (var i:int=this.aContainer.numChildren-1; i > -1; i--)
{
this.aContainer.removeChildAt(i);
}

this.aTable = new Array();

for (var ii:int=0; ii < _cells; ii++)
aTable.push(new Array());
}

public function GetLength(_cell:int):int
{
return (this.aTable[_cell] as Array).length;
}

public function GetItem(_cell:int, _i:int):TableEngineItem
{
return (this.aTable[_cell] as Array)[_i];
}

public function GetItemsInCell(_cell:int):Array
{
return (this.aTable[_cell] as Array);
}

public function get Container():Sprite
{
return this.aContainer;
}

public function DeleteItemByDS(_ds:*):void
{
for each (var i:Array in this.aTable)
{
// Loop the Row Array.
for each (var ii:TableEngineItem in i)
{
if (ii.DisplayObjectInstance == _ds)
{
this.aContainer.removeChild(ii);
i.splice(i.indexOf(ii),1);
}
}
}
}
}
}

Usage:

1
2
3
4
5
6
7
8
9
10
11
12
var table: TableEngine = new TableEngine(2,TableEngine.DIRECTION_RTL);
addChild(table);

// first row
table.AddElement(0, table.GetLength(0), new TableEngineItem([DisplayObject]));
table.AddElement(1, table.GetLength(1), new TableEngineItem([DisplayObject]));

// secound row
table.AddElement(0, table.GetLength(0), new TableEngineItem([DisplayObject]));
table.AddElement(1, table.GetLength(1), new TableEngineItem([DisplayObject]));

table.Render();

2 Comments

  1. Kai
    Posted June 29, 2010 at 9:08 am | Permalink

    Hi Garry, I tried your classes but got the following error:

    1067: Implicit coercion of a value of type Array to an unrelated type flash.display:DisplayObject.

    for line:
    table.AddElement(0, table.GetLength(0), new TableEngineItem([DisplayObject]));

    How can I solve that?
    Seems that [DisplayObject] is recognized as an array.

  2. admin
    Posted June 29, 2010 at 9:55 am | Permalink

    Hey…
    Replace [DisplayObject] with the display object like

    var aSprite = new Sprite()
    aSprite.graphics.clear();
    aSprite.graphics.beginFill(0x000000, 1);
    aSprite.graphics.drawRect(0, 0, 40, 40);
    aSprite.graphics.endFill();

    table.AddElement(0, table.GetLength(0), new TableEngineItem(aSprite));

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*