[flexcoders] Re: TileList and CustomItemRenderer: How to dynamically change styles
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 flexcoders@yahoogroups.com, anuppc anu...@... wrote:
Hi, please ignore the last question. The correct style is
contentBackGround.
Thanks
--- In flexcoders@yahoogroups.com, 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 flexcoders@yahoogroups.com, 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:0xFF};
}
What this does is that it sets the color of the Label text as blue
(0xFF).
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:0xFF,
however that had no effect.
Once again many thanks for giving a precise answer.
Cheers
--- In flexcoders@yahoogroups.com, droponrcll amyblankenship@ wrote:
--- In flexcoders@yahoogroups.com, 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
[flexcoders] Re: TileList and CustomItemRenderer: How to dynamically change styles
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:0xFF};
}
What this does is that it sets the color of the Label text as blue (0xFF).
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:0xFF, however
that had no effect.
Once again many thanks for giving a precise answer.
Cheers
--- In flexcoders@yahoogroups.com, droponrcll amyblankens...@... wrote:
--- In flexcoders@yahoogroups.com, 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
[flexcoders] Re: TileList and CustomItemRenderer: How to dynamically change styles
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 flexcoders@yahoogroups.com, anuppc anu...@... 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:0xFF};
}
What this does is that it sets the color of the Label text as blue (0xFF).
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:0xFF, however
that had no effect.
Once again many thanks for giving a precise answer.
Cheers
--- In flexcoders@yahoogroups.com, droponrcll amyblankenship@ wrote:
--- In flexcoders@yahoogroups.com, 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
[flexcoders] Re: TileList and CustomItemRenderer: How to dynamically change styles
Hi, please ignore the last question. The correct style is contentBackGround.
Thanks
--- In flexcoders@yahoogroups.com, anuppc anu...@... 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 flexcoders@yahoogroups.com, 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:0xFF};
}
What this does is that it sets the color of the Label text as blue
(0xFF).
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:0xFF,
however that had no effect.
Once again many thanks for giving a precise answer.
Cheers
--- In flexcoders@yahoogroups.com, droponrcll amyblankenship@ wrote:
--- In flexcoders@yahoogroups.com, 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
[flexcoders] Re: TileList and CustomItemRenderer: How to dynamically change styles
TileList and DataGrid are both extended from ListBase so an itemrenderer for
one should work the same as for the other. If not, only slight changes would
need to be made.
--- In flexcoders@yahoogroups.com, anuppc anu...@... wrote:
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.
[flexcoders] Re: TileList and CustomItemRenderer: How to dynamically change styles
--- In flexcoders@yahoogroups.com, anuppc anu...@... 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
