Hi Amy,
I was able to set the contentBackgroundColor using a setStyleFunction as you
have done in your example.
private function setStyleFunction(xmlData:XML):Object
{
return {contentBackgroundColor:0xF0F0F0,
borderStyle: "solid",
borderThickness:1,
cornerRadius: 10
};
}
Now some improvements to this style. i would like to have a gradient fill for
the contentBackgroundColor.
Any ideas?
Thanks
--- In [email protected], "anuppc" <anu...@...> wrote:
>
> Hi, please ignore the last question. The correct style is
> "contentBackGround".
>
> Thanks
>
> --- In [email protected], "anuppc" <anuppc@> wrote:
> >
> > BTW, I tried simplifying my custom renderer to :
> >
> > <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%"
> > height="100%" />
> >
> > Now i get some blank tiles with white background. I was expecting to see my
> > backgroundColor style setting on the Canvas.
> >
> > I also noticed that even setting background color directly on the Canvas in
> > the ItemRenderer also does not have any effect.
> >
> > Thats the reason that i have a HBOX container in my previous version of the
> > ItemRenderer. If i set the background on this component then i do see the
> > background color at runtime.
> >
> > Any tips?
> >
> > Thanks
> >
> > --- In [email protected], "anuppc" <anuppc@> wrote:
> > >
> > > Hi Amy,
> > >
> > >
> > > Thanks for that example. It did help me partially. My item renderer is a
> > > custom item renderer.
> > >
> > > <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%"
> > > height="100%" backgroundColor="#C9C9C9" borderStyle="solid"
> > > borderThickness="0" cornerRadius="5">
> > > <mx:HBox id="box" horizontalAlign="center" verticalAlign="middle"
> > > width="100%" height="100%" borderColor="#B7BABC" borderStyle="solid"
> > > borderThickness="0" cornerRadius="5" themeColor="#009DFF" >
> > > <mx:VBox horizontalAlign="center" verticalAlign="middle"
> > > borderStyle="solid" borderThickness="0" cornerRadius="5">
> > > <mx:Image id="image" width="100" height="100"
> > > source="assets/{data.Image}" visible="true"/>
> > >
> > > <mx:Label text="{data.Name}" width="100" textAlign="center"
> > > visible="true" />
> > > </mx:VBox>
> > >
> > > </mx:HBox>
> > >
> > > </mx:VBox>
> > >
> > > My style function is quite simple for now.
> > >
> > > private function enoDefaultStyleFunction(xmlData:XML):Object
> > > {
> > >
> > > return {color:0x0000FF};
> > > }
> > >
> > > What this does is that it sets the color of the Label text as blue
> > > (0x0000FF).
> > > How do i set the background of the VBox or the HBox within my custom item
> > > renderer.
> > >
> > > I tried changing style function to return "backgroundColor:0x0000FF",
> > > however that had no effect.
> > >
> > > Once again many thanks for giving a precise answer.
> > >
> > > Cheers
> > >
> > > --- In [email protected], "droponrcll" <amyblankenship@> wrote:
> > > >
> > > >
> > > >
> > > > --- In [email protected], anuppc <anuppc@> wrote:
> > > > >
> > > > >
> > > > > Hi,
> > > > > I'm new to flex, would need some help from the experts.
> > > > >
> > > > > I have a TileList in my application.. Here is the snippet:
> > > > >
> > > > >
> > > > > var favList:TileList = new TileList();
> > > > > favList.columnCount = 2;
> > > > > favList.dataProvider = favArr;
> > > > > favList.itemRenderer = createItemRenderer();
> > > > > favList.percentHeight = 100;
> > > > > favList.percentWidth = 100;
> > > > > favList.dropEnabled = true;
> > > > > favList.dragEnabled = true;
> > > > > favList.dragMoveEnabled = true;
> > > > >
> > > > > The ItemRenderer tied to the TileList is :
> > > > >
> > > > > <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%"
> > > > > height="100%" borderStyle="solid" borderThickness="0"
> > > > > cornerRadius="5">
> > > > > <mx:Style>
> > > > >
> > > > > .filled
> > > > > {
> > > > > border-style: solid;
> > > > > border-thickness: 0;
> > > > > border-skin:
> > > > > ClassReference("border.SimpleGradientBorder");
> > > > > fill-colors: #F0F0F0, #C9C9C9;
> > > > > corner-radius: 10;
> > > > > drop-shadow-enabled: true;
> > > > > }
> > > > >
> > > > > </mx:Style>
> > > > > <mx:Script>
> > > > > <![CDATA[
> > > > > public function changeStyleWest(col1:String,
> > > > > col2:String):void
> > > > > {
> > > > > box.setStyle("fillColors", [col1, col2]);
> > > > > }
> > > > > ]]>
> > > > > </mx:Script>
> > > > > <mx:HBox id="box" styleName="filled" horizontalAlign="center"
> > > > > verticalAlign="middle" width="100%" height="100%"
> > > > > borderColor="#B7BABC"
> > > > > borderStyle="solid" borderThickness="0" cornerRadius="5"
> > > > > themeColor="#009DFF" >
> > > > > <mx:VBox horizontalAlign="center" verticalAlign="middle"
> > > > > borderStyle="solid" borderThickness="0" cornerRadius="5">
> > > > > <mx:Image id="image" width="100" height="100"
> > > > > source="assets/{data.Image}" visible="true"/>
> > > > >
> > > > > <mx:Label text="{data.Name}" width="100" textAlign="center"
> > > > > visible="true" />
> > > > > </mx:VBox>
> > > > >
> > > > > </mx:HBox>
> > > > >
> > > > > </mx:VBox>
> > > > >
> > > > > Now what i want to achieve is else where in the application there are
> > > > > couple
> > > > > of buttons and on clicking these buttons i want to change the
> > > > > fill-colors or
> > > > > style of each Tile based on some Data attributes.
> > > >
> > > > http://flexdiary.blogspot.com/2008/08/tilelist-with-stylefunction.html
> > > >
> > > > There's a more complete example of how to use it in the Grouping
> > > > Function example.
> > > >
> > > > HTH;
> > > >
> > > > Amy
> > > >
> > >
> >
>
