Flex 4.6 Mobile - TextArea & TextInput Skin Issues

Question

This is for Flex 4.6 on AIR 3.1. I've also got the same issue in AIR 3.5.

In the app I'm currently working on I had issues with text from textinputs and textareas staying on the screen between views, whilst scrolling etc.

The fix I saw suggested was to use a different skinclass for the textinput's and textarea's as such:

skinClass="spark.skins.spark.TextAreaSkin"

Adobe Flex Mobile - TextArea refuses to scroll on Android, StageWebView won't scroll at all is an example of one of these suggestions to use TextAreaSkin.

However I'm now having some pretty major issues when using this and the equivalent TextInputSkins.

On the iPad 2 (iOS6) we use the softkeyboard won't appear at all and on our Samsung Galaxy tablet (Android 4) the keyboard will only allow numbers and certain special characters to be entered (it also allows capital letters if I hold down on a particular letter but not when typed normally).

I've found one other mention of an issue similar to mine here: http://forums.adobe.com/message/4078890 but it had no solution.

Strangely everything works fine on my Android (Desire) phone or if I use a different keyboard app (Swiftkey) on the Samsung Galaxy Tablet then that also works fine.

I've tested this in our other app and I get the same issues in that one. (The only instances where I had to use the skin for that app was non editable textareas - I never saw the first issue I mentioned in that app).

EDIT: I've created a fairly basic demo with a few views where I've reproduced most of the issues I'm having. It's a mobile application which uses a splitview navigator. Main Application File:

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

<!-- Split View Navigator used for Tablet for panelled functionality -->
<s:SplitViewNavigator width="100%" height="100%">
    <s:layout.landscape>
        <s:HorizontalLayout />
    </s:layout.landscape>
    <s:layout.portrait>
        <s:VerticalLayout />
    </s:layout.portrait>
    <s:ViewNavigator width.landscape="35%" height.landscape="100%"
                     width.portrait="100%" height.portrait="30%" 
                     firstView="views.TestView" />
    <s:ViewNavigator width="100%" height="100%" height.portrait="100%"
                     firstView="views.TestFormHomeView" />
</s:SplitViewNavigator>
</s:Application>

Home View:

<fx:Script>
    <![CDATA[
        protected function buttonClick():void
        {
            navigator.pushView(TestView2);
        }

        protected function listClick():void
        {
            navigator.popView();
            navigator.pushView(TestFormHomeView);
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Scroller width="100%" height="100%">
    <s:HGroup width="100%">
        <s:List width="50%" click="listClick()">
            <s:ArrayCollection>
                <fx:String>Test1</fx:String>
                <fx:String>Test2</fx:String>
                <fx:String>Test3</fx:String>
                <fx:String>Test4</fx:String>
                <fx:String>Test5</fx:String>
            </s:ArrayCollection>
        </s:List>
        <s:VGroup width="50%">
            <s:TextArea id="testing" skinClass="spark.skins.spark.TextAreaSkin" />
            <s:TextArea id="testing2" />
            <s:Button click="buttonClick()" label="Next Screen" />
        </s:VGroup>
    </s:HGroup>
</s:Scroller>
</s:View>

TestView:

<?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="TestView">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:TextArea id="testing2" />
</s:View>

TestView2:

<?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="TestView2">
<fx:Script>
    <![CDATA[
        protected function goBack():void
        {
            navigator.popView();                
        }
    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
    <s:VerticalLayout />
</s:layout>
<s:TextArea id="testing2" />
<s:Button label="Back" click="goBack()" />
</s:View>

The main text area on HomeView has the skinclass applied which for me has the following issues:

iOS (iPad2): No softKeyboard at all.

Android (Samsung Galaxy Tab): Keyboard appears but only allows numbers and certain special characters

I've not been able to reproduce the issue (without the other skinclass) with text staying on the screen but on Android if you type something into the text box on the 'TestView' and click Next Screen the text in TestView will disappear after the view has loaded (until you click into the textbox). And if you have a screen long enough scrolling with text boxes causes a lot of issues if you don't use the other skinclass.

Answer 1

Okay I found out what my problem was. Turned out to be a very simple one in the end.

I was using the wrong skin. There is a mobile specific skin called:

spark.skins.mobile.TextInputSkin

It's not working perfectly yet but the fact I've actually got something working is a relief lol.

Answer 2

When we need to skin TextInput and TextArea in mobile, we need to subclass the default spark.skins.mobile.MobileSkin (or MobileTextInputSkin) since Mobile skin using Actionscript is light-weight skin comparing to the default MXML skin. If you skin TextInput and TextArea using MXML, on some devices like Samsung's phone and tablet (which do not use the default Google Android keyboard), you will get the problem that the SoftKeyboard will not appear when the input is focused.

Another thing is: we should never use the restrict property on TextInput and TextArea or otherwise, we will get the error where text keeps overwritten each other. Hope this help, Rjs37

Answer 3

I have created a workaround for the StageTextAreaSkin and the StageTextInputSkin that enables the use of these skins in a Scroller. If the only reason you want to use the TextInputSkin is to support scrolling, this this should help. It is available on GitHub:

https://github.com/lizardon/TouchScrollStageText

It works by making changes to the StyleableStageText class to listen for touch events and position changes to ancestor Scroller components.

Hopefully Apache will resolve this bug soon and a workaround will not be needed.