View Full Version : Creating simple Grid from action script

02-08-2006, 11:43 PM
I have this simple xmxl code. I would like to create exactly the same things in Action Script

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" layout="absolute">
<mx:Canvas x="82" y="66" width="1000" height="1000">
<mx:VBox x="163" y="114" width="100" height="100" cornerRadius="5" borderThickness="5" borderStyle="solid" backgroundColor="#8facff">
<mx:Image click="getURL('http://www.cnn.com')" source="0004734.jpg" width="29" height="24" verticalAlign="bottom" />
<mx:Image click="getURL('http://www.cnn.com')" source="0004734.jpg" width="29" height="24" verticalAlign="bottom" />
<mx:VBox x="19" y="13" width="100" height="100" cornerRadius="5" borderThickness="5" borderStyle="solid" backgroundColor="#8facff"/>

thank you in advance

02-09-2006, 04:18 PM
in as3 you would

import mx.controls.Button;
import mx.containers.VBox;
private function someFunction():void
var n:VBox = new VBox();
var p:Button = new Button();
var z:Button = new Button();
p.label = "hallo";
z.label = "hallo 2";


in flex 1.5 as2 you need to use createChildren, thats pretty simmiliar to this approach

02-11-2006, 03:57 AM
Thanks it works

02-12-2006, 02:06 AM
How to create below simple grid from action script?
In the beta version of as 3, it didnot have createchild in grid
var g:Grid = new Grid();
var gr:GridRow = new GridRow();
var gi:GridItem = new GridItem();

the has g.createChildId() but not create child.

<mx:Grid x="115" y="490">

Thank you in advance.

02-12-2006, 10:07 AM
Wait...xmxl? This thing wasnt called xml?Or it is another thing?
And this addChild...this seems to put an object inside another, isnt it?OR it is to put a xml child inside another?
This is so confusing...

02-12-2006, 02:40 PM
it is called mxml. yes addChild adds a child to the displayList. this has nothing todo with xml

02-17-2006, 05:00 AM
Well, I don't understand what your question is about. You are already creating the right objects, you just need to add them using addChild() (row to the grid, items to the row, and your actual widgets to the items). If this is not what you are asking, you should try rephrasing your question.


02-17-2006, 04:04 PM
oi patience mate. not all of us are in the same time zone. look at the example i posted in this forum to create a vbox dynamically

02-17-2006, 06:42 PM
Thank you for the answer. the addChild() is the one that I am looking for. As hangalot mention, it is similar way to do in in VBox.

Now, I kind of understand how it's work. the addChild look's like being used over and over again. I am still new in ActionScript even though I programmed alot in other languages.

Thanks again, it solved my problems.

12-29-2009, 12:43 AM
Here is a solution I came up with. It is messy, but not too hard to use. It is my first AS3 class.

It allows me to make sprite grids of any dimension and position them on the stage.

Referencing the cells (children) of the grid is kind of a pain. But it allows me to do simple layouts without messing around with any authoring tools.

Any suggestions are appreciated.


import flash.display.Sprite;

public class Grid extends Sprite

public var rowPad:Number = 10; // Holds value of row padding.

public var colPad:Number = 10; // Holds value of column padding.

public var dim:Array; // Holds values of rows and columns.

public var gridHeight:Number; // grid must have dimension to fit

public var gridWidth:Number; // cells

public function Grid(w:Number, h:Number, a:Array, rp:Number, cp:Number)
dim = a;
gridWidth = w;
gridHeight = h;

}//funct Grid

public function defineGrid():void
var sp:Sprite = new Sprite();


sp.graphics.lineStyle(2, 0x000000);

sp.graphics.drawRect(0,0, gridWidth, gridHeight);



}//funct defineGrid

private function spriteGrid():void

var rows:Number = dim[0];
var cols:Number = dim[1];

//set cell width

var cellWidth:Number = ( gridWidth - ( ( cols + 1 ) * colPad ) )
/ cols;

// Set cell height.

var cellHeight:Number = ( gridHeight - ( ( rows + 1 ) * rowPad ) )
/ rows;

//x coordinate.

var xCoord:Number = 0;

//y coordinate.

var yCoord:Number = 0;

//Loop to create columns.

for ( var i:Number = 0; i < cols; i++)

// increment xCoord with each iteration

xCoord = (i * (cellWidth + colPad)) + colPad;;

// Loop to create rows

for ( var j:Number = 0; j < rows; j++ )

// increment yCoord

yCoord = (j * (rowPad + cellHeight)) + rowPad;

// Instantiate cells

var cell:Sprite = new Sprite();


// set coordinates of cell

cell.x = xCoord;

cell.y = yCoord;

//draw borders


cell.graphics.lineStyle(1, 0x000000);

cell.graphics.drawRect(0,0, cellWidth, cellHeight);




}//funct spriteGrid

}//class Grid


12-29-2009, 12:55 AM
I'm guessing this snippet would have to be done in flexBuilder. Is there a way to make this work using only the SDK? I got it to compile, but it would not run.