How to dynamically create a simple button grid (onscreen keyboard)

1

Thought I would share with the community a simple script I wrote some time ago for a kiosk project I was working on. It’s certainly not the best way to do it today, but there you go… The end result is a nicely uniform grid of button components with button-click events passing in their letter values.

Only now revisiting have I cleaned up enough to share.

/* Build Button Panel Keyboard */
var b:Object, ltr:String;
var offX = 0;    // offset X
var offY = 410;    //  offset Y
var BTNWIDTH = 58;
var BTNHEIGHT = 58;
var BTNSPACING = 8;
var row = 0;
var col = 0;

offX = (stage._width * 0.5) - (BTNWIDTH*13 + BTNSPACING*13) / 2;

for (var i=1; i<=26; i++) {
    ltr = chr(64+i);
    b= createClassObject(
        mx.controls.Button, "btn_"+ltr, i, {
            label:ltr
            , fontSize: 24
            , fontWeight: "normal"
            , fontFamily: "Verdana"
//            , falseUpSkin:"kbUpKey"
//            , falseOverSkin:"kbDownKey"
//            , falseDownSkin:"kbDownKey"
            , labelPlacement:"left"
//            , styleName:"kbStyle"
            }
    );
    b.buttonMode = true;
    b.useHandCursor = true;

    b.setSize(BTNWIDTH, BTNHEIGHT);
    // calculate a flat, 2-row keyboard
    if (col > 12) {
        row = row + 1;
        col = 0;
    }
    b.move(offX + BTNWIDTH * col + BTNSPACING * col, offY + BTNHEIGHT * row + BTNSPACING * row);
    b.char = ltr;
//    b.onRelease = function() { btnClicked(this.char); }
    b.onPress = function() {
        _root.keyclick.start();
        btnClicked(this.char);
    };
    b.cacheAsBitmap = true;
    col = col + 1;
}

function btnClicked(ltr:String) {
    var arrData:Array = stage.data;
    showNames(targetmc, arrData, ltr);
}