2 Replies Latest reply on Jun 29, 2011 11:03 AM by UbuntuPenguin

    rendering Images from a s:Arraylist and datagroup

    Energetic Pixels Level 1

      Ok, I have one last problem that is perplexing me.  I am seeing the following when I run my application:

       

      noPicturesShowing.jpg

       

      In my code I have main.mxml:

       

       

      <fx:Declarations>
                <!--<mx:HTTPService id="mediaData" url="http://www.serco-hrc.com/SNAmedia/pictures.xml" />-->
                <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"/>
                     <fx:String>4 Picture</fx:String>
                     <s:BitmapImage source="SNA_media/pictures/4.jpg"/>
                </s:ArrayList>
           </fx:Declarations>
           
           <s:HGroup left="10" top="78" width="100%">
                <s:Panel id="thumbsPanel" title="Thumbnails">
                     <s:DataGroup id="mediaGroup" dataProvider="{tempData}" itemRenderer="components.NameDisplay">
                          <s:layout>
                               <s:VerticalLayout useVirtualLayout="true" />
                          </s:layout>
                     </s:DataGroup>
                     <s:VScrollBar right="0" height="100%" viewport="{mediaGroup}"/>
                </s:Panel>
      
                </s:HGroup>
      

       

       

      There are other panels within my HGroup that have been commented out and have nothing to do with my issue here.  In my components.NameDisplay:

       

       

      <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">
           
           <fx:Script>
                <![CDATA[
      
                     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>
           
           <s:states> 
                <s:State name="normal"/> 
                <s:State name="hovered"/> 
           </s:states>
           
           <s:Image width="100" height="100"
                      source="{data.source}" 
                      horizontalAlign="center" verticalAlign="middle"></s:Image>
      
           <s:Label text="{data}"
                      height="30" width="40"
                      color="black" textAlign="center"
                      verticalAlign="middle"></s:Label>
      
      </s:ItemRenderer>
      

       

       

       

      My images are coming from a Linked folder within my project as in:

       

      projectStructure.jpg

       

      After all this, I thought I did everything correctly.  Why are my images not showing up when I run my application?????

       

      Tony

        • 1. Re: rendering Images from a s:Arraylist and datagroup
          Energetic Pixels Level 1

          I finally figured out that I will have to absolute address my images within my s:ArrayList.  I thought I could use a project "linked folder" as a go-between, but that schema is not working as I envisioned. So my arraylist now looks like:

           

          <s:ArrayList id="tempData">
                         <fx:String>1 Picture</fx:String>
                         <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\1.jpg"/>
                         <fx:String>2 Picture</fx:String>
                         <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\2.jpg"/>
                         <fx:String>3 Picture</fx:String>
                         <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\3.jpg"/>
                         <fx:String>4 Picture</fx:String>
                         <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\4.jpg"/>
          

           

          Atleast my images are now displaying in the panel. Now if I could figure out why that "[Object Bitmap" text is showing up over the top of my images.

           

          Any suggestions???  I have not changed anything in my code, yet.

           

          Tony

          • 2. Re: rendering Images from a s:Arraylist and datagroup
            UbuntuPenguin Level 4

            I would suggest you use a custom itemrenderer to show your images and the associated label.