Further to my question, I've been trying to work how to to answer it, and have come up with a part way solution - but still not fully understanding what is going on. Thanks to the 'Flex 4 beta 2 in a week' videos I discovered the 'global' selector for CSS in Flex, so setting this up I thought would be nice and easy, but the styles from the global definition don't appear to be applied to my custom component.
What I have is a component which simply adds a TextField to the stage using AS and, for point of comparison, I've got a spark Label which is added to the stage using MXML. The style is correctly applied to the Label, but not my TextField as can be seen in a screenshot: http://www.sprymedia.co.uk/media/misc/flex4_css.png .
I can't understand why the global selector would not apply to my component. My CSS looks like this:
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
@namespace cx "components.*";
Can anyone offer a suggestion on how to make the global selector apply to my component's TextField as well?
What TextField class are you using? Try using a spark TextArea, TextInput instead, to see if this makes a difference.
Thanks very much for the reply. I was using a flash.text.TextField instance. In some cases I was applying a TextFormatter to align parts of the information in the field to tabs. Generally working well, but not styling.
I tried your suggestion of using TextArea and that certainly does have an effect - not quite what I was intending, but that's probably just because I've not set a parameter or two (like non-editable). So does the 'global' style apply globally, but not to the flash.text.* classes? It seems odd that the TextField class hasn't been styled.
Yes, this "dichotomy impedance mismatch" is sometimes rather non-intuitive. There are two main sets of components, as I understand things, flash components and flex components. Only the latter kind can be styled using CSS. To complicate matters further, there are the new "spark" and the older "halo" flex components, which again have numerous subtle differences, although they generally tend to play better together.
Thanks again for your replies. I understand the difference between the Flash and Flex controls, and then the differences between the spark and halo components of Flex, but I had rather expected the 'global' CSS to be applied globally. Perhaps this should be filed as a bug, or at least a note in the documentation?
The TextField class documentation says: "You can apply Cascading Style Sheets (CSS) styles to text fields by using the
TextField.styleSheetproperty and the StyleSheet class." which is what lead me to believe that it could be styled via CSS and therefore would pick up global settings.
but I had rather expected the 'global' CSS to be applied globally
It is, but it's applied to components only.
flash.text.TextField is not part of the Flex Framework, it's a built in object, part of the Flash Player.
So to summarize, there's 2 forms of CSS. 1 that is intended for styling components (mainly visually) and one that's intented for styling text.
The latter needs to be applied manually - as it says in the docs - using the TextField.styleSheet property.
OH... if you're creating a custom component and want to apply styles to it, read this:
Look for: Defining a style property
And have a look at the classConstruct()static method.
I'm not sure if this applies to Spark components as well though, things may have changed.