Strack @ Adobe

Any scrollers I’ve used (up until today) on mobile devices have been through lists, so I have created my own custom ItemRenderers.

Well, today I decided to be lazy and just add TextInput controls, along with labels and spacers, directly into a VGroup.

Compiled, debugged, and tested, all will great success….. until I tried to actually put text in the text boxes!!!
If you enter text, you get very odd text placement, and often the text will disappear entirely:

Well fancy that!

I did some digging and found out it’s intentionally this way, for performance reasons.  The parent component for TextInput and TextArea is StageText, which really REALLY hates scrollers (must have done something to StageText as a child!).

It’s a pretty straightforward fix: Adobe provides a custom skin that will heal the hatred, and all you need to do is reference it, like so:

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

.myTextInputStyle {

skinClass: ClassReference("spark.skins.mobile.TextInputSkin");

}

.myTextAreaStyle {

skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");

}

</fx:Style>

Then add a reference to your TextInput / Text Area Field:

<s:TextInput id="txtSignName" width="415" styleName="myTextInputStyle"/>

I get the logic behind it – mostly because let’s face it, how often are you NOT going to reskin / use an ItemRenderer?- but it’s still pretty troublesome to find the solution.
(btw, I got the answer from the Adobe Flex 4.6 reference, found here)

I’m curious to see down the road, as processors get faster in tablets, what the default settings will be. I suspect we’ll find that settings/optimizations like this will become increasingly rare as performance improves.

-Strack