PDA

View Full Version : Creating simple Grid from action script


john100
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>
<mx:VBox x="19" y="13" width="100" height="100" cornerRadius="5" borderThickness="5" borderStyle="solid" backgroundColor="#8facff"/>
</mx:Canvas>
</mx:Application>


thank you in advance

hangalot
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();
n.addChild(p);
n.addChild(z);
p.label = "hallo";
z.label = "hallo 2";
this.addChild(n);

}



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

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

john100
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">
<mx:GridRow>
<mx:GridItem>
</mx:GridItem>
<mx:GridItem>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
</mx:GridItem>
<mx:GridItem>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>

Thank you in advance.

Incrue
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...

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

haridsv
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.

Hari

hangalot
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

john100
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.
J

ztpi1
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.

package
{

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)
{
rowPad=rp;
colPad=cp;
dim = a;
gridWidth = w;
gridHeight = h;
defineGrid();

}//funct Grid

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

sp.graphics.beginFill(0x000000);

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

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

sp.graphics.endFill();

spriteGrid();

}//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();

this.addChild(cell);

// set coordinates of cell

cell.x = xCoord;

cell.y = yCoord;

//draw borders

cell.graphics.beginFill(0xFFFFFF);

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

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

cell.graphics.endFill();

}//for

}//for

}//funct spriteGrid

}//class Grid

}//package

ztpi1
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.