Code for a 10x10 multiplication table in flash as3, - actionscript-3

Question

I'm new to coding in AS3, and I would like some assistance. I've recieved a task where I have to code a Multiplication table (10 rows, 10 columns). I've managed to code the table, but I need help to add the numbers needed without manually adding the text.
It should look somewhat like this;
Can someone here assist me with this task?
Here is my code:
var xColumns:uint=10;
var xRows:uint=10;
var _columnWidth:Number=40;
var _rowHeight:Number=40
var _width:Number=_columnWidth*xColumns;
var _height:Number=_rowHeight*xRows;
graphics.lineStyle(2, 0x0000ff, 1);
for(var i:int=1; i<=xColumns; i++){
graphics.moveTo(i*_columnWidth,0);
graphics.lineTo(i*_columnWidth,_height);
}
for(i=1; i<=xRows; i++){
graphics.moveTo(0,i*_rowHeight);
graphics.lineTo(_width,i*_rowHeight);
}

Answer 1

This is the sample of "Cell" class:
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
public class Cell extends Sprite
{
//---------------------------------------
protected var m_oLabel:TextField;
protected var m_nWidth:Number = 20;
protected var m_nHeight:Number = 20;
protected var _backgroundColor:Number;
//---------------------------------------
//Group: CONSTRUCTOR
public function Cell()
{
super();
m_oLabel = new TextField();
m_oLabel.text = "999";
m_oLabel.autoSize = TextFieldAutoSize.CENTER;
addChild(m_oLabel);
setLabel("999");
}
//--------------------------------------------------//
// PUBLIC PUBLIC PUBLIC PUBLIC //
//--------------------------------------------------//
public function setLabel(p_sLabel:String):void
{
m_oLabel.text = p_sLabel || "";
updateLayout();
}
public function get backgroundColor():Number
{
return _backgroundColor;
}
public function set backgroundColor(value:Number):void
{
_backgroundColor = value;
redraw();
}
//------------------- OVERRIDDEN -------------------//
override public function get width():Number
{
return m_nWidth;
}
override public function set width(value:Number):void
{
m_nWidth = value;
updateLayout();
redraw();
}
override public function get height():Number
{
return m_nHeight;
}
override public function set height(value:Number):void
{
m_nHeight = value;
updateLayout();
redraw();
}
//--------------------------------------------------//
// PRIVATE/PROTECTED PRIVATE/PROTECTED //
//--------------------------------------------------//
protected function updateLayout():void
{
//adjust layout
if (m_oLabel)
{
m_oLabel.x = width * .5 - m_oLabel.width * .5;
m_oLabel.y = height * .5 - m_oLabel.height * .5;
}
}
protected function redraw():void
{
var g:Graphics = this.graphics;
g.beginFill(_backgroundColor);
g.drawRect(0, 0, width, height);
g.endFill();
}
//------------------- OVERRIDDEN -------------------//
//--------------------------------------------------//
// EVENTS EVENTS EVENTS EVENTS //
//--------------------------------------------------//
//------------------- OVERRIDDEN -------------------//
//--------------------------------------------------//
// UTILS UTILS UTILS UTILS //
//--------------------------------------------------//
//------------------- OVERRIDDEN -------------------//
}
}
and usage:
var container:Sprite = new Sprite();
addChild(container);
container.x = 10;
container.y = 10;
for (var i:int = 0; i <= 10; i++)
{
for (var j:int = 0; j <= 10; j++)
{
var cell:Cell = new Cell();
if (i == 0 || j == 0)
{
//headers
cell.setLabel(Math.max(i, j).toString());
cell.backgroundColor = 0x808080;
}
else
{
var mul:Number = i * j;
cell.setLabel(mul.toString());
cell.backgroundColor = 0xC0C0C0;
}
container.addChild(cell);
cell.x = cell.width * j;
cell.y = cell.height * i;
}
}
which looks like this:
new class "Cell" gives you flexibility and encapsulation of code for creation of single table cell. In my example it is only container for textfield and has ability to draw background. I've created public methods/accessors that allow to modify the "features" of the cell (i.e. what is displayed in TextField and what is colour of background). I had to override default width/height behaviour as otherwise it would return the size of it's content which would vary depending on the TextField content and size and in table we need steady size.