Why not just bind to the data like your doing with the label.
<mx:Canvas id="boxa" width="100%" height="100%"
styleName="{data.style}" horizontalScrollPolicy="off"
verticalScrollPolicy="off">
How about this ...
<mx:TileList width="100%" height="100%" dataProvider="{ listData.item
}" x="0" y="0" horizontalScrollPolicy="off"
itemRenderer="TileItemRenderer"/>
In TileItemRenderer.mxml:
<mx:Canvas width="100%" height="100%" styleName="{data.style}"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<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>
<mx:Label text="{data.name}" />
</mx:Canvas>
Anyway if your going to stick with doing an override you might want to
override set data instead of commitprops, but even if you stick to
commitprops don't forget to call super, less you run into some weird
behavior, on data change/reuse or renderer.
--- In [email protected], "Benjamin" <[EMAIL PROTECTED]>
wrote:
>
>
> 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
>
