7 Replies Latest reply on Jan 12, 2010 12:25 AM by GordonSmith

    Not understanding CSS

    allanjard Level 1

      Hello all,

       

      I'm trying to get my head around using CSS to style my application, but I think I'm missing something, as it's is surprisingly difficult at the moment. What I've got just now is my CSS with a few simple classes defining fontSize etc, and to apply these I need to load the stylesheet, apply the stylesheet to each text element I want to use it on, and use the htmlText to give a specific <span> with a class.

       

      There are a few things I'd like to be able to do:

       

      1. Set a global font, so I don't need to attach the stylesheet to every single text element I create.

      2. Is it really necessary to use htmlText and a <span class="whatever">...</span>, to apply a specific CSS class? Lets say I have two TextField elements in a container and I'd like to style them differently, this is the only way I can see of doing it with CSS.

       

      All of the examples I can find, refer to using styleName on the element (although TextField doesn't appear to have this property), and applying a specific CSS class using that.

       

      I think I'm just getting myself in a bit of a muddle (coming from an HTML/CSS background), and any help in straightening this out would be hugely appreciated.

       

      Regards,

      Allan

        • 1. Re: Not understanding CSS
          allanjard Level 1

          Hello all,

           

          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.*";


          global

          {

              fontFamily: Verdana;

              fontSize: 26;

          color: #ffffff;

          }

           

          Can anyone offer a suggestion on how to make the global selector apply to my component's TextField as well?

           

          Thanks,

          Allan

          • 2. Re: Not understanding CSS
            TheWuzziWizz

            What TextField class are you using? Try using a spark TextArea, TextInput instead, to see if this makes a difference.

             

            -JM

            • 3. Re: Not understanding CSS
              allanjard Level 1

              Hi JM,

               

              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.

               

              Regards,

              Allan

              • 4. Re: Not understanding CSS
                TheWuzziWizz Level 1

                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.

                 

                -JM

                • 5. Re: Not understanding CSS
                  allanjard Level 1

                  Hi JM,

                   

                  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.styleSheet property 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.

                   

                  Regards,

                  Allan

                  • 6. Re: Not understanding CSS
                    Muzak Level 3

                    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:

                    http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html

                     

                    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.

                    • 7. Re: Not understanding CSS
                      GordonSmith Level 4

                      The Player's StyleSheet class is for styling htmlText tags such as

                      inside of TextFields.

                       

                      Gordon Smith

                      Adobe Flex SDK Team