[flexcoders] Change item renderer style name in Tilelist

[Benjamin]

Hello,

I am new to Flex. I am facing one problem which is driving me crazy. It
would be very helpful if any one of Flex experts out there help me.


I need to show a label with gradient background color as each item
component in TileList. Label does not support colored gradient
background. So I am placing the Label on top of a canvas and using below
workaround style on canvas.

.grad1
{ borderStyle: applicationControlBar;
   fillAlphas: 1.0, 1.0;
   highlightAlphas: 0, 0;
   fillColors: #C6292C, #700C06;
}


Using the following code, I am able to acheive this.

  <mx:TileList width="100%" height="100%"  dataProvider="{ listData.item
}" x="0" y="0" horizontalScrollPolicy="off"
itemRenderer="TileItemRenderer">
   <mx:itemRenderer>
   <mx:Component>
    <mx:VBox paddingTop="4" paddingRight="4" paddingBottom="2"
paddingLeft="4">
        <mx:Canvas id="boxa" width="100%" height="100%" styleName="grad1"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
     <mx:Label text="{data.name }" />
        </mx:Canvas>
    </mx:VBox>
   </mx:Component>
  </mx:itemRenderer>
  </mx:TileList>



Now I want change the gradient color based on the data text displayed in
Label

TileList data

    <mx:XMLList id="listData">
   <items>
    <item>
     <name>XXXXX</name>
              <style>grad1</style>
    </item>
    <item>
     <name>YYYYY</name>
              <style>grad3</style>
    </item>
    <item>
     <name>ZZZZ</name>
              <style>grad2</style>
    </item>
   </items>
            </mx:XMLList>


I added some inline styles for different colors


<mx:Style>
.grad1, .grad2,.grad3, .grad4
{ borderStyle: applicationControlBar;
   fillAlphas: 1.0, 1.0;
   highlightAlphas: 0, 0;
}
.grad1
{
   fillColors: #C6292C, #700C06;
}
.grad2
{
   fillColors: #F7A71A, #E36E11;
}
.grad3
{
   fillColors: #ECC917, #BB8E00;
}
.grad4
{
   fillColors: #2F72CB, #15396F;
}
</mx:Style>



I changed the itemrenderer as below


   <mx:itemRenderer>
   <mx:Component>
    <mx:VBox paddingTop="4" paddingRight="4" paddingBottom="2"
paddingLeft="4">
        <mx:Canvas id="boxa" width="100%" height="100%" styleName="grad1"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
                         <mx:Script>
                         <![CDATA[

   override protected function commitProperties():void
   {
    super.commitProperties();
                         boxa.styleName = super.data.style;
   }

                         ]]>
                         </mx:Script>
     <mx:Label text="{data.name }" />
        </mx:Canvas>
    </mx:VBox>
   </mx:Component>
  </mx:itemRenderer>


But this gives me an error on the line

      boxa.styleName = super.data.style;


TypeError: Error #1006: value is not a function.
  at
mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::initThe\
meColor()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UICompo\
nent.as:7845]
  at mx.core::UIComponent/set
styleName()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UICom\
ponent.as:4546]
  at
RiskEnginePrototype_inlineComponent1/commitProperties()[C:\projects\Risk\
EnginePrototype\themesamples\brownie\src\RiskEnginePrototype.mxml:325]
  at
mx.core::UIComponent/validateProperties()[E:\dev\3.1.0\frameworks\projec\
ts\framework\src\mx\core\UIComponent.as:5749]
  at
mx.managers::LayoutManager/validateClient()[E:\dev\3.1.0\frameworks\proj\
ects\framework\src\mx\managers\LayoutManager.as:794]
  at
mx.controls.listClasses::TileBase/http://www.adobe.com/2006/flex/mx/inte\
rnal::setupRendererFromData()[E:\dev\3.1.0\frameworks\projects\framework\
\src\mx\controls\listClasses\TileBase.as:1998]
  at
mx.controls.listClasses::TileBase/measureHeightOfItems()[E:\dev\3.1.0\fr\
ameworks\projects\framework\src\mx\controls\listClasses\TileBase.as:2024\
]
  at
mx.controls.listClasses::TileBase/commitProperties()[E:\dev\3.1.0\framew\
orks\projects\framework\src\mx\controls\listClasses\TileBase.as:2329]
  at
mx.core::UIComponent/validateProperties()[E:\dev\3.1.0\frameworks\projec\
ts\framework\src\mx\core\UIComponent.as:5749]
  at
mx.managers::LayoutManager/validateProperties()[E:\dev\3.1.0\frameworks\\
projects\framework\src\mx\managers\LayoutManager.as:522]
  at
mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.1.0\framewor\
ks\projects\framework\src\mx\managers\LayoutManager.as:642]
  at Function/http://adobe.com/AS3/2006/builtin::apply()
  at
mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.1.0\frameworks\proj\
ects\framework\src\mx\core\UIComponent.as:8565]
  at
mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.1.0\frameworks\proje\
cts\framework\src\mx\core\UIComponent.as:8508]



is there any other easier way to acheive this?

Thanks in advance!!
Ben