10 Replies Latest reply on Jan 15, 2013 6:57 AM by IsraelMarsilli

    how to use virtual keyboard in flex application

    r.saran

      hi..

      i am using flash builder 4,

      how to use virtual keyboard in flex?

      if any one aware of this pls reply me.......

       

      --

      saran r

        • 1. Re: how to use virtual keyboard in flex application
          Karl_Sigiscar_1971 Level 3

          Are you planning to do that for a mobile app ?

           

          If you want one, you have to implement it yourself for now.

           

          It should be easy using as many Button component instances as there are keys and a Canvas or VBox/HBox as container.

           

          Then you handle the click event for each key and you add the entry to a TextInput component.

           

          By the way, Adobe is adapting the Flex framework to mobile platforms:

          http://labs.adobe.com/technologies/flex/mobile/

           

          This might include a virtual keyboard component along with a set of other components for mobile platforms.

          1 person found this helpful
          • 2. Re: how to use virtual keyboard in flex application
            r.saran Level 1

            hi....

            thanks for ur reply

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

              hi.

               

              im using flash builder 4,

              i designed virtual keyboard, i have to update the text in text input box continuously 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 the 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>

               

               

               

               

               

              thanks & regards,

              saran r

               

               

              Message was edited by: saran r

              • 4. Re: how to enter text in text input box using virtual keyboard in flex application
                Karl_Sigiscar_1971 Level 3

                Hi,

                 

                You can declare the click event handler directly in line in MXML so you do not need the initfunc() on creationComplete:

                <s:Button x="99" y="86"  id="b4" label="2" width="30" height="24" click="handleEvent(event)" />

                 

                You do not need the switch in handleEvent, one line will do it all:

                textbox.text += Button(event.currentTarget).label;

                 

                The only advantage I see declaring all these Button components in MXML is that you can visually position the keys using the Design view in Flex Builder.

                • 6. 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

                  • 7. Re: how to use 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

                    • 8. Re: how to use virtual keyboard in flex application
                      David_F57 Level 5

                      hi,

                       

                      The spacebar is easy, just a long button with a space as the label, with insert/delete you need to also control the cursor movement which means that if the insert is toggled on you need to replace the text string with text before cursor + pressed label + string after the cursor

                       

                      first you need a var for insert     insertOn:boolean

                       

                      you need to track cursor position, so if insert is on it would be something like this

                       

                      inpText.substr(0,cursorpos)+(event.currentTarget as Button).label+inpText.substr(cursorpos+1,inpText.length);

                       

                      to remove the text at the cursor (delete)

                       

                      inpText.substr(0,cursorpos)+inpText.substr(cursorpos+1,inpText.length);

                       

                       

                      with all these 'function' keys you need boolean variables to track if they are on or off, and much like the shift key you would toggle them back to an off state after whatever function they were used for is called.

                       

                      David.

                      • 9. Re: how to use virtual keyboard in flex application
                        MarkTaylor46

                        Try this component - i've used the as a base in my apps (kiosk touch screen) and it works well.

                         

                        http://www.kerkness.ca/updated-flex-qwerty-component/

                         

                         

                        Regards,

                         

                        Mark.

                        1 person found this helpful
                        • 10. Re: how to use virtual keyboard in flex application
                          IsraelMarsilli

                          Hello Mark, I think the file of your link does not exist. I'd like to see your componente.

                           

                          Greetings