The mouse-hover and selection boxes in a Flex TileList only have styles for changing the colors. If you want more advanced things like changing the shape or having a border you’ll need to extend the TileList class and override two methods.
drawSelectionIndicator - Draws the box around the currently selected item.
drawHighlightIndicator - Draws the box for the mouse-over item
public class RoundedSelectionTileList extends TileList{ public function RoundedSelectionTileList() { super(); }
override protected function drawSelectionIndicator( indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void { var g:Graphics = indicator.graphics; g.clear(); g.beginFill(0x3f4c6b); g.lineStyle(2,0x6e7c9d); g.drawRoundRect(x,y,itemRenderer.width,height,15,15); g.endFill(); }
override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void { var g:Graphics = indicator.graphics; g.clear(); g.beginFill(0x3f4c6b); g.lineStyle(2,0x6e7c9d); g.drawRoundRect(x,y,itemRenderer.width,height,15,15); g.endFill(); } }
Before:
After:
While you’re in there, take a look at the other draw* protected methods. You can change most aspects of the control with those.
Hi,thanks for example.
But i don’t know no how to connect with the redefinition of class methods to roll-over-indicator-skin of my css.
Great post, Thanks Marc.
I had a problem with TileList where the highlight border around the selected item becomes very wide If I make the application window full-screen (example). Your example solved my problem.
I made also more advanced example (nice blue gradient fill) Vista Start Menu.
Marc,
Thanks so much for sharing this. Just what I was looking for.
Thank you
Keith
hello mark,
I’m a flex beginner and i’m trying to do exactly what you did in this example.
But I dont really understand how it works and where to put this code.
And I wonder how (in your before/after screenshot) you can have different witdh in the tile list items for your left and right colums
So if it’s not a problem for you, can you send me your source code or explain me if it’s not taking you too much time.
Thanks (and sorry for my poor english) :))
I don’t know if this will work well for others, but another way to achieve something similar is to set selectable to false on the TileList, then implement mouse over, mouse out, and click events within the item renderer. This does lobotomize some of the functionality of the TileList, however, but allows selection effects which directly manipulate the markup within the item renderer, which is what I needed.
jakeonfire
Dec 17th, 2008 at 4:15 pm
I don’t know if this will work well for others, but another way to achieve something similar is to set selectable to false on the TileList, then implement mouse over, mouse out, and click events within the item renderer. This does lobotomize some of the functionality of the TileList, however, but allows selection effects which directly manipulate the markup within the item renderer, which is what I needed.
First TNX for great idea i have been banging my head all day how to insert img on over event of the tilelist item
i have not set selectable to false but changed color of it to my background color and set paning to 0 on all sides
i have set mouseOver event to show the image and mouseOut to hide it
i only have one question How to make “image.visible = true” when i select one of the items and hide all images in other items.
this all would be much easyer if i could simply use skin on tile list over out and selected events….
Thanks so much for this example, with a few minor modifications I was able to customize it into exactly what I needed.