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

**URL:** <https://forum.kirupa.com/t/how-to-dynamically-create-a-simple-button-grid-onscreen-keyboard/269473>\
**Category:** Uncategorized\
**Created:** [August 28, 2008, 3:49am UTC](https://forum.kirupa.com/t/how-to-dynamically-create-a-simple-button-grid-onscreen-keyboard/269473 "2008-08-28T03:49:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![bcswebstudio](https://avatars.discourse-cdn.com/v4/letter/b/f1d935/32.png) [@bcswebstudio](https://forum.kirupa.com/u/bcswebstudio)\
**Post date:** [August 28, 2008, 3:49am UTC](https://forum.kirupa.com/t/how-to-dynamically-create-a-simple-button-grid-onscreen-keyboard/269473/1 "2008-08-28T03:49:22Z")

</div>

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.

```auto
/* 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);
}

```