RE: [flexcoders] TileList and CustomItemRenderer: How to dynamically change styles

[Alex Harui]

There are some itemrenderer examples on my blog you might be able to use for 
inspiration.

Alex Harui
Flex SDK Developer
Adobe Systems Inc.http://www.adobe.com/
Blog: http://blogs.adobe.com/aharui

From: flexcoders@yahoogroups.com [mailto:flexcod...@yahoogroups.com] On Behalf 
Of anuppc
Sent: Friday, October 09, 2009 7:22 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] TileList and CustomItemRenderer: How to dynamically 
change styles



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.

Many Thanks
--
View this message in context: 
http://www.nabble.com/TileList-and-CustomItemRenderer%3A-How-to-dynamically-change-styles-tp25822015p25822015.html
Sent from the FlexCoders mailing list archive at Nabble.com.

Re: [flexcoders] TileList and CustomItemRenderer: How to dynamically change styles

[anuppc]

H. Alex i saw your examples ... most are based on DataGrid. I need an
example for a TileList.

The issue i have is from my external event handler code, how can i change
the style on the each item in the TileList.  I see that getting a handle to
the ItemRenderer is not recommended to change the style






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.
 
 Many Thanks
 

-- 
View this message in context: 
http://www.nabble.com/TileList-and-CustomItemRenderer%3A-How-to-dynamically-change-styles-tp25822015p25824523.html
Sent from the FlexCoders mailing list archive at Nabble.com.