6 Replies Latest reply on Dec 7, 2010 6:29 AM by flexillu10

    Tile List Selection indicator

    flexillu10 Level 1

      I have a tile list layout with some thumbnails.

       

      When one is selected it gets a default blueish background.

       

      Could someone explain how i would go about putting a nice green tick over a thumbnail once its selected?

        • 2. Re: Tile List Selection indicator
          SashaKeith Adobe Employee

          You can create an itemRenderer with a custom skinned CheckBox that is checked when the item is selected. You can use ItemRenderer states to set the selected property of the checkbox.

           

          Here's a very simple sample. You can modify it to custom skin the checkbox and add an image.

           

          <?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="true">
              <s:states>
                  <s:State name="normal"/>       
                  <s:State name="selected"/>
              </s:states>
              <s:CheckBox selected.normal="false"
                          selected.selected="true"/>
          </s:ItemRenderer>

          • 3. Re: Tile List Selection indicator
            flexillu10 Level 1

            Thank you both for your replies.

             

            I'm already using a custom component that extends a spark List with layout property set to TileLayout. This is so i can mimick the user holding the CTRL key for multiple selection.

             

            I also already have a custom item renderer that displays the thumbnail and fires off an event when clicked.

             

            Really confused as where to put either of your code snippets.

             

            this is my custom component

            package
            {
                 import flash.events.MouseEvent;
                 import mx.core.IVisualElement;
                 import spark.components.List;
                 
                 public class CheckList extends List
                 {
                      public function CheckList()
                      {
                           super();
                           allowMultipleSelection = true;
                      }
                      
                      /**
                       * Override the mouseDown handler to act as though the Ctrl key is always down
                       */
                      override protected function item_mouseDownHandler(event:MouseEvent):void
                      {
                           var newIndex:Number = dataGroup.getElementIndex(event.currentTarget as IVisualElement);
                           
                           // always assume the Ctrl key is pressed by setting the third parameter of
                           // calculateSelectedIndices() to true
                           selectedIndices = calculateSelectedIndices(newIndex, event.shiftKey, true);
                      }
                      
                 
                      
                 }
            }
            

             

            and this is my item renderer

             

            <?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="true" width="300" height="315" click="thumb_clickHandler(event)">
                 
                 <mx:Image id="thumb" x="25" y="26" width="250" height="265" source="{data.thumburl}"/>
                 
                 <fx:Script>
                      <![CDATA[
                           import flashx.textLayout.factory.TruncationOptions;
                           
                           import mx.controls.Alert;
                           import mx.events.ItemClickEvent;
                           
                           
                           protected function thumb_clickHandler(event:MouseEvent):void
                           {
                                var ev:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
                                ev.item = data;
                                ev.index = itemIndex;
                                
                                //Alert.show(ev.item.imageurl);
                                dispatchEvent(ev);
                           }
            
                      
                           
                           
                      ]]>
                 </fx:Script>
                 
                 
                 
            </s:ItemRenderer>
            
            Any help you can give me would be great, the code is getting really messy, should i merge these into one class?
            
            
            • 4. Re: Tile List Selection indicator
              flexillu10 Level 1

              Still not able to put a checkbox on my current list item renderer..

               

              Can anyone explain how?

              • 5. Re: Tile List Selection indicator
                SashaKeith Adobe Employee

                Need some clarification on the desired end result... Are you expecting only the selectedItem to have a checkmark? Or are trying to add a checkmark on each item that you have selected so far (not multiple selection but all the ones you have selected individually).

                 

                If you just want the selectedItem to have a checkmark, using states may simplify your code. Instead of listening for the click event on the Image, use the built in item renderer states (selected, normal). In your layout, use basic layout and position the custom skinned checkbox over the Image and set the selected property of the checkbox to true in the item renderer selected state and false otherwise.

                • 6. Re: Tile List Selection indicator
                  flexillu10 Level 1

                  Sorry or the delay in reply, and thanks for your help.

                   

                  I am trying to add checkmark to each item that has been selected so far, it doesn't really matter if all the tiles have an empty checkbox to start with.