2 Replies Latest reply on Jun 28, 2011 5:10 PM by Energetic Pixels

    mx:Repeater

    Energetic Pixels

      The current project is my first Spark developed catastrophe.  I only say catastrophe due I have limited time to get project done and no background to "live" on (no prior knowledge of spark).

       

      I am trying to make a panel with a thumbnail display.  I am using a mx:Repeater to repeat my thumbnails according to the data coming in.  Flash Builder is throwing an error saying that I need a halo container for my repeater.  But I am trying to use as much spark components as I can. Here is my current code:

      <s:Panel id="thumbsPanel" y="76" left="10" width="275" height="457" backgroundAlpha="1"
                      backgroundColor="#FF6600" borderAlpha="1" borderColor="#FF6600" borderVisible="true"
                      cornerRadius="7" title="Thumbnails">
                <s:layout>
                     <s:TileLayout/>
                </s:layout>
                <s:TileGroup id="thumbTiles" 
                     x="10" y="10" width="253" height="404" 
                     columnWidth="80" orientation="rows">
                     <mx:Repeater id="thumbGrid" dataProvider="{}">
                          <s:Image width="75" height="75" source="{thumbGrid.currentItem}"/>
                          
                     </mx:Repeater>
                </s:TileGroup>
           </s:Panel>
      

       

      Must I go back to the old mx:Tile for the parent?  Or is there another way around this???

       

      My ultimate goal is to have the images/thumbnails display horizontally upto the edge of the thumbsPanel.  thumbsPanel will have variable width (application user set).

       

      Tony

        • 1. Re: mx:Repeater
          Energetic Pixels Level 1

          Never mind, I found my answer (Thank you "Flex in a Week" training series). Instead of Repeater, I switched and am using DataGroup. For those newbies -->

           

          <s:ArrayList id="tempData">
                         <fx:String>1 Picture</fx:String>
                         <s:BitmapImage source="SNA_media/pictures/1.jpg"/>
                         <fx:String>2 Picture</fx:String>
                         <s:BitmapImage source="SNA_media/pictures/2.jpg"/>
                         <fx:String>3 Picture</fx:String>
                         <s:BitmapImage source="SNA_media/pictures/3.jpg"/>
          </s:ArrayList>
          
          <s:Panel id="thumbsPanel" left="10" top="78" width="100%" maxWidth="384" title="Thumbnails">
                    <s:VGroup id="aa" width="374" height="100%">
                         <s:DataGroup id="mediaGroup" dataProvider="{tempData}"
                                         itemRendererFunction="rendererFunction" /> 
                    </s:VGroup>
                    <s:VScrollBar  viewport="{aa}" height="100%" hasFocusableChildren="true" />
               </s:Panel>
          
          
          <fx:Script>
                    <![CDATA[
                         import components.NameDisplay;
                         import spark.skins.spark.DefaultComplexItemRenderer;
                         import spark.skins.spark.DefaultItemRenderer;
                         
                         private function rendererFunction(item:Object):ClassFactory {
                              
                              if (item is String) {
                                   return new ClassFactory(NameDisplay);
                              }
                              else {
                                   return new ClassFactory(DefaultComplexItemRenderer);
                              }
                         }
                    ]]>
               </fx:Script>
          

           

          First step, solved.

           

          Tony