1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                creationComplete="onCreationComplete(event)">
    
    <mx:Script>
    <![CDATA[
        import mx.containers.GridItem;
        import mx.containers.GridRow;
        import mx.controls.Button;
        import mx.events.FlexEvent;
        
        [Bindable] private var _currentCharacter:String = "";
        [Bindable] private var _currentText:String = "";

        private var _buttonTimer:Timer = new Timer(500);
        private var _buttonPressCount:int = 0;
        private var _currentButtonPressedNr:int = 0;
        private var _charMatrix:Object;
        
        private function onCreationComplete(event:FlexEvent):void {
            _buttonTimer.addEventListener(TimerEvent.TIMER, onTimerEvent);
            initializeCharacterMatrix();
            createDisplay();
        }
        
        private function initializeCharacterMatrix():void {
            _charMatrix = [
                ["1", "A", "B", "C" ],
                ["2", "D", "E", "F" ],
                ["3", "G", "H", "I" ],
                ["4", "J", "K", "L" ],
                ["5", "M", "N", "O" ],
                ["6", "P", "Q", "R" ],
                ["7", "S", "T", "U" ],
                ["8", "V", "W", "X" ],
                ["9", "Y", "Z", " " ],
            ];
        }
        
        private function createDisplay():void {
            var rowIdx:int, columnIdx:int, buttonLabel:int = 0;
            var row:GridRow;
            var item:GridItem;
            var button:Button;
            
            for( rowIdx=0; rowIdx<3; rowIdx++ ) {
                row = new GridRow();
                row.percentWidth = 100;
                row.percentHeight = 100;
                for( columnIdx=0; columnIdx<3; columnIdx++ ) {
                    button = new Button();
                    button.percentWidth = 100;
                    button.percentHeight = 100;
                    button.label = (++buttonLabel).toString();
                    button.data = { buttonNumber: buttonLabel };
                    button.addEventListener(MouseEvent.CLICK, onButtonClicked);
                    
                    item = new GridItem();
                    item.percentWidth = 100;
                    item.percentHeight = 100;
                    item.addChild( button );
                    row.addChild(item);
                }
                buttonGrid.addChild(row);   
            }
        }
        
        private function onButtonClicked(event:MouseEvent):void {
            var _buttonNumberPressed:int = event.currentTarget.data.buttonNumber;
            if( _currentButtonPressedNr == _buttonNumberPressed ) {
                _buttonPressCount++;
            }
            _currentButtonPressedNr = _buttonNumberPressed;
            _currentCharacter = _charMatrix[_currentButtonPressedNr-1][_buttonPressCount%4];
            _buttonTimer.reset();
            _buttonTimer.start();
        }
        
        private function onTimerEvent(event:TimerEvent):void {
            _buttonTimer.stop();
            _buttonPressCount = 0;
            _currentButtonPressedNr = -1;
            _currentText += _currentCharacter;
        }
        
    ]]>
    </mx:Script>
    
    
    <mx:VBox width="400" height="420" verticalCenter="0" horizontalCenter="0" >
        <mx:TextInput text="{ _currentText }" width="100%" fontWeight="bold" fontSize="14" />
        <mx:Grid id="buttonGrid" width="100%" height="100%" />
        <mx:Label text="{ 'next character = ' + _currentCharacter }" width="100%" fontWeight="bold" fontSize="14" />
    </mx:VBox>
    
</mx:Application>