6 Replies Latest reply on Jul 5, 2011 3:28 PM by blazejewicz

    ItemRenderer displaying both image and object type

    Energetic Pixels

      I have a item renderer that is displaying both my image and object type (in text that is layed over my image) as in below snapshot.  How can I remove the object type text???

       

      wrongTypeDisplay.jpg

       

      The first line is supposed to be there, supposedly a graphic title.  But my problem is where that "[object BitmapImage]" text is coming from?????  Here is my itemRenderer code:

       

      <?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">
           
           <fx:Script>
                <![CDATA[
                     protected function getImage(event:MouseEvent):void {
                          //largeImage.load(event.currentTarget.getRepeaterItem());
                     }
                ]]>
           </fx:Script>
           
           <s:states> 
                <s:State name="normal"/> 
                <s:State name="hovered"/> 
           </s:states>
           
           <s:Image source="{data.source}" maxHeight="100" maxWidth="100"
                      horizontalAlign="center" verticalAlign="middle"
                      click="getImage(event)" />
      
           <s:Label text="{data}" maxWidth="60"
                      color="blue" textAlign="center"
                      verticalAlign="middle" />
      
      </s:ItemRenderer>
      

       

      The source comes from a DataGroup in the main.mxml that has a dataprovider of an ArrayList:

      <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"/>
      

       

      Any direction/help on getting the object type to not display would greatly be 'reverend'.

       

      Tony

        • 1. Re: ItemRenderer displaying both image and object type
          blazejewicz Level 4

          Hi,

          first and quick shot: your data source declaration simply states "data", so it converts data into most convenient object when displaying (i.e. to Object itself):

          <s:Label text="{data}" maxWidth="60"
                          color="blue" textAlign="center"
                          verticalAlign="middle" />
          

           

          it (*label*) needs something more specific then "data" in order to display it as String,

           

          regards,

          Peter

          • 2. Re: ItemRenderer displaying both image and object type
            Energetic Pixels Level 1

            Good Morning Peter,

             

                 Sorry for delay, in my company I am not only a developer but also a government contracted instructor for Ammunition classes.

             

                 I got the text to display correctly (1 Picture, 2 Picture, etc).  But I am still having a problem when the item renderer goes to display the 'targeted' image from the ArrayList.  I have tried both s:Image and s:BitmapImage.  It is displaying the image just fine but I am also getting a "[object BitmapImage]" text that is being layed over my image. How do I tell it not to display that text.  Screen shot below may help.  Image number two has been changed in the ArrayList to a s:Image element.  And I am still seeing unwanted text.

             

            unwantedText_overImage.jpg

            How do I get this to act the way I want it to. Here is the same of the ArrayList (this shows where I attempted to use a s:Image to describe my targeted source):

            <s:ArrayList id="tempData">
                           <fx:String>1 Picture</fx:String>
                           <!--<s:Image source="I:\Documents\development\SERCO\SNA_media\pictures\1.jpg" />-->
                           <s:BitmapImage source="I:\Documents\development\SERCO\SNA_media\pictures\1.jpg"/>
                           <fx:String>2 Picture</fx:String>
                           <s:Image source="I:\Documents\development\SERCO\SNA_media\pictures\2.jpg" />
                           <!--<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"/>
            ...
            </s:ArrayList>
            

             

            Am I doing something fundamentally wrong????

             

            <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>
            

             

            ItemRenderer: NameDisplay.  -->

            <fx:Script>
                      <![CDATA[
                           //This getImage function will handle a click event when user clicks
                           //on thumbnail to get a bigger image to show in viewer panel
                           protected function getImage(event:MouseEvent):void {
                                //largeImage.load(event.currentTarget.getRepeaterItem());
                           }
                      ]]>
                 </fx:Script>
                 
                 <s:states> 
                      <s:State name="normal">
                      </s:State>
                      <s:State name="hovered">
            
                      </s:State>
                 </s:states>
                 
                 <!-- this image control is where I am having unwanted text -->
                 <s:Image id="thumbnail" source="{data.source}" 
                            maxHeight="100" maxWidth="100"
                            horizontalAlign="center" verticalAlign="middle"
                            click="getImage(event)" />
            
                 <!-- This label works fine -->
                 <s:Label id="title" text="{data}" maxWidth="100"
                            color="blue" textAlign="center" />
            
            </s:ItemRenderer>
            

             

            Any push in the correct direction would be helpful.

            Tony

            • 3. Re: ItemRenderer displaying both image and object type
              Gregory Lafrance Level 6

              Typically, your data will have the paths to the image source, and the data will not have instances of Image, BitMapImage, etc.

               

              I would just have the paths/urls to the image source in the data, and then use that data to populate the item renderer images.

               

              If this post answers your question, or helps answer your question, please mark it as such.

              1 person found this helpful
              • 4. Re: ItemRenderer displaying both image and object type
                blazejewicz Level 4

                Hi Tony,

                 

                #1

                (first) you're using quite unusual data source definition - which does not use object instances with properties - burt direct values ordered by order in which they are declared (label/path/label/path) - though I've already seen such example made by Adobe itself:

                http://www.adobe.com/devnet/flex/videotraining/exercises/ex4_01.html

                That first part of series uses exact implementation you're using right now. You will see that is quite complex due to different nature of objects hosted in array list - that requires quite *unusual* (read: not frequently seen) approach of data binding.

                 

                #2

                (second) what is supposed already to you - and what is discussed in second part of Adobe's article is most common way of providing data to lists: array (list) of objects:

                http://www.adobe.com/devnet/flex/videotraining/exercises/ex4_02.html

                This is more natural: there is an object which has *label* and *path*: label describes object while path holds information where to find image.

                With this second part of Adobe's sample example array list could be defined in more natural way:

                [code]

                <s:ArrayList id="myList">
                     <fx:Object label="labelValueHere" imageFile="image/path/here/image.jpg"/>
                     <fx:Object label="labelValueHere" imageFile="image/path/here/image.jpg"/>
                     <fx:Object label="labelValueHere" imageFile="image/path/here/image.jpg"/>          
                </s:ArrayList>
                

                then in item renderer label.text could be bound to {data.label} and BitmapImage source to {data.imageFile} respectively (or to any given property name you would use when declaring your data providers) in your ItemRenderer definition (see linked second part of Adobe's tutorial which discusses that)

                 

                Here is more general informative tutorial from Adobe about "data provider" (arraylist, list, etc) in Flex SDK:

                http://www.adobe.com/devnet/flex/quickstarts/using_data_providers.html

                 

                hth,

                kind regards,

                Peter

                • 5. Re: ItemRenderer displaying both image and object type
                  Energetic Pixels Level 1

                  Peter, Gregory,

                   

                      Yes!!  I see the light!!  Finally.  I was just too stuborn to change my dataset structure.  But once I did, everything fell into place.  Currently this project is just a proof of concept.  Ultimately, data will be coming from an php/mysql server combination.  But I have to admit, doing a dataset within the flex project like I am, gives me great insight of how my data from the database will have to be structured.

                   

                  Peter,

                   

                     Today, I did go back and view the Flex in a Week (week 4) and was able to construct a custom item renderer for my datagroup and thumbnail viewport. Probably at the same time you were suggesting it to me.

                   

                   

                  Thanks all for the great help and patience while I worked through my problems with leads that you gave.

                   

                  I even figured out how to get my scrollbar to operate.  I had to change my height value on the parent container from 100% to a specific pixel value.  After that, my s:VScroller worked like advertised. Onward to harder problems.

                   

                  Tony

                  • 6. Re: ItemRenderer displaying both image and object type
                    blazejewicz Level 4

                    You're welcome!

                     

                    regards,

                    Peter