Tuesday, June 3, 2008

Using a CSS TypeSelector with an itemRenderer

Today, I had more fun with item renderers. I had a component I was working on to try to prototype some new functionality, and I had set up styles for it in the <mx:styles> declaration of the Application tag. If I put my component in a container in the main Application, the style came through fine. If I used it as an itemRenderer of a List based class, only the text styles worked.

It seems that when you use a component this way, Flex will assign ListBaseContentHolder as the style name instead of the class name, but for some reason this only negates things like backround colors—text declarations come through just fine. This interesting feature isn't documented anywhere, so it took me a whole day to figure out the fix, which is so simple I wanted to pound my head against the wall till I couldn't see straight.

override protected function commitProperties():void{
this.styleName = this.className;
}

Hope this saves someone some time!
at

7 comments:

  1. NeilJuly 8, 2008 at 8:01 AM

    You certainly saved me some time - thanks :)

    ReplyDelete
  2. varNovember 2, 2008 at 10:29 AM

    Thanks so much!

    ReplyDelete
  3. Josh McDonaldFebruary 25, 2009 at 8:43 PM

    Thanks Amy, that's just the snippet I needed, I knew you'd blogged something like this a while ago ;-)

    Off the top of my head you should probably call super.commitProperties() first though, or bad things might happen.

    ReplyDelete
  4. UnknownApril 21, 2009 at 11:00 AM

    Thanks, Amy!

    ReplyDelete
  5. Adobe Air/Flex Tips & architectureAugust 27, 2009 at 8:28 AM

    Thanx, these posts are really
    valuable. Started to loose my mind....


    Arnoud

    ReplyDelete
  6. diogokoJanuary 13, 2011 at 8:35 AM

    Thank you very much! I'd have spent some hours trying to figure this out... =)

    ReplyDelete
  7. Amy BJanuary 13, 2011 at 8:45 AM

    Today, I handle this by overriding styleName to only take a string. List components pass their own Class in as the styleName, so by only accepting a string in this property you can still override with a valid styleName (for instance, if you are using not as an itemRenderer), but List components can't affect the style.

    ReplyDelete