9 Replies Latest reply on May 23, 2010 6:00 PM by cheftimo

    Strange problem with Spark tile list and item renderer

    cheftimo Level 2

      Hello all.

       

      I have a <s:List> with <s:TileLayout> that displays product thumbnails; these thumbnails are MXML Renderers. Clicking a thumbnail causes a detailed view of the product to show up to the left of the tile list. The tile list initially displays all the products and there is a <s:ComboBox> one can use to filter the collection, to display the products by category.

       

      It’s working, more or less; here’s the fly in the ointment:

       

      When you select a category in the ComboBox and the filtered tile list first displays, the filtering is correct, but the names of the products are the same as in the previous view before you select in the ComboBox; once you click on one of the new thumbnails, the product names get updated. The strange part is that the new thumbnails show the right images right at start, but the wrong name.

       

      If this is not completely clear, you can try it. The project is here: http://www.webgourmand.com/wg/Tinder/Tinderbox.html. ViewSource is enabled.

       

      Note that, at this point, this is very preliminary; more data will be displayed later and some styling and transitions will be done. I just want to get the functionality right first.

       

      I know the problem is with the Spark components: if you go to the second tab, labeled “Products - MX”, you will see this working as one would expect – the component in that tab uses <mx:TileList>.

       

      I would vey much appreciate any insight on this.

       

      Y’all have fun and best regards,

       

      Carlos

        • 1. Re: Strange problem with Spark tile list and item renderer
          cheftimo Level 2

          When looking at the project described in the above original post, if you click a thumbnail, the ComboBox is no longer visible. To get it back, click the “Show filter options” label (upper left).

           

          Carlos

          • 2. Re: Strange problem with Spark tile list and item renderer
            cheftimo Level 2

            Help!! [BUMP]

             

            I find it hard to believe I am the only one in this community who wants to use a filter function in a s:List.

             

            Somebody please look at the issue described above.

             

            Carlos

            • 3. Re: Strange problem with Spark tile list and item renderer
              David_F57 Level 5

              hi,

               

              When it comes to coldfusion I am in unfamiliar territory, plus I can't actually run or test my thoughts on your code without it so a little guess work is in order, it maybe helpful or maybe not.

               

              in your datamanager.mxml

               

              make this bindable - I don't think it will make a difference but it doesn't hurt to try

               

              [Bindable] private var products:ArrayCollection;

               

              in the result handler , make sure that 'products'  is holding data rather than pointing to it

               

              private function getProductsResultHandler(event:ResultEvent):void{

              //var prods:ArrayCollection = new ArrayCollection();

              //prods.source=event.result as Array;

              products = new ArrayCollection(event.result as Array);

              //var e:Event = new Event("productsLoaded");

              this.dispatchEvent(new Event("productsLoaded"));

              }

              This is my first quick look, If I have time I will look at what is happening in the filtering of the data. Another thought is that the tilelist refresh is out of sync with the filtering, have you tried using tiled datagroup instead of lists.
              David.

              • 4. Re: Strange problem with Spark tile list and item renderer
                David_F57 Level 5

                hi,

                 

                I just tried a really simple example of filtering with spark datagroup and it seemed to work ok. I'll have a better look at your code but for the moment  this is what I did as a test of datagroup and filtering

                 

                http://flashhub.net/filter/

                 

                the php service class is really simple (I haven't tried with filtering at the server end yet)

                 

                var $db_host = 'localhost';

                var $db_name = 'pets';

                var $db_user = 'root';

                var $db_pwd = '';

                 

                function pets()

                 

                {

                // Define the methodTable for this class in the constructor

                 

                $this->methodTable = array(

                "getPets" => array(

                "description" => "Pets Database",

                "access" => "remote"

                )

                );

                }

                 

                function getAllPets()

                {

                $mysql = mysql_connect($this->db_host, $this->db_user, $this->db_pwd);

                mysql_select_db( $this->db_name);

                $Query = "SELECT * from pet";

                $Result = mysql_query( $Query );

                return( $Result );

                }

                 

                function getTypeOfPets($category)

                {

                $mysql = mysql_connect($this->db_host, $this->db_user, $this->db_pwd);

                mysql_select_db( $this->db_name);

                $Query = "SELECT * from pet where CATEGORY=$category";

                $Result = mysql_query( $Query );

                return( $Result );

                 

                }

                 

                function getCategories()

                {

                $mysql = mysql_connect($this->db_host, $this->db_user, $this->db_pwd);

                mysql_select_db( $this->db_name);

                $Query = "SELECT * from category";

                $Result = mysql_query( $Query );

                return( $Result );

                }

                }

                ?>

                • 5. Re: Strange problem with Spark tile list and item renderer
                  cheftimo Level 2

                  Hello David, thanks for looking at this.

                   

                  My problem here is neither the data nor its filtering - which I want to do on the client machine. The CF code is just as simple, if not simpler than the PHP code.

                   

                  If anyone ends up looking more, do this

                  (http://www.webgourmand.com/wg/Tinder/Tinderbox.html - Please be patient – not yet optimized – ViewSource is enabled):

                   

                  ·        When the tile list first displays, look at the name labels (at the top of each tile);

                  ·        in the ComboBox, select the first item, Ashtrays;

                  ·        looking at the labels, you will see they did not change, although the images did;

                  ·        click one of the ashtrays and watch all the tiles get updated to the correct name.

                   

                  Go to the “Products - MX” tab, try the same and watch the thing work the way it’s supposed to.

                   

                  I suspect this is a Spark Item Renderer bug or some other problem with Bug Builder – er, Flash Builder – and I am not surprised none of the Adobe people have touched this thread. I am going to try contacting one of them more directly.

                   

                  If anybody sees something funny in the itemRenderer or List code, please point it out.

                   

                  Best regards to all,

                   

                  Carlos

                  • 6. Re: Strange problem with Spark tile list and item renderer
                    SpaghettiCoder Level 3

                    I submitted a bug a month or so ago regarding

                     

                    <s:List and filtering

                     

                    Bug is still open issue...

                    • 7. Re: Strange problem with Spark tile list and item renderer
                      cheftimo Level 2

                      Hi SpaghettiC,

                       

                      The data and the filtering are not the problem here. If you go to the second tab (Products – MX) in the sample project, you will see that everything works fine using the MX components. The problem is with the Spark components, either the List or the ItemRenderer

                       

                      But thanks for your reply; you have always been very helpful. Regards,

                       

                      Carlos

                      • 8. Re: Strange problem with Spark tile list and item renderer
                        SpaghettiCoder Level 3

                        the bug i submitted was <s:list issue

                         

                        I had a <mx: and a <s:list side by side.

                         

                        the <mx: one would filter and display properly, but the <s: one would have odd behaviors that was repeatable.

                         

                        Maybe you can try this and see if it fixes your prob

                         

                        Where you do the filter, and call the .refresh() add another line callLater(acRefresh);

                         

                        acTest.filterFunction = myFilterFunction;
                        acTest.refresh();
                        callLater( acRefresh );

                         

                        It's a temp work around for my prob I wonder if it fixes what your trying to do as well.

                        • 9. Re: Strange problem with Spark tile list and item renderer
                          cheftimo Level 2

                          Problem solved…

                           

                          I had made the top label in the List itemRenderer a s:TextArea – I don’t remember exactly why, but probably because, in a previous Flex 3 project, I had used mx:TextArea in a similar item renderer. When I changed that to s:Label, the problem disappeared.

                           

                          The moral of the story: got to read the destructions before you use something new. Duh!

                           

                          The project on the remote server is still there with the error and will not be updated for a couple of days.

                           

                          My thanks to all those of you who contributed their time and comments.

                           

                          Carlos