2 Replies Latest reply on Nov 5, 2008 12:49 PM by ben214761

    Change item renderer style name in Tilelist

    ben214761
      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.
      quote:


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



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

      quote:


      <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

      quote:


      <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

      quote:


      <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

      quote:


      <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;

      quote:


      TypeError: Error #1006: value is not a function.
      at mx.core::UIComponent/ http://www.adobe.com/2006/flex/mx/internal::initThemeColor()[E:\dev\3.1.0\frameworks\proje cts\framework\src\mx\core\UIComponent.as:7845
      at mx.core::UIComponent/set styleName()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\core\UIComponent.as:4546]
      at RiskEnginePrototype_inlineComponent1/commitProperties()[C:\projects\RiskEnginePrototype\t hemesamples\brownie\src\RiskEnginePrototype.mxml:325]
      at mx.core::UIComponent/validateProperties()[E:\dev\3.1.0\frameworks\projects\framework\src\ mx\core\UIComponent.as:5749]
      at mx.managers::LayoutManager/validateClient()[E:\dev\3.1.0\frameworks\projects\framework\sr c\mx\managers\LayoutManager.as:794]
      at mx.controls.listClasses::TileBase/ http://www.adobe.com/2006/flex/mx/internal::setupRendererFromData()[E:\dev\3.1.0\framework s\projects\framework\src\mx\controls\listClasses\TileBase.as:1998
      at mx.controls.listClasses::TileBase/measureHeightOfItems()[E:\dev\3.1.0\frameworks\projects \framework\src\mx\controls\listClasses\TileBase.as:2024]
      at mx.controls.listClasses::TileBase/commitProperties()[E:\dev\3.1.0\frameworks\projects\fra mework\src\mx\controls\listClasses\TileBase.as:2329]
      at mx.core::UIComponent/validateProperties()[E:\dev\3.1.0\frameworks\projects\framework\src\ mx\core\UIComponent.as:5749]
      at mx.managers::LayoutManager/validateProperties()[E:\dev\3.1.0\frameworks\projects\framewor k\src\mx\managers\LayoutManager.as:522]
      at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.1.0\frameworks\projects\frame work\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\projects\framework\sr c\mx\core\UIComponent.as:8565]
      at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.1.0\frameworks\projects\framework\src \mx\core\UIComponent.as:8508]




      is there any other easier way to acheive this?

      Thanks in advance!!
      LiZ