3 Replies Latest reply on Jun 3, 2010 8:46 AM by jsd99

    Flex4/Skinning a Spark TileList

    jsd99

      I have a TileList control that I would like to skin.

       

      The unselected items would have a bitmap image background.  The text in these items would be white.

      The selected item would become transparent and the text labels are red.

      Hovering over an unselected item will change its color.  Hovering over the selected item does nothing.

       

      Selecting an item should dispatch an event so I can actually do something based on the selection.

       

      I don't even know where to start.  Help please!

        • 1. Re: Flex4/Skinning a Spark TileList
          David_F57 Level 5

          hi,

           

          For what you are trying to do you would use a custom renderer, the code below gives you an idea where to start, first you override default select/hover/normal colors by setting autodrawbackground to false, then you have total control of what happens in each state, including having an image that is only displayed when in normal state.

           

          David

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:s="library://ns.adobe.com/flex/spark"

          xmlns:mx="library://ns.adobe.com/flex/mx"

          autoDrawBackground="false">

          <s:states>

          <s:State name="normal" />

          <s:State name="hovered" />

          <s:State name="selected" />

          </s:states>

          <s:Rect left="0" right="0" top="0" bottom="0">

          <s:fill>

          <s:SolidColor color="0x444444" alpha.normal="0" alpha.hovered="0.3" alpha.selected="0.7"/>

          </s:fill>

          </s:Rect>

          <s:BitmapImage left="0" right="0" top="0" bottom="0" fillMode="scale" source="{data.image}" includeIn="normal"/>

          <s:VGroup width="120" paddingTop="5" gap="5" paddingBottom="5">

          <s:Label text="{data.username}" width="100%" textAlign="center" color="#000000" color.selected="#FF0000"/>

          <s:Label text="{data.userdesc}" width="100%" textAlign="center"/>

          </s:VGroup>

          </s:ItemRenderer>

          • 2. Re: Flex4/Skinning a Spark TileList
            matthew horn Level 3

            David, that's a great comment. I added a link to it from the docs so hopefully users will find it in the future.

             

            matt horn

            flex docs

            • 3. Re: Flex4/Skinning a Spark TileList
              jsd99 Level 3

              Thanks, David.  This is brilliant.  Really helped me out a lot!  I hope one day I can return the favor.