Flex Handling KeyboardEvents

Following tutorial describes KeyboardEvent class defined under flash.events package. Class is associated with the keyboard keys pressed on the keyboard. It is commonly used for detecting the key pressed on the keyboard. For detecting and handling the key pressed , an event listener associated with event is created. Now for detecting event on a particular container just create the listener of event on that container.

Syntax for creating event Listener :
        <mx:Application> --- a flex container.
                            application.addEventListener(KeyboardEvent.KEY_UP, task);
                  or       application.addEventListener(KeyboardEvent.KEY_DOWN, task);

Here keyUp and keyDown are the events and any class that inherits UIComponent class dispatches these events. The listeners created
on the application container are get invoked each time a key is pressed on the keyboard. Now after creating the listener we also have to create a function to handle the event. In the function an object of keyboard event is created. Below the syntax for creating handlers are provided.

Syntax for creating the event handlers:
            public function handler (event : KeyBoardEvent){ }

Inside these event handlers a pressed key can be detected. This means inside the braces of the function, statements containing charCode and keyCode properties can be coded to get the biodata of the key pressed on the keyboard. Here charCode and keyCode are the properties defined inside the KeyboardEvent class.

Now coming one by one, first is charCode property which generates a corresponding ASCII character set value of the key value i.e. the alphabet value the key is holidng. For example charCode value of letter 'a' will differ with the charCode value of letter 'A'.
Second is keyCode property, which generates the numeric value of the key pressed on the keyboard. Every key on the keyboard possess a unique keyCode value. For example there are two keys on the keyboard to write the same number one (1), and when they are pressed the charCode value of the key matches, as they possess the same value printed on them. But the keyCode values of these two keys differs to each other.

keydetector.mxml


<?xml version = '1.0' encoding = 'utf-8'?>

<mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml'

                        creationComplete = 'Listener();'>

  <mx:Script>

  <![CDATA[

    

    public function Listener():void{

      application.addEventListener(KeyboardEvent.KEY_UP, task);    

    }

    

    public function task(event:KeyboardEvent):void{

      var str:String = "  (" + event.keyCode + ") ";

      lb1.text =  str;

      lb2.text = Detector(event.charCode) + "  [" + event.charCode + "] "; 

      lb3.text = Detector(event.keyCode) + "  [" + event.keyCode + "] " ; 

      txA.text = String(event);

    }

    

    public function Detector(neo:int):String {

      if(neo > 47 && neo < 58){

        var u:String = '0123456789';

        return u.charAt(neo - 48);

      }

      if(neo > 64 && neo < 91){

        var b:String = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        return b.charAt(neo - 65);

      }

      

      if(neo > 96 && neo < 123) {

        var v:String = 'abcdefghijklmnopqrstuvwxyz';

        return v.charAt(neo - 97);

      }

      else 

        return neo.toString();

    }

  

  ]]>  

  </mx:Script>

      <mx:Style>

         

           .Trinity{color : #996600}

              TextInput {font-size : 18pt}

              TextArea {font-size : 15pt}

              Label {font-size : 15pt}

          

      </mx:Style>



      

  <mx:Canvas width = '100%' height = '100%' backgroundColor = '#9966CC'>

    <mx:VBox width = '100%' height = '100%'>

    <mx:Form color = '#00FF00'>

  

      <mx:FormItem label = 'ASCII code of letter on the key : '>

          <mx:Label id = 'lb2' />

      </mx:FormItem>

  

      <mx:FormItem label = 'ASCII code of letter in upper case : '>

          <mx:Label id = 'lb3' />

      </mx:FormItem>

  

      <mx:FormItem label = 'Key code of the key pressed : '>

          <mx:Label id = 'lb1' />

      </mx:FormItem>

  

    </mx:Form>

  

      <mx:FormItem label = 'Press any key within the TextInput'>

          <mx:TextInput  styleName = 'Trinity'/>

      </mx:FormItem>



          <mx:Label text = 'Event details' />

          <mx:TextArea id = 'txA' width = '20%' height = '50%' 

              editable = 'false' color = '#3399FF' 

              styleName = 'Trinity'/>

    

    </mx:VBox>

  </mx:Canvas>

</mx:Application>

keydetector.swf

Download the code