<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:claire="claire.com.*" creationComplete="init()" layout="absolute" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.controls.Alert;
            
            private function init():void
            {
                focusManager.setFocus(field1);
            }
            
            public function resetForm():void
            {
                field1.text='';
                field2.text='';
                field3.text='';
            }
            public function showValues():void
            {
                var alertString:String = '';
                alertString += 'Field 1 : '+field1.text+'\n';
                alertString += 'Field 2 : '+field2.text+'\n';
                alertString += 'Field 3 : '+field3.text+'\n';
                Alert.show( alertString );
            }
            public function setQwertyFocus(com:UIComponent):void
            {
                this.myQwertyKeypad.newFocus(com);
            }
        ]]>
    </mx:Script>
    <mx:ApplicationControlBar width="100%">
        <mx:Label text="Flex On Screen QWERTY Keyboard" />
        <mx:Spacer width="100%"/>
        <mx:Button label="Reset Form" click="resetForm()"/>
        <mx:Button label="Show Values" click="showValues()"/>
    </mx:ApplicationControlBar>
    <mx:Panel horizontalCenter="0" verticalCenter="0"
        title="My Qwerty Keyboard" status="made with kerkness">
        <mx:VBox>
            <mx:Form width="100%">
                <mx:FormItem label="Field 1" width="100%">
                    <mx:TextInput id="field1" focusIn="setQwertyFocus(field1)" width="100%"/>
                </mx:FormItem>
                <mx:FormItem label="Field 2" width="100%">
                    <mx:TextInput id="field2" focusIn="setQwertyFocus(field2)" width="100%"/>
                </mx:FormItem>
                <mx:FormItem label="Field 3" width="100%">
                    <mx:TextInput id="field3" focusIn="setQwertyFocus(field3)" width="100%"/>
                </mx:FormItem>
            </mx:Form>
            <claire:Qwerty id="myQwertyKeypad" inputControl="{field1}" width="100%"/>
        </mx:VBox>
    </mx:Panel>
        
        
</mx:Application>