<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:component="components.*"
    horizontalAlign="center" verticalAlign="middle"
    viewSourceURL="src/index.html"
    applicationComplete="initEntry();"  
>
 <mx:Script>
     <![CDATA[
         import mx.collections.ArrayCollection;
         import mx.controls.TextInput;
         
         [Bindable]
         private var entryData:ArrayCollection=new ArrayCollection();
         
         private function initEntry():void
         {
             if (Number(firstBox.text)){
                 firstBox.text=String(Number(firstBox.text)+1);
             } else {
                 firstBox.text="1";
             }
             if (Number(secondBox.text)){
                 secondBox.text=String(Number(secondBox.text)+1);
             } else {
                 secondBox.text="1";
             }
             firstBox.setFocus();
         }
         
         private function handleTextCR(clicker:Event):void
         {
            if (clicker.currentTarget.id!=null){
            // We can cast an object to TextInput, because both our objects extend TextInput
            // how tight is that? I know, real tight!
            var who:TextInput = clicker.currentTarget as TextInput;
            if (who){
                if (who.id == "firstBox") {
                    responseText.text="You hit Enter key in first box\rSetting focus on second box.";
                    secondBox.setFocus();
                } else if (who.id == "secondBox") {
                    responseText.text="You hit Enter key in second box\rSetting focus on button.";
                    onlyButton.setFocus();
                }
            }
            }
         }

         private function handleButtonCR(clicker:Event):void
         {
             if (firstBox.text!="")
             {
                 var o:Object= new Object();
                 o.first = firstBox.text;
                 o.second = secondBox.text;
                 entryData.addItemAt(o,0);
                initEntry();
             }
            responseText.text="You hit Enter key on the button\rSetting focus on first box.";
            firstBox.setFocus();
         }
     ]]>
 </mx:Script>
 <mx:Canvas width="100%" height="100%">
 <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
    <mx:DataGrid dataProvider="{entryData}" rowCount="4">
        <mx:columns>
            <mx:DataGridColumn headerText="first" dataField="first"/>
            <mx:DataGridColumn headerText="second" dataField="second"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:TextArea id="responseText" 
        text="" 
        width="300" 
        horizontalCenter="0"/>
    <mx:Spacer height="100%"/>
    <component:TextInputCR id="firstBox" 
        clickCR="handleTextCR(event)"
        horizontalCenter="0"/>
    <component:TextInputRightCR id="secondBox" 
        clickCR="handleTextCR(event)" 
        horizontalCenter="0"/>
     <component:ButtonCR id="onlyButton" 
         label="Button" 
         clickCR="handleButtonCR(event)" 
         click="responseText.text='You clicked on the Button with the mouse';firstBox.setFocus();" 
         horizontalCenter="0"/>
     <mx:Spacer height="100%"/>
</mx:VBox>
</mx:Canvas>
    
</mx:Application>