9 Replies Latest reply on Aug 30, 2011 10:13 AM by FM_Flame

    DataGroup vs SkinnableDataContainer vs List

    FM_Flame Level 1

      Can someone please explain to me when I should use which and which are the main differences between these 3?


      I am asking this because I read in the docs that If I want to wrap the data group in scroller for example I should use the SkinnableDataContainer and add the Scroller in the skin, but hei, why wouldn't I just use List when in it's skin it has the same thing - a scoller and a datagroup. I am confused which of these I should use for what. Now I have a list of thumbs for a gallery I am making and I have no idea which of these 3 components it is best to use for the case at this point.


      Please enlighten me

        • 1. Re: DataGroup vs SkinnableDataContainer vs List
          Flex harUI Adobe Employee

          List wraps a DataGroup in a skin, and adds some functionality like DragDrop,

          etc.  If you need most of that, then use List, otherwise, you can build your


          • 2. Re: DataGroup vs SkinnableDataContainer vs List
            FM_Flame Level 1

            What is the difference between SkinnableDataContainer and List then, since both wrap DataGroup in a skin? I mean I know that List extends ListBase which extends SkinnableDataContainer meaning List adds more functionality to the SkinnableDataContainer. What does that include? You mention Drag and Drop ok what else ? I couldn't find this anywhere summarized...


            So basicly I need to know what functionality do each of these cover:

            1) DataGroup:





            2) SkinnableDataContainer:





            3) List:

            - Drag and Drop



            • 3. Re: DataGroup vs SkinnableDataContainer vs List
              Flex harUI Adobe Employee

              It is summarized in the doc.

              • 4. Re: DataGroup vs SkinnableDataContainer vs List
                FM_Flame Level 1



                I tried to find this but didn't...


                I found this:

                http://help.adobe.com/en_US/flex/using/WSc2368ca491e3ff923c946c5112135c8ee9e-7fff.html for List


                and this:

                http://help.adobe.com/en_US/flex/using/WS64909091-7042-4fb8-A243-8FD4E2990264.html for DataGroup and SkinnableDataContainer


                But in this I don't see comparison or features listed so I can go through it and see which component best fits my needs.


                Did you mean another link? It would be great if you can post it here. I also googled for this but no luck.

                • 5. Re: DataGroup vs SkinnableDataContainer vs List
                  FTQuest Level 3

                  If you look in the docs at the right column: 'defined by' you'll see clearly where particular property or method or event etc come from.

                  For example, if you open 'List', you'll see which properties/methods/event/ etc are available only in 'List' and which are inherited from SkinnableDataContainer.



                  • 6. Re: DataGroup vs SkinnableDataContainer vs List
                    FM_Flame Level 1

                    well yeah I know but that's a very hard way of tracking down which properties come from where and figure out what functionality they cover. I was looking for a simple one glace summarized conclusion to read like: List add Drag and Drop Multiselect etc so use this component if you're going to need that functionality, if not stick to the skinnableDataContainer... simple and clear...

                    • 8. Re: DataGroup vs SkinnableDataContainer vs List
                      Jamie McDaniel

                      I believe the original poster was looking for tips or hints from other developers on which to use in different situations, not just the API Reference showing what is available with each class (which is always helpful, of course).  It is like asking when should one create an ItemRenderer in mxml and when should one extend UIComponent -- i.e. it depends on things like performance versus convenience and the best answer often comes with experience.


                      I have been stuck in the Flex 3.6 world for too long and just recently moved full-time in Flex 4.5 and mobile, so my Flex 4 experience is not yet as deep as I'd like. Just a disclaimer.


                      You will normally use List, especially if you need to keep track of a selected item and want to listen to the CHANGE event when the user changes the selected item.


                      On a mobile project, I used List in several places with the special mobile IconItemRenderer.  However, I also extended SkinnableDataContainer when I needed to create a horizontal "list" of thumbnails using item renderers that did not "throw" like a normal list scroller, but would slide to the previous or next thumbnail, snapping into position.  So I did not need an instance of a Scroller, but did need a DataGroup with its clipAndEnableScrolling property set to true.  I then had to add some mouseDown logic similar to what is found in the Scroller, but not as complex since there was not throw or velocity to deal with.  I also wanted to define the DataGroup in a skin along with a custom position indicator component (i.e. a line of circles with one circle being filled in to indicate which thumbnail out of the total you are current on).  So that is why I extended SkinnableDataContainer. Actually, I don't foresee needing to swap out skins, so I could have just created an MXML component like this:



                          <s:Rect width="100%" height="100%">


                                  <s:SolidColor color="#E0E0E0" />




                              <s:DataGroup />

                              <components:PositionIndicator />




                      It would not be skinnable in the sense of using the Flex 4 skinning contract (host component + skin), but it would work fine.


                      Or I could even just extend UIComponent and create a DataGroup and PositionIndicator in createChildren().  I could then draw the background rectangle using the graphics object in updateDisplayList().  That's not near as convenient however, and I would probably only want to do that for performance reasons or if I was creating a polished component to distribute in a library, rather than a one-off component.


                      Also, if you look at slide #17 from this 360|Flex conference on ItemRenderers, it states:


                      • DataGroup is the basic, skinless component used to render data on screen.
                      • SkinnableDataContainer is the skinnable version of DataGroup.
                      • List extends SkinnableDataContainer and adds selection, keyboard handling, and a few other things.


                      And of course, pure ActionScript projects don't use either DataGroup, SkinnableDataContainer, or List and are able to create "lists".  For example, I read that the RedBull Illume app on the iPad is a pure AS3 project.  It features a list of thumbnails that the user can throw.  Lee Brimelow interviewed the developer and asked:



                      Me: how did you get the thumbnail images to scroll so smoothly?


                      Wolfgang: for the thumbnails I laid them out in a sprite and used scrollrect to handle the scrolling. I didn’t use a tweening engine so I just animated things using an enterframe event. I tried blitting but didn’t see any performance improvement.

                      • 9. Re: DataGroup vs SkinnableDataContainer vs List
                        FM_Flame Level 1

                        Thanks! very detailed answer