First thing you’ll probably want to do with your Spark TextArea component is make it transparent. This used to be quite easy in Flex 3. You’d just set the borderStyle to ‘none’. Now you need to duplicate the default Spark TextAreaSkin class and remove the border and shadow rects. You can then set the background rect’s alpha property to zero. When you’ve done this and set your SkinClass property to your new skin you’ll probably be feeling pretty good about yourself and proclaiming yourself as a Flex genius. Then you’ll populate your TextArea with some text and try out the scrollbar. You might see something like this …
… now you’ll be freaking out.
The quick solution is to set the TextArea’s editable property to false but in some situations this may not be ok. Also, hacking the class to remove the glow filter on focus might also be ‘not ideal’.
If anyone can think of a clean solution to this that keeps the functionality in place but allows you to have a transparent background, I’d like to hear about it.
July 31st, 2009 at 1:07 pm
Another solution care of Peter deHaan over at FlexExamples is the following … focusEnabled=”false” … DDEEERRRR!!!! *mong-face*
check out another wonderful Flex Example from the man …
http://blog.flexexamples.com/2009/07/24/creating-a-simple-text-editor-using-the-spark-textarea-control-in-flex-4/comment-page-1/#comment-4867
July 31st, 2009 at 1:09 pm
but still … that fix must also go in the ‘not ideal’ category. Still looking for the ultimate fix. It must be in the skin!
July 31st, 2009 at 2:22 pm
OK, you’ve inspired me to look at this again. We have a couple bugs filed about this (http://bugs.adobe.com/jira/browse/SDK-19255) but it appears the problem is with the focus rect having nothing to draw focus on except the text. I vaguely recall trying to create a transparent background in the Spark TextArea skin, but I cannot remember if that worked.
Anyways, here is another fix which may work for you. Basically just change the focusSkin (to a blank skin — spark.skins.SparkSkin):
<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/halo”
backgroundColor=”red”>
<s:TextArea id=”ta”
text=”The quick brown fox jumps over the lazy dog”
contentBackgroundColor=”haloBlue”
skinClass=”skins.CustomTextAreaSkin”
focusSkin=”spark.skins.SparkSkin”
horizontalCenter=”0″
verticalCenter=”0″ />
</s:Application>
Not sure if that is your ultimate fix or not, but if you come up with anything else/better, let me know (or ideally add it to the bug above so we can track it).
Thanks,
Peter
July 31st, 2009 at 2:37 pm
Hi Peter. Just off the top of my head I think it might be possible for the FocusSkin to create a 1px border around the bounding area of the TextArea and also the scrollbar (if visible) and then you’d still be able to have a glow on focus. I’ll need to play with it to see if it will work. Not sure how the default skin works as yet. This would be the ‘ideal’ fix as you’d maintain all the core functionality.
Thanks for a wonderful blog BTW – you’ve saved my ass on numerous occasions.
July 31st, 2009 at 2:45 pm
Re: comment #1,
You *can* solve the problem by using focusEnabled=false, But then you can no longer tab into the TextArea control. Sure, you can give the TextArea focus by clicking using the mouse, but not the keyboard. (Just something I learnt the other day when suggesting a focusEnabled hack on the forums.)
Peter
July 31st, 2009 at 2:48 pm
Also, not sure it will help at all, but I tried getting http://bugs.adobe.com/jira/browse/SDK-19255 reopened (I was still seeing some weird focus glow with a custom TextArea skin with a background fill alpha of 0% and 30%).
Please, feel free to head over to the bugbase and [vote on /subscribe to] the issue. The more votes it gets, the more Adobe will know people think the issue should get considered and/or fixed.
Peter