9 Replies Latest reply on Dec 2, 2009 10:43 AM by mewk

    Dynamic image getting "stuck"

    Handycam Level 1

      I have an application where you "page through" recipes. You can see it here. The recipes are a list with an item renderer of the "recipe card", controlled with a stepper skinned to look like "next" /"previous" buttons.

       

      In the next iteration of this, I needed to add a "sponsored by" badge to one recipe card.

       

      So, I added a section in the XML for that recipe only, with the path to the client's logo image in the xml.  And then I added below the recipe description this code:

      <s:Group click="goRecipe(XML(data).sponsor.link)">
           <s:BitmapImage source="/images/{XML(data).sponsor.image}"/>
      </s:Group>
      

       

      It works, but once the image displays for the sponsored recipe (the one where this value exists), it is "stuck" and shows up as you page back through the other desserts.  It shows up on every other dessert, even if they have no sponsor node in the XML and they were blank before.  Changing the "tab" in the recipe book (which refreshes the list by changing its filterFunction) clears the image again.  But once it displays it stays.

       

      Any ideas?

        • 1. Re: Dynamic image getting "stuck"
          David_F57 Level 5

          Hi,

           

          On the assumption that the 'sponsor' image is created last then once it is shown it will remain unless you remove or hide it, Ideally the dataprovider  would have a sponsor 'flag'  and an associated image source so that you could replace or switch the sponsor off this is much more dynamic than locking code to a single item.

           

          David

          • 2. Re: Dynamic image getting "stuck"
            Handycam Level 1

            I'll try that, thanks.

             

            It just seems odd that the items that have a blank image source wouldn't

            "empty" the image the way it does with text controls.  If  I assign the same

            data point to a label, it doesn't stay there.

            • 3. Re: Dynamic image getting "stuck"
              mewk Level 3

              I didn't see the bug in the app you referenced, but I suspect virtualLayout might be the culprit.

               

              When using virtual layout, items are recycled, so if you make some changes to one item and don't reset all properties on dataChange, the effects are likely to persist for each successive item thereafter.

               

              There are a number of ways to debug this --

              1. set the spark.components.List's useVirtualLayout="false"
              2. avoid using creationComplete in your itemRenderer; use dataChange event instead (tip passed on to me by Shongrunden).
              3. have every itemRenderer reset all data (i.e. don't used guarded conditions where data is only sometimes set -- at David's suggestion).

               

              - e

              1 person found this helpful
              • 4. Re: Dynamic image getting "stuck"
                Handycam Level 1

                At which event is the data actually "there"?  So I can have a function fire

                that tests a condition in the data point and act accordingly:

                 

                perhaps:

                 

                if data.sponsorImage.length >0 then...  or if hasSponsor == true then...

                 

                When I test it on creationComplete, it's null.  Will dataChange accomplish

                this?

                • 5. Re: Dynamic image getting "stuck"
                  Handycam Level 1

                  Yeah, that's not working for me:

                   

                  protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void
                                 {
                                      trace(data.title);
                                      /* if (data.sponsor.image) {
                                           trace("sponsored");
                                           sponsorImage.source = data.sponsor.image;
                                      }  */
                                 }
                  

                   

                  This throws a "cannot access a null value" error, even for the title which every data entry has.

                  • 6. Re: Dynamic image getting "stuck"
                    David_F57 Level 5

                    Hi,

                     

                    Not sure why this is giving you so much grief, the following is simple (and no load complete routines) but in both the list and the image by image or scrollable list the top and lower image behave as expected.(note: I only put an overlay image on the second and forth item in the first group).

                     

                    http://gumbo.flashhub.net/imgmenu/ (sourceview enabled)

                     

                     

                    David

                    1 person found this helpful
                    • 7. Re: Dynamic image getting "stuck"
                      Handycam Level 1

                      I finally had success with this:

                       

                      protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void
                      {
                           if (XML(data).id == "000000"){
                              sponsorImage.visible = true;
                           } else {
                              sponsorImage.visible = false;
                           }
                      }
                      

                       

                      Where I changed the ID of the one that gets the image to 000000.

                      • 8. Re: Dynamic image getting "stuck"
                        Handycam Level 1

                        FWIW, turning off virtual layout made the list take forever to load and render.  I found another way, though, thanks to you guys' suggestions.

                        • 9. Re: Dynamic image getting "stuck"
                          mewk Level 3

                          glad you got it working

                           

                          i was going to say, sometimes, depending on how you load the data, the itemRenderer's data property can be null. in these cases you can add

                           

                          if (this.data == null) {
                            return;
                          }
                          

                           

                          to the dataChange handler.

                           

                          An alternative to dataChange events is to override the set data method:

                           

                          override public function set data(value:Object) : void {
                            super.data = value;
                            if (value.sponsorImage != null || value.sponsorImage != undefined) {
                              sponsorImage.source = value.sponsorImage;
                              sponsorImage.visible = true;
                            } else {
                              sponsorImage.source = null;
                              sponsorImage.visible = false;
                            }
                          }
                          

                           

                           

                          something like that...

                           

                          - e