Skip navigation
joe.coyle
Currently Being Moderated

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

Dec 19, 2012 3:01 PM

Tags: #flash_builder #flex #mx:controls #virtual_keyboard #actionsript_3

I have created a simple Adobe Air Windowed Application.  The application uses the mx:HTML controls to load a web page inside my application.  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.

 

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.

 

I understand the concept of event listeners and using a variable to store the text field id and using a focus 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 4 files that make up my project (File names are in read text).

 

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://google.com';
                              }
                    ]]>
          </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"
                    paintsDefaultBackground="false"
                    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>
 

 

Main-app.aml

 

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.5">
 
 
<!-- Adobe AIR Application Descriptor File Template.
 
 
          Specifies parameters for identifying, installing, and launching AIR applications.
 
 
          xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.5
                              The last segment of the namespace specifies the version 
                              of the AIR runtime required for this application to run.
  
          minimumPatchLevel - The minimum patch level of the AIR runtime required to run 
                              the application. Optional.
-->
 
 
          <!-- A universally unique application identifier. Must be unique across all AIR applications.
          Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
          <id>Main</id>
 
 
          <!-- Used as the filename for the application. Required. -->
          <filename>Virtual Keyboard</filename>
 
 
          <!-- The name that is displayed in the AIR application installer. 
          May have multiple values for each language. See samples or xsd schema file. Optional. -->
          <name></name>
  
          <!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade. 
          Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
          An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
          <versionNumber>1.0.0</versionNumber>
                             
          <!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
          <!-- <versionLabel></versionLabel> -->
 
 
          <!-- Description, displayed in the AIR application installer.
          May have multiple values for each language. See samples or xsd schema file. Optional. -->
          <!-- <description></description> -->
 
 
          <!-- Copyright information. Optional -->
          <!-- <copyright></copyright> -->
 
 
          <!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
          <!-- <publisherID></publisherID> -->
 
 
          <!-- Settings for the application's initial window. Required. -->
          <initialWindow>
                    <!-- The main SWF or HTML file of the application. Required. -->
                    <!-- Note: In Flash Builder, the SWF reference is set automatically. -->
                    <content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
  
                    <!-- The title of the main window. Optional. -->
                    <!-- <title></title> -->
 
 
                    <!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
          <systemChrome>none</systemChrome>
 
 
                    <!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
          <transparent>false</transparent>
 
 
                    <!-- Whether the window is initially visible. Optional. Default false. -->
          <visible>false</visible>
 
 
                    <!-- Whether the user can minimize the window. Optional. Default true. -->
          <minimizable>false</minimizable>
 
 
                    <!-- Whether the user can maximize the window. Optional. Default true. -->
          <maximizable>false</maximizable>
 
 
                    <!-- Whether the user can resize the window. Optional. Default true. -->
          <resizable>false</resizable>
  
                    <!-- The window's initial width in pixels. Optional. -->
          <width>1280</width>
 
 
                    <!-- The window's initial height in pixels. Optional. -->
          <height>1024</height>
 
 
                    <!-- The window's initial x position. Optional. -->
                    <!-- <x></x> -->
 
 
                    <!-- The window's initial y position. Optional. -->
                    <!-- <y></y> -->
 
 
                    <!-- The window's minimum size, specified as a width/height pair in pixels, such as "400 200". Optional. -->
          <minSize>1280 1024</minSize>
          <!-- <minSize>1024 768</minSize> -->
 
 
                    <!-- The window's initial maximum size, specified as a width/height pair in pixels, such as "1600 1200". Optional. -->
          <maxSize>1280 1024</maxSize>
          <!-- <maxSize>1024 768</maxSize> -->
  
          </initialWindow>
 
 
          <!-- We recommend omitting the supportedProfiles element, -->
          <!-- which in turn permits your application to be deployed to all -->
          <!-- devices supported by AIR. If you wish to restrict deployment -->
          <!-- (i.e., to only mobile devices) then add this element and list -->
          <!-- only the profiles which your application does support. -->
          <!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->
 
 
          <!-- The subpath of the standard default installation location to use. Optional. -->
          <!-- <installFolder></installFolder> -->
 
 
          <!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
          <!-- <programMenuFolder></programMenuFolder> -->
 
 
          <!-- The icon the system uses for the application. For at least one resolution,
          specify the path to a PNG file included in the AIR package. Optional. -->
          <!-- <icon>
                    <image16x16></image16x16>
                    <image32x32></image32x32>
                    <image36x36></image36x36>
                    <image48x48></image48x48>
                    <image72x72></image72x72>
                    <image128x128></image128x128>
          </icon> -->
 
 
          <!-- Whether the application handles the update when a user double-clicks an update version
          of the AIR file (true), or the default AIR application installer handles the update (false).
          Optional. Default false. -->
          <!-- <customUpdateUI></customUpdateUI> -->
  
          <!-- Whether the application can be launched when the user clicks a link in a web browser.
          Optional. Default false. -->
          <!-- <allowBrowserInvocation></allowBrowserInvocation> -->
 
 
          <!-- Listing of file types for which the application can register. Optional. -->
          <!-- <fileTypes> -->
 
 
                    <!-- Defines one file type. Optional. -->
                    <!-- <fileType> -->
 
 
                              <!-- The name that the system displays for the registered file type. Required. -->
                              <!-- <name></name> -->
 
 
                              <!-- The extension to register. Required. -->
                              <!-- <extension></extension> -->
  
                              <!-- The description of the file type. Optional. -->
                              <!-- <description></description> -->
  
                              <!-- The MIME content type. -->
                              <!-- <contentType></contentType> -->
  
                              <!-- The icon to display for the file type. Optional. -->
                              <!-- <icon>
                                        <image16x16></image16x16>
                                        <image32x32></image32x32>
                                        <image48x48></image48x48>
                                        <image128x128></image128x128>
                              </icon> -->
  
                    <!-- </fileType> -->
          <!-- </fileTypes> -->
 
 
          <!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
          <!--<android> 
                    <manifestAdditions>
                    <![CDATA[
                              <manifest android:installLocation="auto">
                                        <uses-permission android:name="android.permission.INTERNET"/>
                                        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
                                        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
                                        <uses-configuration android:reqFiveWayNav="true"/>
                                        <supports-screens android:normalScreens="true"/>
                                        <uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
                                        <application android:enabled="true">
                                                  <activity android:excludeFromRecents="false">
                                                            <intent-filter>
                                                                      <action android:name="android.intent.action.MAIN"/>
                                                                      <category android:name="android.intent.category.LAUNCHER"/>
                                                            </intent-filter>
                                                  </activity>
                                        </application>
                              </manifest>
                    ]]>
                    </manifestAdditions> 
          </android> -->
          <!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
</application>

 

VirtualKeyboardEvent.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;
        }
    }
}
 

 

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="""/>
    <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="<"/>
    <s:Button id="btnStop" x="430" y="130" width="32" height="32" label="."
              click="handleButtonClick(event)"
              label.Uppercase=">"/>
    <s:Button id="btnForwardSlash" x="470" y="130" width="32" height="32" label="/"
              click="handleButtonClick(event)"
              label.Uppercase="?"/>
</s:Group>
 
 

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points