12 Replies Latest reply on Dec 19, 2011 11:02 PM by GANESHPACHPIND

    Flex Mobile Project Soft Keyboard

    jgreco79

      I just started testing Flex 4.5 for developing mobile apps.  I have a few questions about the soft keyboard:

       

      1) Is there any way to force the soft keyboard to only display the number pad if the text input is restricted to just numbers?  I know from Android programming that this is possible, but is this possible in Flex?

       

      2) Is it possible to disable the keyboard text prediction? I would like to disable this in one view where I created an autocomplete.

       

      Any help would be appreciated.

        • 1. Re: Flex Mobile Project Soft Keyboard
          mattdwm Level 1

          I'm also trying figure out how to get a number pad for text inputs.

          • 2. Re: Flex Mobile Project Soft Keyboard
            fingersmagoo

            Hello,

             

            Any information on this would be great.

             

            Paul

            • 3. Re: Flex Mobile Project Soft Keyboard
              SpaghettiCoder Level 3

              I waited, and googled...and found nothing...

               

              should make a request for a nice and simple way to create customized soft keyboards in air 3.0

               

              I ended up having to create my own keyboard, and disabling the built in one...

              • 4. Re: Flex Mobile Project Soft Keyboard
                fingersmagoo Level 1

                I did the same thing.  I created a control based on a label and showed a  popup with the number pad on it.  Let me know if you would like the  code, I will gladly share it.

                Paul

                • 5. Re: Flex Mobile Project Soft Keyboard
                  Spanky006

                  @fingersmagoo I've been looking for the same thing to no avail - if you're willing to share your code I would really appreciate not having to build one myself!

                  • 6. Re: Flex Mobile Project Soft Keyboard
                    fingersmagoo Level 1

                    OK,

                     

                    Being I cannot upload a zip file, here is the code.  It is catered to what I needed, but you can build form this.

                     

                    Paul

                     

                     

                    NumberPad.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"

                    width="274" height="400">

                    <fx:Declarations>

                    <!-- Place non-visual elements (e.g., services, value objects) here -->

                    </fx:Declarations>

                    <fx:Script>

                    <![CDATA[

                     

                    import controls.NumberPad;

                    import controls.NumberPadEvent;

                     

                    import mx.managers.PopUpManager;

                     

                    public var result:Boolean=false;

                     

                    protected function btnOK_clickHandler(event:MouseEvent):void

                    {

                    setResult();

                    }

                     

                    protected function btnCancel_clickHandler(event:MouseEvent):void

                    {

                    cancelResult();

                    }

                    private function setResult(): void

                    {

                    var ce:NumberPadEvent = new NumberPadEvent(NumberPadEvent.CONFIRM_SET);

                    dispatchEvent(ce);

                    }

                    private function cancelResult(): void

                    {

                    var ce:NumberPadEvent = new NumberPadEvent(NumberPadEvent.CONFIRM_CANCEL);

                    dispatchEvent(ce);

                    }

                     

                    protected function number_clickHandler(event:MouseEvent):void

                    {

                    var ne:NumberPadEvent = new NumberPadEvent(NumberPadEvent.SEND_KEY);

                    var btn:Button = event.currentTarget as Button;

                    ne.key=btn.label;

                    if(ne.key=="Clear")

                    {

                    txtNumber.text="";

                    }

                    else

                    {

                    txtNumber.text= txtNumber.text+ne.key

                    }

                    dispatchEvent(ne);

                    }

                     

                    ]]>

                    </fx:Script>

                    <s:Rect id="myRect" width="100%" height="100%" alpha="1.0" bottomLeftRadiusX="5"

                    bottomRightRadiusX="5" topLeftRadiusX="5" topRightRadiusX="5">

                    <s:stroke>

                    <s:SolidColorStroke color="0x92592a" weight="1"/>

                    </s:stroke>

                    <s:fill>

                    <s:LinearGradient rotation="90">

                    <s:GradientEntry color="0xe4992e" ratio=".25"/>

                    <s:GradientEntry color="0xe48701"/>

                    </s:LinearGradient>

                    </s:fill>

                    </s:Rect>

                     

                     

                    <s:VGroup left="10" right="10" top="10">

                    <s:HGroup width="100%" >

                    <s:TextInput id="txtNumber" width="100%" enabled="false" />

                    </s:HGroup>

                    <s:HGroup width="100%" >

                    <s:Button width="100%" height="100%" label="7" click="number_clickHandler(event)" />

                    <s:Button width="100%" height="100%" label="8" click="number_clickHandler(event)"/>

                    <s:Button width="100%" height="100%" label="9" click="number_clickHandler(event)"/>

                    </s:HGroup>

                    <s:HGroup width="100%">

                    <s:Button width="100%" height="100%" label="4" click="number_clickHandler(event)"/>

                    <s:Button width="100%" height="100%" label="5" click="number_clickHandler(event)"/>

                    <s:Button width="100%" height="100%" label="6" click="number_clickHandler(event)"/>

                    </s:HGroup>

                    <s:HGroup width="100%">

                    <s:Button width="100%" height="100%" label="1" click="number_clickHandler(event)"/>

                    <s:Button width="100%" height="100%" label="2" click="number_clickHandler(event)"/>

                    <s:Button width="100%" height="100%" label="3" click="number_clickHandler(event)"/>

                    </s:HGroup>

                    <s:HGroup width="100%">

                    <s:Button width="80%" height="100%" label="0" click="number_clickHandler(event)"/>

                    <s:Button width="20%" height="100%" label="." click="number_clickHandler(event)"/>

                    </s:HGroup>

                    <s:HGroup id="btnHGroup" width="100%" height="100%">

                    <s:Button label="Clear" width="100%" click="number_clickHandler(event)"/>

                    <s:Button id="btnOK" width="100%" label="Done" click="btnOK_clickHandler(event)"/>

                    </s:HGroup>

                    </s:VGroup>

                     

                    </s:Group>

                    ---------------------------------------------------
                    NumberPadEvent.as
                    ---------------------------------------------------
                    package controls
                    {
                    import flash.events.Event;
                    public class NumberPadEvent extends Event
                    {
                    public static const CONFIRM_SET: String = 'confirmSet';
                    public static const CONFIRM_CANCEL: String = 'confirmCancel';
                    public static const SEND_KEY: String = 'sendKey';
                    public var key:String;
                    public function NumberPadEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
                    {
                    super(type, bubbles, cancelable);
                    }
                    }
                    }
                    ----------------------------------------------------
                    NumericTextBox.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" width="400" height="50" creationComplete="init();">
                    <fx:Declarations>
                    <!-- Place non-visual elements (e.g., services, value objects) here -->
                    </fx:Declarations>
                    <fx:Script>
                    <![CDATA[
                    import controls.NumberPad;
                    import controls.NumberPadEvent;
                    import mx.core.UIComponent;
                    import mx.events.ResizeEvent;
                    import mx.graphics.SolidColorStroke;
                    import mx.managers.PopUpManager;
                    private var normal:LinearGradientStroke = new LinearGradientStroke();
                    private var focus:SolidColorStroke = new SolidColorStroke(0x001100,2);
                    private var screenHeight:int;
                    private var screenWidth:int;
                    private var numPad:NumberPad;
                    private var main:UIComponent;
                    private function init():void
                    {
                    main = this.parentApplication as UIComponent;
                    main.addEventListener(ResizeEvent.RESIZE, app_resizeHandler);
                    normal.rotation=90;
                    var g1:GradientEntry = new GradientEntry(0x074e07, .5);
                    var g2:GradientEntry = new GradientEntry(0xC2C2C2);
                    normal.entries.push(g2);
                    normal.entries.push(g1);
                    focus.alpha = .5;
                    focus.weight=2;
                    focus.color = lblNumbers.getStyle("focusColor");
                    }
                    public function closeNumberPad():void
                    {
                    closePopup();
                    }
                    protected function setScreenSize():void
                    {
                    screenHeight = main.height;
                    screenWidth = main.width;
                    setPadSize();
                    }
                    protected function setPadSize():void
                    {
                    if(screenHeight<numPad.height || screenWidth<numPad.width)
                    {
                    numPad.width=numPad.width*.90;
                    numPad.height=numPad.height*.90;
                    setPadSize();
                    }
                    }
                    private function closePopup():void
                    {
                    main.removeEventListener(ResizeEvent.RESIZE, app_resizeHandler);
                    numPad.removeEventListener(NumberPadEvent.CONFIRM_SET, onResult);
                    numPad.removeEventListener(NumberPadEvent.CONFIRM_CANCEL, onCancel);
                    border.stroke=normal;
                    PopUpManager.removePopUp(numPad);
                    }
                    private function onCancel(event: NumberPadEvent): void
                    {
                    closePopup();
                    }
                    private function onResult(event: NumberPadEvent): void
                    {
                    onCancel(event);
                    }
                    private function sendKey(event: NumberPadEvent): void
                    {
                    if(event.key=="Clear")
                    {
                    lblNumbers.text="";
                    }
                    else
                    {
                    lblNumbers.text=lblNumbers.text+event.key;
                    }
                    }
                    protected function lblNumbers_clickHandler(event:MouseEvent):void
                    {
                    border.stroke=focus;
                    lblNumbers.setFocus();
                    numPad = new NumberPad();
                    numPad.addEventListener(NumberPadEvent.CONFIRM_SET, onResult);
                    numPad.addEventListener(NumberPadEvent.CONFIRM_CANCEL, onCancel);
                    numPad.addEventListener(NumberPadEvent.SEND_KEY, sendKey);
                    PopUpManager.addPopUp(numPad, this, true);
                    setLocationForPopUp();
                    }
                    private function setLocationForPopUp():void
                    {
                    if(numPad!=null)
                    {
                    setScreenSize();
                    var w:Number = (screenWidth -numPad.width)/2;
                    var h:Number = screenHeight - numPad.height;
                    numPad.x=w;
                    numPad.y=h;
                    }
                    }
                    protected function app_resizeHandler(event:ResizeEvent):void
                    {
                    setLocationForPopUp();
                    }
                    public function get text():String
                    {
                    return lblNumbers.text;
                    }
                    public function set text(str:String):void
                    {
                    lblNumbers.text=str;
                    }
                    ]]>
                    </fx:Script>
                    <s:Rect id="border" left="2" right="2" top="2" bottom="2" alpha="1.0" bottomLeftRadiusX="5"
                    bottomRightRadiusX="5" topLeftRadiusX="5" topRightRadiusX="5">
                    <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0x074e07" ratio=".5"/>
                    <s:GradientEntry color="0xC2C2C2"/>
                    </s:LinearGradientStroke>
                    </s:stroke>
                    </s:Rect>
                    <s:Rect left="4" right="4" top="4" bottom="4" alpha="1.0" bottomLeftRadiusX="5"
                    bottomRightRadiusX="5" topLeftRadiusX="5" topRightRadiusX="5">
                    <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                    <s:GradientEntry color="0xC2C2C2" ratio=".5"/>
                    <s:GradientEntry color="0x074e07"/>
                    </s:LinearGradientStroke>
                    </s:stroke>
                    <s:fill>
                    <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xF2F2F5" ratio=".5"/>
                    <s:GradientEntry color="0xDADAE3"/>
                    </s:LinearGradient>
                    </s:fill>
                    </s:Rect>
                    <s:Label id="lblNumbers" left="10" right="10" top="0" bottom="0" click="lblNumbers_clickHandler(event)" text=""
                    verticalAlign="middle"/>
                    </s:Group>
                    ---------------------------------------------------

                    • 7. Re: Flex Mobile Project Soft Keyboard
                      Spanky006 Level 1

                      Thanks @fingersmagoo for the code, it will certainly save me some time!

                      • 8. Re: Flex Mobile Project Soft Keyboard
                        JmadDuke543

                        @fingersmagoo, thanks for posting the code, this should really help me out!  I see that you're importing controls.NumberPad, but I don't see that file in what you posted.  Please will you put it up?  I've tried to create it myself but apparently I've got something wrong...

                        Thanks v. much!

                        • 9. Re: Flex Mobile Project Soft Keyboard
                          fingersmagoo Level 1

                          Hello,

                           

                          The file you are looking for is in the original post.  It is the first one listed.  You only need the three files I attached.

                           

                          All you need to do is add it to your form

                           

                          <controls:NumericTextBox id="txtGallons" width="120"/>

                           

                          Then to close it I did the following:  Yours may vary being I was doing it when the view was being discarded (Otherwise the popup stayed when the view was navigated away from)

                           

                          protected function view1_viewDeactivateHandler(event:ViewNavigatorEvent):void

                          {

                                try    {txtGallons.closeNumberPad();}catch(error:Error){}

                          }

                          • 10. Re: Flex Mobile Project Soft Keyboard
                            JmadDuke543 Level 1

                            Thanks a ton!  It's working like a charm!

                            • 11. Re: Flex Mobile Project Soft Keyboard
                              GANESHPACHPIND

                              update to flrex 4.6 it havesoftkeyboardtyp property for textinput set it as numertic

                              • 12. Re: Flex Mobile Project Soft Keyboard
                                GANESHPACHPIND Level 1

                                in apllication descrption file set

                                 

                                <softkeyboardbehviour>pan<softkeyboardbehviour>