Skip navigation
Justin_19
Currently Being Moderated

Adobe air mobile - softKeyboardType is not working when using skinClass to allow scrolling?

Mar 27, 2012 3:49 PM

Tags: #as3 #skinning #flex_mobile #softkeyboard #4.6 #flash_builder_4.6 #flex4.6

I am trying to set the softKeyboardType to email but when ever i use skinClass="spark.skins.mobile.TextAreaSkin" it doesn't change it but when i take off skinClass="spark.skins.mobile.TextAreaSkin" it does work. The problem is i need the skinClass="spark.skins.mobile.TextAreaSkin" class to allow my application so scroll with out it the text does not stay with in the bounds of the text input boxes. Has anyone seen this problem or another fix the the scrolling problem?
Code examples

<s:TextInput softKeyboardType="email" id="id1" width="100%" skinClass="spark.skins.mobile.TextInputSkin" /> 
<s:TextArea softKeyboardType="email" id="id2" height="400" width="100%" skinClass="spark.skins.mobile.TextAreaSkin" />

Thank for the help,
Justin

 
Replies
  • Currently Being Moderated
    Mar 28, 2012 6:49 AM   in reply to Justin_19

    This is a known limitation. You will find many instances of this problem on the forums. The choice is, either the textArea/textInput scrolls properly with the page, OR it controls the softKeyboard type.

    If you do find a way to make both work, please share.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 13, 2012 5:23 AM   in reply to PierreSolutions

    The best way i have been able to do this is to dynamically switch the skinClass in AS

     

    So basically by default, set your TextInput to use the skinClass="spark.skins.mobile.TextInputSkin"

    Add an event Listener on creationComplete of your TI and in the creationComplete add another listener for focus

    eg:

    myTI.addEventListener(FocusEvent.FOCUS_IN,doSomething.....

     

     

    in your doSomthing method switch the class

     

    eg:

     

    myTi.setStyle("skinClass",Class(StageTextInputSkin));

    myTi..returnKeyLabel = ReturnKeyLabel.DONE;

    myTi..autoCapitalize = "sentence";

     

    Also add a listener for the softKeyboard deactivate

    myTi.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE,doSom thingElse....

     

    in your doSomthingelse method switch the skinClass back

     

    myTi.setStyle("skinClass",Class(TextInputSkin));

     

    one note here is that i also had to set a temp string variable before the switch back as the text still did not show, so...

     

    var myStr:String = myTi.text;

    myTi.setStyle("skinClass",Class(TextInputSkin));

    myTi.text = myStr;

     

     

    job done

     

    --N

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 13, 2012 7:44 AM   in reply to Nick_UK

    Good idea Nick_UK. The next step would be to wrap all that functionality up in a custom component to isolate the complexity of the workaround from the rest of your code.

    Thanks for sharing your findings.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 25, 2012 2:02 PM   in reply to Nick_UK

    Did anyone try the logic provided by Nick_UK? First would like to thank Nick_UK as his idea is pretty bright and smart.

     

    However, I can not get it working 100%, only 70% time works.  The issue I found out for no working case is: during the focus In event, the event target is TextInputSkin.StyleableTextField instead of StageTextInputSkin.StyleableStageText, although the skin has been applied already.

     

    Not too sure what is reason for that. I post my testing code below, might someone be able to point out what I am doing wrong here.

     

     

    <?xml version="1.0" encoding="utf-8"?>

    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                        xmlns:s="library://ns.adobe.com/flex/spark" title="SoftKeyBoardSkinExample"

                        initialize="init()">

              <fx:Declarations>

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

              </fx:Declarations>

              <fx:Script>

                        <![CDATA[

                                  import mx.events.FlexEvent;

     

                                  import spark.components.TextInput;

                                  import spark.skins.mobile.StageTextInputSkin;

                                  import spark.skins.mobile.TextInputSkin;

     

                                  private var txtInput:TextInput;

                                  private var numInput:TextInput;

     

                                  public function init():void

                                  {

                                            this.txtInput = new TextInput();

                                            this.txtInput.x = 100;

                                            this.txtInput.y = 100;

                                            this.txtInput.height = 80;

                                            this.txtInput.width = 200;

                                            this.txtInput.setStyle("skinClass", TextInputSkin);

                                            this.addElement(txtInput);

     

                                            this.numInput = new TextInput();

                                            this.numInput.x = 100;

                                            this.numInput.y = 200;

                                            this.numInput.height = 80;

                                            this.numInput.width = 200;

                                            this.numInput.setStyle("skinClass", TextInputSkin);

                                            this.numInput.addEventListener(FlexEvent.CREATION _COMPLETE, onCreationCompletedEvent);

                                            this.addElement(numInput);

     

                                  }

     

                                  private function onCreationCompletedEvent(event:FlexEvent):void{

                                            this.numInput.addEventListener(FocusEvent.FOCUS_I N, onFocusInEvent);

                                  }

     

                                  private function onFocusInEvent(event:FocusEvent):void{

                                            trace("Focus In" + event.currentTarget + " :" + event.target);

                                            this.numInput.setStyle("skinClass", StageTextInputSkin);

                                            this.numInput.softKeyboardType = "number";

                                            this.numInput.addEventListener(SoftKeyboardEvent. SOFT_KEYBOARD_DEACTIVATE, onSoftKeyBoardDeactivateEvent);

                                  }

     

                                  private function onSoftKeyBoardDeactivateEvent(event:SoftKeyboardEvent):void{

                                            this.numInput.removeEventListener(SoftKeyboardEve nt.SOFT_KEYBOARD_DEACTIVATE, onSoftKeyBoardDeactivateEvent);

                                            var myStr:String = this.numInput.text;

                                            this.numInput.setStyle("skinClass", TextInputSkin);

                                            this.numInput.softKeyboardType = "default";

                                            this.numInput.text = myStr;

                                  }

     

                        ]]>

              </fx:Script>

    </s:View>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 3:03 PM   in reply to jxyiliu@yahoo.ca

    Sorry it did'nt work for you. It was only a quick test and it looked like it worked fine and in theory it should

    Have you tried it with

    spark.skins.spark.TextInputSkin

    Rather than StageTextInputSkin ?

     


     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 2:37 PM   in reply to Nick_UK

    Thanks Nick_UK for your reply.

     

    Do you mean replace spark.skins.mobile.TextInputSkin with spark.skins.spark.TextInputSkin?

     

    It gave me same result as before.

     

    I found out that Event execution sequece in failed cases are different by comparing with sucessful cases.

     

    Successful path:

     

    Focus In event on target StyleableTextField of TextInputSkin <- here we switch the skin class

    Mouse Down event on target StyleableTextField of TextInputSkin

    Mouse Up event on target StageTextInputSKin of TextInput

    Focus In event on target StyleableStageText of StageTextInputSkin

     

    Failure path:

     

    Mouse Down event on target StyleableTextField of TextInputSkin

    Focus In event on target StyleableTextField of TextInputSkin <- code stop here and we never receive Mouse Up event and Focus In event like successful case.

     

    Do not know why the event sequence are different.

     

    Thanks

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 3:17 PM   in reply to jxyiliu@yahoo.ca

    The main problem we are all seeing is that its not hooking into the scroller, as this is documented not to work in a scrollable environment

     

    However try something like this, still not perfect (as i see a flicker) but it should get you going.

     

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

        xmlns:s="library://ns.adobe.com/flex/spark"

        applicationDPI="320"

        xmlns:local="*"

              applicationComplete="init()">

     

      <fx:Script>

                        <![CDATA[

                                  import mx.events.PropertyChangeEvent;

     

                                  import spark.skins.mobile.StageTextInputSkin;

                                  import spark.skins.mobile.TextInputSkin;

     

                                  protected function init():void {

                                            addHandlers(myScroller, myTI);

                                  }

     

                                  protected function setStageTextInputSkin(ti:TextInput):void {

      //FIXME could do with a check to ensure that the skin isn't being set many times when it doesn't need to

                                            var myTIText:String = ti.text;

     

                                            ti.setStyle("skinClass",Class(StageTextInputSkin));

                                            ti.returnKeyLabel = ReturnKeyLabel.DONE;

                                            ti.autoCapitalize = "sentence";

                                            ti.softKeyboardType = SoftKeyboardType.NUMBER;

     

                                            ti.text = myTIText;

                                  }

     

                                  protected function setTextInputSkin(ti:TextInput):void {

      //FIXME could do with a check to ensure that the skin isn't being set many times when it doesn't need to

                                            ti.setStyle("skinClass",Class(TextInputSkin));

                                  }

     

                                  protected function addHandlers(scroller:Scroller, ti:TextInput):void {

      // ====================== ADD LISTENERS FOR WHEN WE NEED THE STAGETEXTINPUT ===========================================

                                            ti.addEventListener(FocusEvent.FOCUS_IN, function(event:FocusEvent=null):void { setStageTextInputSkin(ti) });

     

     

      // ====================== ADD LISTENERS FOR WHEN WE NEED THE TEXTINPUT ===========================================

                                            addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ DEACTIVATE, function(event:SoftKeyboardEvent=null):void { setTextInputSkin(ti) });

                                            ti.addEventListener(FocusEvent.FOCUS_OUT, function(event:FocusEvent=null):void { setTextInputSkin(ti) });

     

      //http://stackoverflow.com/questions/4390725/flex-4-scroller/4425091#442 5091

                                            scroller.viewport.addEventListener(PropertyChange Event.PROPERTY_CHANGE, function(e:PropertyChangeEvent):void {

                                                      if (e.source == e.target && e.property == "verticalScrollPosition")

                                                                setTextInputSkin(ti);

                                                      if (e.source == e.target && e.property == "horizontalScrollPosition")

                                                                setTextInputSkin(ti);

                                            });

                                  }

                        ]]>

      </fx:Script>

     

        <s:Scroller width="100%"

            height="100%"

            verticalScrollPolicy="on"

                        id="myScroller">

     

            <s:Group width="100%"

                height="100%">

     

      <s:layout>

      <s:VerticalLayout/>

      </s:layout>

     

                <s:TextInput id="myTI" text="hello"

                    softKeyboardType="number"

                                            skinClass="spark.skins.mobile.TextInputSkin"/>

            </s:Group>

     

        </s:Scroller>

     

    </s:Application>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 15, 2012 7:09 AM   in reply to Nick_UK

    Thanks Nick_UK for your code.

     

    You are right that the root issue for softkeyboard is not working with scrollable environment.

     

    Your code post above is giving another potential workaround solution. We can switch the skin when scroller property is changing.

     

    I tested with your code above as well. The results is similar as doing switch the skin during focus in/out with 80% successful rate.

     

    Kind Regards,

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 15, 2012 7:16 AM   in reply to jxyiliu@yahoo.ca

    Thanks, wish i could be of more help but that's where i am with it

    I know that the AIR team have said its not an AIR issue so leaves us waiting for the root problem to be "fixed" in the Flex SDK

    If this is from the small contribution of Flex engineers that Adobe have who now submit to Apache or via the Apache team directly i have no idea.

    I have already tested 4.8 and i am still seeing the same issues

     

    --N

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 15, 2012 7:29 AM   in reply to Nick_UK

    Let's hope the best then.

     

    Truly appreciated all your kindly help.

     

    KR

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2012 6:26 AM   in reply to jxyiliu@yahoo.ca

    building on Nick_UK's response, I have something like:

     

    scroller.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE , function (e:PropertyChangeEvent):void

              {

                        myTI.skin.invalidateDisplayList();

              });

     

    it seems to work for now..

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2012 1:41 PM   in reply to borgea

    Hi borgea,

     

    Do you see issues when you switch over between the normal text field and number text field, like (1) focus got lost; (2) softkeyborad does not show up; (3) the value of number text field disappeared a while then redisplay; in your env?

     

    Very curious to know your testing results.

     

    Thanks,

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 10, 2013 3:50 AM   in reply to Justin_19

    Nick_UK your solution does not work for mobile iOS.
    Does anyone knows the solution to this problem?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 9, 2013 4:52 PM   in reply to Justin_19

    We might have a solution to this. Please see http://blog.flexicious.com/post/Scrolling-Issues-With-TextInput-for-Fl ex-Air-Mobile-Native-StageText.aspx

     

    Please see if it works for you and give us feed back if  it does not.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 10, 2013 8:13 AM   in reply to Flexicious

    Hi there, I'd give you feedback if only I could download your component skin, looks like post is missing dowload link. Can you please share it?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 17, 2013 1:34 AM   in reply to jxyiliu@yahoo.ca

    Sometime I see the amount of code that one need to write in order for a simple task as styling a component and it is sad. It should be build the framework in the first place.

    How can this softkeyboard doesn't have a way to style it without writing 500 lines of code?

    It is just crazy!

     
    |
    Mark as:

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