10 Replies Latest reply on Aug 12, 2011 5:56 AM by Francisc

    How to get CSS selectors out of global space

    Francisc Level 3

      Hello,

       

      I use this to set styleNames for components:

      var styleDecl:CSSStyleDeclaration;

      styleDecl=styleManager.getMergedStyleDeclaration(".myStyleName");

      if(styleDecl)

      {

           myComp.styleDeclaration=styleDecl;
           myComp.styleChanged("styleName");

      }

       

       

      Now, the problem is that .myStyleName will have to be set in the global space of the CSS file as in simply ".myStyleName".


      If I have more components with the same styleName that I want to style differently I cannot, I have to give unique names.

       

      How can I make it so that I can have definitions like this:

       

      components|SomeComponent .myStyleName{}

      components|SomeOtherComponent .myStyleName{}

       

      Thank you.

        • 1. Re: How to get CSS selectors out of global space
          Flex harUI Adobe Employee

          Assuming you are using Flex 4, did your attempt not work?  You can specify

          complex selectors in Flex 4.

          • 2. Re: How to get CSS selectors out of global space
            Francisc Level 3

            Hi Alex,

             

            Yes, Flex 4(.5.1).

            What I meant was namespacing them basically.

             

            Using the above mentioned method I will get a class selector that I cannot style like component .class or #list .class etc.

            In this particular case I am trying to do this for an itemRenderer component.

            • 3. Re: How to get CSS selectors out of global space
              Flex harUI Adobe Employee

              You can't namespace the subject of a class selector AFAIK, but it looked

              like you were specifying it as a descendant selector of some other

              container, which should work.

               

              Namespaces for class selectors would probably just be different strings

              prefixed on them.

              • 4. Re: How to get CSS selectors out of global space
                Francisc Level 3

                Hm, well it doesn't work for me.

                 

                Give then CSS part from the first post placed in a custom itemRenderer extending IconItemRenderer the selector only works if it's simply ".className".

                 

                 

                I can't do: component .className or #list .className.

                • 5. Re: How to get CSS selectors out of global space
                  Flex harUI Adobe Employee

                  I honestly don't know if it was supported, but you said you didn't get a

                  compiler error so I thought there was a chance.  Can you make a test case in

                  about 20 lines?

                  • 6. Re: How to get CSS selectors out of global space
                    Francisc Level 3

                    Hm, I think I am not explaing this right.

                    There would be no compiler error as it's CSS inheritance we're talking about here.

                     

                    Consider this structure:

                     

                    ViewA has #list1 which uses a custom ItemRenderer called MyCustomItemRenderer.

                    ViewA is in components package.

                     

                    In MyCustomItemRenderer I am setting the style for a StylableTextField to be .myStyleName.

                     

                    Now, in my CSS file I can set .myStyleName{color:#FF0000;} and it works well.

                     

                    However if I have another list (#list2) but this time in ViewB (also in components) and a different itemRenderer, MyOtherRenderer, I set the style name for a StylableTextField in this renderer to also be .myStyleName.

                     

                    Now both have a text color of #FF0000.

                     

                    The problem occurs when I want them to have different styles applied to them. Sure I can give them unique names and be done with it, but if the CSS file gets large it will be more difficult to remember which I've used.

                     

                    What I want to do is be able to somehow more clearly define them like this:

                     

                    components|ViewA .myStyleName for the first and

                    components|ViewB .myStyleName for the second.

                     

                    It's basically like HTML where I can have a class .title for example and have it mean something if it's applied to an h1 element (h1 .title{}) and another thing if it's applied to say a p element (p .title{}).

                     

                    I hope it's better now.

                    • 7. Re: How to get CSS selectors out of global space
                      Flex harUI Adobe Employee

                      I think I was understanding you correctly.  I was trying to say that if you

                      can do this in CSS

                       

                      components|ViewA .myStyleName

                      components|ViewB .myStyleName

                       

                      And you don't get compiler errors, I thought it would work as you expect.

                      If it doesn't it might be that we don't support that config, or it could be

                      a bug, or there is some nuance in the setup.  If you have a 20-line test

                      case I could try to find time to look into it.

                       

                      I would first run a test that doesn't use StyleableTextField, maybe Label

                      instead.  There might be some special rules around styling TextField

                      subclasses.

                      • 8. Re: How to get CSS selectors out of global space
                        Francisc Level 3

                        I understand what you mean.

                         

                        But it's a problem of inheritance.

                        If the StylableTextField was directly in ViewA or ViewB this would work:

                         

                        components|ViewA .myStyleName

                        components|ViewB .myStyleName

                         

                        However, it is not in the view directly it's in the itemRenderer component of the list that is in ViewA / ViewB.

                         

                        The way I see it this should work as the inheritance would go like this:

                        components|ViewA   #list   renderers|myCustomItemRenderer   .myStyleName{}

                         

                        But Flex probably doesn't see it like that.

                        What I needed to know is how to get that.

                        • 9. Re: How to get CSS selectors out of global space
                          Flex harUI Adobe Employee

                          Are you using Spark List or MX List?  A test case would help illustrate.

                          • 10. Re: How to get CSS selectors out of global space
                            Francisc Level 3

                            It's a Spark List.

                             

                            I can post the code, but it will be over 20 lines. Just the renderer itself is beyond that.

                             

                            Any Spark list with a custom item renderer extending IconItemRenderer where you set this in the overriden commitProperties() will do the same:

                             

                            var styleDecl:CSSStyleDeclaration;

                             

                            styleDecl=styleManager.getMergedStyleDeclaration(".myStyleName");

                             

                            if(styleDecl)

                             

                            {

                             

                                 myComp.styleDeclaration=styleDecl;
                                 myComp.styleChanged("styleName");

                             

                            }