7 Replies Latest reply on Feb 19, 2010 12:30 PM by FTQuest

    When or where to use each containers?

    Luis Pedro Ferreira

      Hi all.

      We know that Flex 4 has all this new container as Group, VGroup, HGroup, etc...as well as the old Halo componentas as the Canvas, Panel, VBox, HBox, etc...

      This gets me really confused on which container i should use with my project.

       

      For example, what's the differente between:

       

      <s:Group>
           <s:layout>
                <s:HorizontalLayout />
           </s:layout>
      </s:Group>

       

      ...and...

      <s:HGroup>
      </s:HGroup>

       

      ...or even...

      <mx:HBox>
      </mx:HBox>

       

      I'm sorry if i'm saying something wrong but it makes me waste so much time thinking on which one i should use cause, for me, all of them do exactly the same.

       

      One other thing is if i need to do a container with a background color. What should i use?

       

      <mx:Canvas backgroundColor="{color}">

           <myComponents />
      </mx:Canvas>

       

      ...or...

      <s:Group>
           <s:Rect>
                <s:fill>
                     <s:SolidColor color="{color}"/>

                </s:fill>
           </s:Rect>

           <myComponents />
      </s:Group>

       

      Can anyone tell me which one is the best pratice now for Flex 4?

      Thank you for your time and i hope you can hellp me killing this doubts

        • 1. Re: When or where to use each containers?
          rfrishbe Level 3

          We hope you can use the new Spark components whenever possible. Group is the basic, chromeless container.  SkinnableContainer is our basic container with chrome (for instance Panel extends SkinnableContainer).  One of the cool new things you can do in spark is swap layouts.  For instance, you can use a HorizontalLayout with a Group, or you can even create a custom layout and use it with your List.  This is really powerful, and this separation between a container and the layout make a lot of things easier,  That said, for really common use-cases, we found some people were annoyed with having to type:

           

          <s:Group>

          <s:layout>

          <s:VerticalLayout horizontalAlign=".." ... />

          </s:layout>

          ...

          </s:Group>

           

          And people were used to having HBox and VBox.  Because of this, we created helper classes, HGroup and VGroup, which extend Group and have the layout object baked in.  They don't really add any functionality...they sre just there as a shortcut.  To make it easier we also proxy up some layout-dependent properties on to the container, like horizontalAlign and verticalAlign.

           

          In summary:

           

          HBox, VBox, and Canvas are replaced by one component, Group.  However there functonality is really replaced by HorizontalLayout, VerticalLayout, and BasicLayout, respectively.  We have helper objects HGroup and VGroup to make common tasks easier.  If you want a skinnable form of those components (something with chrome), use SkinnableContainer and change the layout (we did not provide helper classes HSkinnableContainer and VSkinnableContainer because we don't think it's as common of a use-case).

           

          As a side note, I think you should always switch to using these new Spark container classes whenever possible.  An exception is if you used Canvas and advanced constraints before.  We haven't created an AdvancedConstraint layout yet.

           

          I hope the new options will work out well for you, and I hope this helps clariy why we now have so many options,

           

          Good luck,

          Ryan

          1 person found this helpful
          • 2. Re: When or where to use each containers?
            David_F57 Level 5

            Hi,

             

            Another thing to consider is the efficiency of spark over mx, most of the the mx equivalents in spark are 'lighter'. In most cases this is fine and even if when for instance something available in mx:canvas is not available in s:group extending a spark components functionality will still give you a more efficient component that doesn't compile in un-needed overhead.

             

             

            Spark and mx will mix quite happily but as Ryan said you are better of using spark unless mx is the only way you can do something without major coding work.

             

            David.

            • 3. Re: When or where to use each containers?
              rfrishbe Level 3

              As per the backgroundColor part of your question, you could composite it together like you did in the Group:

               

              <s:Group>
                   <s:Rect>
                        <s:fill>
                             <s:SolidColor color="{color}"/>

                        </s:fill>
                   </s:Rect>

                   <myComponents />
              </s:Group>

               

              However, ideally, I'd tell you to use SkinnableContainer and place the Rectangle in the SkinnableContainer's skin.  This is part of the "container with chrome (SkinnableContainer) vs. container with no chrome (Group)".  Our default SkinnableContainer skin already has a background rectangle in it, and you can control its color with the backgroundColor style, like:

               

              <s:SkinnableContainer backgroundColor="red">

              ...

              </s:SkinnableContainer>

               

              We baked this background and backgroundColor style in to the SkinnableContainer component for ease-of-use, so you don't have to create a skin just for simple changes.  However, if you want something really complex (like a rounded rectangle as the background, then you should re-skin the SkinnableContainer).

               

              Hope that helps,

              Ryan

              1 person found this helpful
              • 4. Re: When or where to use each containers?
                Luis Pedro Ferreira Level 1

                Hi Ryan, now everything makes much more sence after your explanation. Thank you!

                I whick i had you on my Msn, you would help me a lot on my current project! LOL

                 

                So it means that the HGroup and VGroup only exists to simplify all the <layout> tags we need to type below the Group class to add some layout... cool, i like it.

                 

                Now for the Canvas with the colored background i use to use, i should now use the SkinnableContainer?

                Thnks

                 

                Updated: You were faster then me and already answered my question. Thank you very very much!!

                • 5. Re: When or where to use each containers?
                  Luis Pedro Ferreira Level 1

                  Hi again....

                  I've just noticed that SkinnableContainer as no backgroundColor property to set the background color like i use to do with the Panel component.

                   

                  So this way, how can we set the background color of the SkinnableContainer?

                  • 6. Re: When or where to use each containers?
                    David_F57 Level 5

                    Hi,

                     

                    <s:SkinnableContainer x="223" y="240" width="200" height="200" backgroundColor="#A62424"/>

                     

                    I'm not sure if background color was available in earlier sdks, if you haven't already download the current nightly build of the sdk and follow the intructions in the forum post regarding the required work needed to get it operational(there is a sticky at the top of the forum).

                     

                     

                    David.

                    • 7. Re: When or where to use each containers?
                      FTQuest Level 3

                      Thank you very much for really clear outline.

                      FTQuest