0 Replies Latest reply on Dec 17, 2012 12:03 PM by joe.coyle

    How do I implement a virtual keyboard?  I will compensate for assistance.

    joe.coyle

      Administrators: I hope this is in the correct forum.  If this is not the correct forum please move it to the correct one.

       

      I have created a simple Adobe Air Windowed Application.  The application uses the mx:HTML control (location) to load a web page.  I have tried other means to load the web page but due to formatting issue, all other methods fail to load the page correctly.  Any solution will need to use the mx HTML controls unless there is something I am missing.  Also, I do not have access to the backend of the website.  I am only able to modify a custom style sheet to overrited the default style sheet.

       

      I have added a virtual keyboard to my project.  However, when I enter a text field and then select a key on the virtual keyboard, I lose focus on the text field.  These text fields are java text fields.  I think this makes a difference when setting up the fuctions to pass keyboard input.

       

      I understand the concept of event listeners and using a variable to store the text field id and using onfocus event to gain the id of the text field.  However, I am not a programmer by no means and this is way above my head.  I am looking for someone to spend 30 or 60 minutes adding the needed code to my project so I can use the virtual keyboard.  I would be willing to send someone a gift card to their favorite restaurant as compensation.

       

      I have included the 3 files that make up my project.

       

      Your help will be greatly appreciated.

       

      Best regards,

       

      Joe

       

      Main.mxml

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                                           xmlns:s="library://ns.adobe.com/flex/spark" 
                                                           xmlns:mx="library://ns.adobe.com/flex/mx"
                                                           xmlns:components="com.uibuzz.components.*"
                                                           xmlns:local="*"
                                                           xmlns:keyboard=".*"
                                                           xmlns:panel=".*"
                                                           showStatusBar="false"
                                                           alwaysInFront="true"
                                                           creationComplete="RunFunction(event)">
      
      
        
        
                <fx:Script>
                          <![CDATA[
                                    import mx.events.FlexEvent;
        
        
                                    protected function RunFunction(event:FlexEvent):void
                                    {
      
      
                                              nativeWindow.x = (Capabilities.screenResolutionX - nativeWindow.width) / 2;
                                              nativeWindow.y = (Capabilities.screenResolutionY - nativeWindow.height) / 2;
                                              // Mouse.hide();
        
                                              //html.location = 'https://ccrcafe.prodqa.alohaonline.radiantsystems.com/Login.aspx';
                                              html.location = 'https://google.com';
                                              html.focusEnabled = true;
      
      
                                    }
        
        
                          ]]>
                </fx:Script>
      
      
                <fx:Script>
                          <![CDATA[
        
                                    // Virtual Keyboard
                                    import com.uibuzz.events.VirtualKeyboardEvent;
        
                                    protected function HandleKeyEvent(event:VirtualKeyboardEvent):void
                                    {
                                              trace("Key pressed: " + event.keyLabel);
                                    }
        
                          ]]>
        
                </fx:Script>
      
      
      
      
                <mx:HTML id="html"
                          width="100%"
                          height="100%" x="0" y="0"/>
        
                <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
      
      
                </fx:Declarations>
        
      
      
      <components:VirtualKeyboard x="325" y="770" KeyClicked="HandleKeyEvent(event)"/>
        
        
      </s:WindowedApplication>
      
      
      

       

      VirtualKeyboard.mxml

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="610" height="215" currentState="Lowercase">
                <s:layout>
                          <s:BasicLayout/>
                </s:layout>
      
          <fx:Metadata>
              [Event(name="KeyClicked", type="com.uibuzz.events.VirtualKeyboardEvent")]
          </fx:Metadata>
      
          <fx:Script>
              <![CDATA[
                  import com.uibuzz.events.VirtualKeyboardEvent;
                  protected function handleShiftButton(event:MouseEvent):void
                  {
                      if (this.currentState == "Lowercase")
                      {
                          this.currentState = "Uppercase";
                      }
                      else
                      {
                          this.currentState = "Lowercase";
                      }
                  }
      
                  protected function handleButtonClick(event:MouseEvent):void
                  {
                      var e:VirtualKeyboardEvent = new VirtualKeyboardEvent("KeyClicked");
                      e.keyLabel = event.currentTarget.label;
                      dispatchEvent(e);
                  }
      
              ]]>
          </fx:Script>
      
          <s:states>
              <s:State name="Lowercase"/>
              <s:State name="Uppercase"/>
          </s:states>
                <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                </fx:Declarations>
          <s:Button id="btn1" x="50" y="10" width="32" height="32" label="1"
                    click="handleButtonClick(event)"
                    label.Uppercase="!"/>
          <s:Button id="btnTilde" x="10" y="10" width="32" height="32" label="`"
                    click="handleButtonClick(event)"
                    label.Uppercase="~"/>
          <s:Button id="btn2" x="90" y="10" width="32" height="32" label="2"
                    click="handleButtonClick(event)"
                    label.Uppercase="@" fontSize.Uppercase="11"/>
          <s:Button id="btn3" x="130" y="10" width="32" height="32" label="3"
                    click="handleButtonClick(event)"
                    label.Uppercase="#"/>
          <s:Button id="btn4" x="170" y="10" width="32" height="32" label="4"
                    click="handleButtonClick(event)"
                    label.Uppercase="$"/>
          <s:Button id="btn5" x="210" y="10" width="32" height="32" label="5"
                    click="handleButtonClick(event)"
                    label.Uppercase="%"/>
          <s:Button id="btn6" x="250" y="10" width="32" height="32" label="6"
                    click="handleButtonClick(event)"
                    label.Uppercase="^"/>
          <s:Button id="btn7" x="290" y="10" width="32" height="32" label="7"
                    click="handleButtonClick(event)"
                    label.Uppercase="&amp;"/>
          <s:Button id="btn8" x="330" y="10" width="32" height="32" label="8"
                    click="handleButtonClick(event)"
                    label.Uppercase="*"/>
          <s:Button id="btn9" x="370" y="10" width="32" height="32" label="9"
                    click="handleButtonClick(event)"
                    label.Uppercase="("/>
          <s:Button id="btn0" x="410" y="10" width="32" height="32" label="0"
                    click="handleButtonClick(event)"
                    label.Uppercase=")"/>
          <s:Button id="btnMinus" x="450" y="10" width="32" height="32" label="-"
                    click="handleButtonClick(event)"
                    label.Uppercase="_"/>
          <s:Button id="btnEquals" x="490" y="10" width="32" height="32" label="="
                    click="handleButtonClick(event)"
                    label.Uppercase="+"/>
          <s:Button id="btnDelete" x="530" y="10" width="70" height="32" label="Delete" click="handleButtonClick(event)"/>
          <s:Button id="btnEnter" x="530" y="90" width="70" height="32" label="Enter" click="handleButtonClick(event)"/>
          <s:Button id="btnRightShift" x="510" y="130" width="70" height="32" label="Shift"
                    click="handleShiftButton(event)"/>
          <s:Button id="btnLeftShift" x="30" y="130" width="70" height="32" label="Shift"
                    click="handleShiftButton(event)"/>
          <s:Button id="btnTab" x="10" y="50" width="50" height="32" label="Tab" click="handleButtonClick(event)"/>
          <s:Button id="btnQ" x="70" y="50" width="32" height="32" label="q"
                    click="handleButtonClick(event)"
                    label.Uppercase="Q"/>
          <s:Button id="btnW" x="110" y="50" width="32" height="32" label="w"
                    click="handleButtonClick(event)"
                    label.Uppercase="W"/>
          <s:Button id="btnE" x="150" y="50" width="32" height="32" label="e"
                    click="handleButtonClick(event)"
                    label.Uppercase="E"/>
          <s:Button id="btnR" x="190" y="50" width="32" height="32" label="r"
                    click="handleButtonClick(event)"
                    label.Uppercase="R"/>
          <s:Button id="btnT" x="230" y="50" width="32" height="32" label="t"
                    click="handleButtonClick(event)"
                    label.Uppercase="T"/>
          <s:Button id="btnY" x="270" y="50" width="32" height="32" label="y"
                    click="handleButtonClick(event)"
                    label.Uppercase="Y"/>
          <s:Button id="btnU" x="310" y="50" width="32" height="32" label="u"
                    click="handleButtonClick(event)"
                    label.Uppercase="U"/>
          <s:Button id="btnI" x="350" y="50" width="32" height="32" label="i"
                    click="handleButtonClick(event)"
                    label.Uppercase="I"/>
          <s:Button id="btnO" x="390" y="50" width="32" height="32" label="o"
                    click="handleButtonClick(event)"
                    label.Uppercase="O"/>
          <s:Button id="btnP" x="430" y="50" width="32" height="32" label="p"
                    click="handleButtonClick(event)"
                    label.Uppercase="P"/>
          <s:Button id="btnLeftBracket" x="470" y="50" width="32" height="32" label="["
                    click="handleButtonClick(event)"
                    label.Uppercase="{"/>
          <s:Button id="btnRightBracket" x="510" y="50" width="32" height="32" label="]"
                    click="handleButtonClick(event)"
                    label.Uppercase="}"/>
          <s:Button id="btnBackSlash" x="550" y="50" width="32" height="32" label="\"
                    click="handleButtonClick(event)"
                    label.Uppercase="|"/>
          <s:Button id="btnA" x="90" y="90" width="32" height="32" label="a"
                    click="handleButtonClick(event)"
                    label.Uppercase="A"/>
          <s:Button id="btnS" x="130" y="90" width="32" height="32" label="s"
                    click="handleButtonClick(event)"
                    label.Uppercase="S"/>
          <s:Button id="btnD" x="170" y="90" width="32" height="32" label="d"
                    click="handleButtonClick(event)"
                    label.Uppercase="D"/>
          <s:Button id="btnF" x="210" y="90" width="32" height="32" label="f"
                    click="handleButtonClick(event)"
                    label.Uppercase="F"/>
          <s:Button id="btnG" x="250" y="90" width="32" height="32" label="g"
                    click="handleButtonClick(event)"
                    label.Uppercase="G"/>
          <s:Button id="btnH" x="290" y="90" width="32" height="32" label="h"
                    click="handleButtonClick(event)"
                    label.Uppercase="H"/>
          <s:Button id="btnJ" x="330" y="90" width="32" height="32" label="j"
                    click="handleButtonClick(event)"
                    label.Uppercase="J"/>
          <s:Button id="btnK" x="370" y="90" width="32" height="32" label="k"
                    click="handleButtonClick(event)"
                    label.Uppercase="K"/>
          <s:Button id="btnL" x="410" y="90" width="32" height="32" label="l"
                    click="handleButtonClick(event)"
                    label.Uppercase="L"/>
          <s:Button id="btnSemiColon" x="450" y="90" width="32" height="32" label=";"
                    click="handleButtonClick(event)"
                    label.Uppercase=":"/>
          <s:Button id="btnQuote" x="490" y="90" width="32" height="32" label="'"
                    click="handleButtonClick(event)"
                    label.Uppercase="&quot;"/>
          <s:Button id="btnZ" x="110" y="130" width="32" height="32" label="z"
                    click="handleButtonClick(event)"
                    label.Uppercase="Z"/>
          <s:Button id="btnX" x="150" y="130" width="32" height="32" label="x"
                    click="handleButtonClick(event)"
                    label.Uppercase="X"/>
          <s:Button id="btnC" x="190" y="130" width="32" height="32" label="c"
                    click="handleButtonClick(event)"
                    label.Uppercase="C"/>
          <s:Button id="btnV" x="230" y="130" width="32" height="32" label="v"
                    click="handleButtonClick(event)"
                    label.Uppercase="V"/>
          <s:Button id="btnB" x="270" y="130" width="32" height="32" label="b"
                    click="handleButtonClick(event)"
                    label.Uppercase="B"/>
          <s:Button id="btnSpace" x="150" y="170" width="272" height="32" label="Space" click="handleButtonClick(event)"/>
          <s:Button id="btnN" x="310" y="130" width="32" height="32" label="n"
                    click="handleButtonClick(event)"
                    label.Uppercase="N"/>
          <s:Button id="btnM" x="350" y="130" width="32" height="32" label="m"
                    click="handleButtonClick(event)"
                    label.Uppercase="M"/>
          <s:Button id="btnComma" x="390" y="130" width="32" height="32" label=","
                    click="handleButtonClick(event)"
                    label.Uppercase="&lt;"/>
          <s:Button id="btnStop" x="430" y="130" width="32" height="32" label="."
                    click="handleButtonClick(event)"
                    label.Uppercase="&gt;"/>
          <s:Button id="btnForwardSlash" x="470" y="130" width="32" height="32" label="/"
                    click="handleButtonClick(event)"
                    label.Uppercase="?"/>
      </s:Group>
      
      

       

      VirtualKeyboardEvents.as

       

      package com.uibuzz.events
      {
          import flash.events.Event;
      
          public class VirtualKeyboardEvent extends Event
          {
              public var keyLabel:String;
      
              public function VirtualKeyboardEvent(type:String)
              {
                  super(type);
              }
      
              override public function clone():Event
              {
                  var eventObj:VirtualKeyboardEvent = new VirtualKeyboardEvent(type);
                  eventObj.keyLabel = this.keyLabel;
                  return eventObj;
              }
          }
      }
      
      

       

      Message was edited by: joe.coyle  I left out some code on the Main.mxml file.