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
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.
Hey…
Replace [DisplayObject] with the display object like
var aSprite = new Sprite()
aSprite.graphics.clear();
aSprite.graphics.beginFill(0×000000, 1);
aSprite.graphics.drawRect(0, 0, 40, 40);
aSprite.graphics.endFill();
table.AddElement(0, table.GetLength(0), new TableEngineItem(aSprite));