2 Replies Latest reply on Jul 21, 2010 9:52 AM by pdubs10

    Styling a TextArea


      So I'm trying to style a relatively simple application where I'm showing a list of dynamically generated text entries. The entire application, minus RPC code, consists of a VBox with TextAreas dynamically added inside it. I'm running into problems styling the TextArea. Mostly what I want to do is set a background color and background alpha, but I'd be happy to be able to throw an image back there at this point. The CSS-esque styling isn't doing anything when I set a background color. I believe in previous projects I could just set "backgroundColor" and "backgroundAlpha" and be on my way, but that's not working for whatever reason. I'm using Flex 4 with the Spark default theme.

        • 1. Re: Styling a TextArea
          John Hall Level 4

          My guess is that you'll want to create a skinClass to do that with Flex 4. That probably seems like a pain but it's actually pretty easy. While you can do lots of things with the new skin architecture, to get started, drop a textArea on the stage. On the right side properties panel where it says Skin, click the dropdown box and choose Create. It'll make a copy of the default textArea skin.


          If that doesn't work for you (and it doesn't for me but used to) go over the Package Explorer, create a new folder under your src called skins or something. Then right click on that folder and choose New MXML Skin and base it on the Spark.TextArea (click the browse button for Host Component).Give the skin a name, like MyTextAreaSkin and you're set.


          Now you'll have a skin that you can style visually quite easily. When you dynamically create your textAreas in your code, associate the skinclass with it - something like myTextArea.setStyle("skinClass", skins.MyTextArea);


          Hope that works for you. Once you get used to using the new skin approach, I think you'll like it as you have a lot more control with just a couple of steps.

          • 2. Re: Styling a TextArea
            pdubs10 Level 1

            Thanks, that helps a lot. I had to strip all the AS from the style class to make it actually do what I wanted, but I can now set the background color and alpha. I can understand the appeal of this new skinning method, but it's highly counter-intuitive when you just need to set simple styles. Why are all the style properties even there if they don't do anything? It's more extensible with a significant cut to usability, a lack of backwards compatability (took me hours to figure out how to set something as simple as the application backgroundAlpha property, a property which exists, but does nothing by default, requiring you to create a new skin and add one line that sets the alpha based on given property right after the same is done with the background color...the default skin picks and chooses what valid properties it will carry over), and seemingly incomplete implementation of styles. Obviously I'll have to figure this out, but I think Flex may have jumped the shark on this; it should be simple to do simple things, if you can make it easier to do the complex, that's just a bonus.