3 Replies Latest reply on May 15, 2010 2:28 AM by r.saran

    How to enter text in text input box using virtual keyboard in flex application

    r.saran

      Re: how to enter text in text input box using virtual keyboard in flex application

      hi,

       

      im using flash builder 4,

      i  designed virtual keyboard, i have to update the text in text input box  continously by using virtual keyboard.

      i used button events.i did  some mistake there.

      can some one help me out of tat.

      thanks  in advance.

      i have included my mxml program with this.

       

       

      virtualkeyboard.mxml

       

       

      <?xml  version="1.0" encoding="utf-8"?>
      <s:Application  xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"  minHeight="600" creationComplete="initfunc()">
           <fx:Script>
              <![CDATA[
                  import  mx.controls.Alert;
                  private function initfunc():void
                   {
                      b1.addEventListener(MouseEvent.CLICK,handleEvent);
                       b2.addEventListener(MouseEvent.CLICK,handleEvent);
                       b3.addEventListener(MouseEvent.CLICK,handleEvent);
                       b4.addEventListener(MouseEvent.CLICK,handleEvent);
                       b5.addEventListener(MouseEvent.CLICK,handleEvent);
                       b6.addEventListener(MouseEvent.CLICK,handleEvent);
                       b7.addEventListener(MouseEvent.CLICK,handleEvent);
                       b8.addEventListener(MouseEvent.CLICK,handleEvent);
                       b9.addEventListener(MouseEvent.CLICK,handleEvent);
                       b10.addEventListener(MouseEvent.CLICK,handleEvent);
                       b11.addEventListener(MouseEvent.CLICK,handleEvent);
                       b12.addEventListener(MouseEvent.CLICK,handleEvent);
                       b13.addEventListener(MouseEvent.CLICK,handleEvent);
                       b14.addEventListener(MouseEvent.CLICK,handleEvent);
                       b15.addEventListener(MouseEvent.CLICK,handleEvent);
                       b16.addEventListener(MouseEvent.CLICK,handleEvent);
                       b17.addEventListener(MouseEvent.CLICK,handleEvent);
                       b18.addEventListener(MouseEvent.CLICK,handleEvent);
                       b19.addEventListener(MouseEvent.CLICK,handleEvent);
                       b20.addEventListener(MouseEvent.CLICK,handleEvent);
                       b21.addEventListener(MouseEvent.CLICK,handleEvent);
                       b22.addEventListener(MouseEvent.CLICK,handleEvent);
                       b23.addEventListener(MouseEvent.CLICK,handleEvent);
                       b24.addEventListener(MouseEvent.CLICK,handleEvent);
                       b25.addEventListener(MouseEvent.CLICK,handleEvent);
                       b26.addEventListener(MouseEvent.CLICK,handleEvent);
                       b27.addEventListener(MouseEvent.CLICK,handleEvent);
                       b28.addEventListener(MouseEvent.CLICK,handleEvent);
                       b29.addEventListener(MouseEvent.CLICK,handleEvent);
                       b30.addEventListener(MouseEvent.CLICK,handleEvent);
                       b31.addEventListener(MouseEvent.CLICK,handleEvent);
                       b32.addEventListener(MouseEvent.CLICK,handleEvent);
                       b33.addEventListener(MouseEvent.CLICK,handleEvent);
                       b34.addEventListener(MouseEvent.CLICK,handleEvent);
                       b35.addEventListener(MouseEvent.CLICK,handleEvent);
                       b36.addEventListener(MouseEvent.CLICK,handleEvent);
                       b37.addEventListener(MouseEvent.CLICK,handleEvent);
                       b38.addEventListener(MouseEvent.CLICK,handleEvent);
                       b39.addEventListener(MouseEvent.CLICK,handleEvent);
                       b40.addEventListener(MouseEvent.CLICK,handleEvent);
                       b41.addEventListener(MouseEvent.CLICK,handleEvent);
                       b42.addEventListener(MouseEvent.CLICK,handleEvent);
                       b43.addEventListener(MouseEvent.CLICK,handleEvent);
                       b44.addEventListener(MouseEvent.CLICK,handleEvent);
                       b45.addEventListener(MouseEvent.CLICK,handleEvent);
                       b46.addEventListener(MouseEvent.CLICK,handleEvent);
                       b47.addEventListener(MouseEvent.CLICK,handleEvent);
                       b48.addEventListener(MouseEvent.CLICK,handleEvent);
                       b49.addEventListener(MouseEvent.CLICK,handleEvent);
                       b50.addEventListener(MouseEvent.CLICK,handleEvent);
                       b51.addEventListener(MouseEvent.CLICK,handleEvent);
                       b52.addEventListener(MouseEvent.CLICK,handleEvent);
                       b53.addEventListener(MouseEvent.CLICK,handleEvent);               
                                      
                  }
                  public function handleEvent ( e :  MouseEvent ) : void
                  {
                      var a:String=  e.target.name ;
                      Alert.show(e.target.name);
                     var b:String=null;
                      switch(a)
                      {
                          
                          case "Button20":
                             b=textbox.text;
                              //textbox.text="a";
                               textbox.text=b+"a";
                              break;


                         case "Button21":
                             
                              //textbox.text="b";
                             textbox.text=b+"b";
                             break;


                         default:
                              
                             //textbox.text="s";
                              textbox.text=b+"s";
                      }
              }
                      
              ]]>
          </fx:Script>
         
          <s:Panel  x="43" y="82" width="527" height="213">
            <mx:Button  x="71" y="86" id="b1" label="1" width="30" height="24"/>
               <s:Button x="180" y="86"  id="b2" label="5" width="30"  height="24"/>
              <s:Button x="127" y="86"  id="b3"  label="3" width="30" height="24"/>
              <s:Button x="99"  y="86"  id="b4" label="2" width="30" height="24"/>
               <s:Button x="323" y="86"  id="b5" label="0" width="30"  height="24"/>
              <s:Button x="294" y="86"  id="b6"  label="9" width="30" height="24"/>
              <s:Button x="265"  y="86"   id="b7" label="8" width="30" height="24"/>
               <s:Button x="237" y="86"  id="b8" label="7" width="30"  height="24"/>
              <s:Button x="209" y="86"  id="b9"  label="6" width="30" height="24"/>
              <s:Button x="42"  y="86"  id="b10" label="`" width="30" height="24"/>
               <s:Button x="382" y="86" id="b11" label="=" width="30"  height="24"/>
              <s:Button x="353" y="86"  id="b12"  label="-" width="30" height="24"/>
              <s:Button x="410"  y="86"  id="b13" label="back" width="76" height="24"/>
               <s:Button x="157" y="86"  id="b14" label="4" width="30"  height="24"/>
              <s:Button x="43" y="109" id="b15"  label="tab" width="66" height="24"/>
              <s:Button x="105"  y="109"  id="b16" label="q" width="31" height="24"/>
               <s:Button x="247" y="109"  id="b17" label="y" width="30"  height="24"/>
              <s:Button x="303" y="109"  id="b18"  label="i" width="31" height="24"/>
              <s:Button x="361"  y="110"  id="b19" label="p" width="34" height="23"/>
               <s:Button x="394" y="109"  id="b20" label="[" width="31"  height="24"/>
              <s:Button x="191" y="109"  id="b21"  label="r" width="34" height="24"/>
              <s:Button x="424"  y="109"  id="b22" label="]" width="31" height="24"/>
               <s:Button x="222" y="109"  id="b23" label="t" width="31"  height="24"/>
              <s:Button x="161" y="109"  id="b24"  label="e" width="31" height="24"/>
              <s:Button x="133"  y="109"  id="b25" label="w" width="31" height="24"/>
               <s:Button x="332" y="109"  id="b26" label="o" width="31"  height="24"/>
              <s:Button x="275" y="109"  id="b27"  label="u" width="31" height="24"/>
              <s:Button x="220"  y="133"  id="b28" label="g" width="31" height="24"/>
               <s:Button x="424" y="132"  id="b29" label="enter" width="62"  height="24"/>
              <s:Button x="43" y="132"  id="b30"  label="caps" width="66" height="24"/>
              <s:Button x="275"  y="133"  id="b31" label="j" width="42" height="23"/>
               <s:Button x="314" y="132"  id="b32" label="k" width="31"  height="24"/>
              <s:Button x="133" y="133"  id="b33"  label="s" width="31" height="23"/>
              <s:Button x="161"  y="133"  id="b34" label="d" width="31" height="23"/>
               <s:Button x="250" y="133"  id="b35" label="h" width="31"  height="23"/>
              <s:Button x="105" y="133"  id="b36"  label="a" width="31" height="23"/>
              <s:Button x="191"  y="133"  id="b37" label="f" width="31" height="23"/>
               <s:Button x="342" y="132"  id="b38" label="l" width="31"  height="24"/>
              <s:Button x="152" y="154"  id="b39"  label="x" width="31" height="24"/>
              <s:Button x="353"  y="154"  id="b40" label="." width="31" height="24"/>
               <s:Button x="325" y="154"  id="b41" label="," width="31"  height="24"/>
              <s:Button x="294" y="154"  id="b42"  label="m" width="31" height="24"/>
              <s:Button x="259"  y="154"  id="b43" label="n" width="37" height="24"/>
               <s:Button x="236" y="154"  id="b44" label="b" width="31"  height="24"/>
              <s:Button x="211" y="154"  id="b45"  label="v" width="31" height="24"/>
              <s:Button x="181"  y="154"  id="b46" label="c" width="31" height="24"/>
               <s:Button x="122" y="154"  id="b47" label="z" width="31"  height="24"/>
              <s:Button x="380" y="154"  id="b48"  label="/" width="31" height="24"/>
              <s:Button x="368"  y="132"  id="b49" label=";" width="31" height="24"/>
               <s:Button x="396" y="132"  id="b50" label="'" width="31"  height="24"/>
              <s:Button x="43" y="154"  id="b51"  label="shift" width="82" height="24"/>
              <s:Button  x="407" y="154" id="b52" label="shift" width="79" height="24"/>
               <s:Button x="455" y="109"  id="b53" label="\" width="31"  height="24"/>

          </s:Panel>
          <s:TextInput  x="161" y="27" id="textbox" width="253"/>

      </s:Application>

       

       

       

       

       

       

      regards,

      saran r

        • 1. Re: How to enter text in text input box using virtual keyboard in flex application
          David_F57 Level 5

          hi,

           

          http://gumbo.flashhub.net/keyboard/

           

          this is a quick example of a 'virtual' keyboard that will enter text into a selected textinput/textarea component. The capslock and shift key states really are not quite right (really needs control over shift/cap lock combo's) but there is a simple tab and the backspace(delete) and enter key function.

           

          hope it is helpful

           

           

          David.

          • 3. Re: How to enter text in text input box using virtual keyboard in flex application
            r.saran Level 1

            hi,

            how to code for these buttons "control,alt,delete,insert and spacebar".

            can u help me how to program?

             

            i have attached the mxml code with this,

             

            virtualkeypad1.mxml

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
                           creationComplete="application1_creationCompleteHandler(event)" viewSourceURL="srcview/index.html">
               
                <fx:Script>
                    <![CDATA[
                        import flash.utils.getQualifiedSuperclassName;
                       
                        import mx.events.FlexEvent;
                        private var inpText:String = 'inp1';
                        private var shiftState:Boolean = false;
                        private var capsState:Boolean = false;
                       
                        protected function keyboard_clickHandler(event:MouseEvent):void
                        {
                            this[inpText].text = this[inpText].text+(event.currentTarget as Button).label;
                            if (shiftState == true) shift_clickHandler(null);
                        }
                       
                        protected function caps_clickHandler(event:MouseEvent):void
                        {
                            capsState = !capsState;
                            if (capsState == true)
                                currentState = "SHIFTED" else currentState = "PRIMARY";
                        }
                       
                        protected function tab_clickHandler(event:MouseEvent):void
                        {
                            this[inpText].text = this[inpText].text+"    ";
                        }
                       
                        protected function shift_clickHandler(event:MouseEvent):void
                        {
                            shiftState = !shiftState;
                            if (shiftState == true)
                                currentState = "SHIFTED" else currentState = "PRIMARY";
                        }
                       
                        protected function enter_clickHandler(event:MouseEvent):void
                        {
                            this[inpText].text = this[inpText].text+"\n";
                        }
                       
                        protected function backspace_clickHandler(event:MouseEvent):void
                        {
                            var tmpStr:String = this[inpText].text;
                            this[inpText].text = tmpStr.substr(0,tmpStr.length-1);
                        }
                       
                        protected function application1_creationCompleteHandler(event:FlexEvent):void
                        {
                            inp1.setFocus();               
                        }
                       
                       
                        protected function focus_enterHandler(event:MouseEvent):void
                        {
                            inpText = event.currentTarget.id;
                        }
                       
                    ]]>
                </fx:Script>
                <s:states>
                    <s:State name="PRIMARY"/>
                    <s:State name="SHIFTED"/>
                </s:states>
               
                <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                </fx:Declarations>
                <s:TextInput id="inp1" y="36" width="151" horizontalCenter="0" click="focus_enterHandler(event)" y.PRIMARY="239" horizontalCenter.PRIMARY="42" width.PRIMARY="199" height.PRIMARY="31"/>
               
                <s:Group id="keyboard" width="661" height="184" horizontalCenter="0" y="300" focusEnabled="false">
                    <s:Button x="5" y="5" label="~" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="`"/>
                    <s:Button x="49" y="5" label="!" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="1"/>
                    <s:Button x="93" y="5" label="@" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="2"/>
                    <s:Button x="137" y="5" label="#" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="3"/>
                    <s:Button x="181" y="5" label="$" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="4"/>
                    <s:Button x="225" y="5" label="%" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="5"/>
                    <s:Button x="269" y="5" label="^" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="6"/>
                    <s:Button x="313" y="5" label="&amp;" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="7"/>
                    <s:Button x="357" y="5" label="*" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="8"/>
                    <s:Button x="401" y="5" label="(" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="9"/>
                    <s:Button x="445" y="5" label=")" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="0"/>
                    <s:Button x="489" y="5" label="_" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="-"/>
                    <s:Button x="533" y="5" label="+" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="="/>
                    <s:Button x="577" y="5" label="Backspace" height="43" width="80" fontSize="11" fontWeight="bold" click="backspace_clickHandler(event)"/>
                    <s:Button x="5" y="48" label="Tab" height="43" width="67" fontSize="12" fontWeight="bold" click="tab_clickHandler(event)"/>
                    <s:Button x="72" y="48" label="Q" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="q"/>
                    <s:Button x="116" y="48" label="W" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="w"/>
                    <s:Button x="160" y="48" label="E" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="e"/>
                    <s:Button x="204" y="48" label="R" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="r"/>
                    <s:Button x="248" y="48" label="T" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="t"/>
                    <s:Button x="292" y="48" label="Y" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="y"/>
                    <s:Button x="336" y="48" label="U" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="u"/>
                    <s:Button x="380" y="48" label="I" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="i"/>
                    <s:Button x="424" y="48" label="O" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="o"/>
                    <s:Button x="468" y="48" label="P" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="p"/>
                    <s:Button x="512" y="48" label="{" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="["/>
                    <s:Button x="556" y="48" label="}" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="]"/>
                    <s:Button x="600" y="48" label="|" height="43" width="57" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="\"/>
                    <s:Button x="5" y="91" label="CapsLock" height="43" width="80" fontSize="12" fontWeight="bold" click="caps_clickHandler(event)"/>
                    <s:Button x="85" y="91" label="A" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="a"/>
                    <s:Button x="129" y="91" label="S" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="s"/>
                    <s:Button x="173" y="91" label="D" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="d"/>
                    <s:Button x="217" y="91" label="F" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="f"/>
                    <s:Button x="261" y="91" label="G" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="g"/>
                    <s:Button x="305" y="91" label="H" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="h"/>
                    <s:Button x="349" y="91" label="J" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="j"/>
                    <s:Button x="393" y="91" label="K" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="k"/>
                    <s:Button x="437" y="91" label="L" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="l"/>
                    <s:Button x="481" y="91" label=":" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY=";"/>
                    <s:Button x="525" y="91" label="&quot;" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="'"/>
                    <s:Button x="569" y="91" label="Enter" height="43" width="88" fontSize="24" fontWeight="bold" click="enter_clickHandler(event)"/>
                    <s:Button x="5" y="134" label="Shift" height="43" width="106" fontSize="24" fontWeight="bold" click="shift_clickHandler(event)"/>
                    <s:Button x="111" y="134" label="Z" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="z"/>
                    <s:Button x="155" y="134" label="X" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="x"/>
                    <s:Button x="199" y="134" label="C" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="c"/>
                    <s:Button x="243" y="134" label="V" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="v"/>
                    <s:Button x="287" y="134" label="B" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="b"/>
                    <s:Button x="331" y="134" label="N" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="n"/>
                    <s:Button x="375" y="134" label="M" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="m"/>
                    <s:Button x="419" y="134" label="&lt;" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY=","/>
                    <s:Button x="463" y="134" label="&gt;" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="."/>
                    <s:Button x="507" y="134" label="?" height="43" width="44" fontSize="24" fontWeight="bold" click="keyboard_clickHandler(event)" label.PRIMARY="/"/>
                    <s:Button x="551" y="134" label="Shift" height="43" width="106" fontSize="24" fontWeight="bold" click="shift_clickHandler(event)"/>
                </s:Group>
            </s:Application>

             

             

             

            thanks in advance,

            saran r