4 Replies Latest reply on Feb 2, 2011 3:30 AM by Pablo Souza

    Really basic question about containers and children.

    Krooted Level 1

      I tried asking this question on a different site, but I am going to cross post it here in hopes for better clarification!


      I am trying to make the switch from Flex sdk 3.5 to Flex sdk 4.


      In Flex 3.5 if you create a VBox with a height of 200 and have 2 children in that container who both have a height of 200 the VBox will automatically cut off the second child and add a scroll bar (this makes perfect sense to me).


      In Flex 4 now, I create a VGroup with a height of 200 and add 2 children to that container. Same as before both children have a height of 200 also. In this case the second child component will float below the VGroup(parent) that I created. I would think logically that the second component would just be invisible and cut off by the height restrictions on the parent container. This does not seem to be the case. Now I understand that the scroll bars will only appear if I skin the VGroup to allow them. So my question is, is there a way or property I can assign to make the children that exceed the height/width of the box to just get cut off? If there isn't does this mean I have to skin every container whose children might exceed the height/width of its parent?

      Sample code I am using.


      <s:Panel height="200" width="200" minHeight="0" maxHeight="200">
           <s:Button height="150" width="100"/>
           <s:Button height="150" width="100"/>


      On the other forum someone suggested that I just use an mx:Panel instead..


      So I guess I am just confused as to when to use spark and when to use mx components now.. I think I read somewhere that the scroll bars are not included on the containers automatically in spark because they were too heavy to load on every container object. This being the case the only time I can see Spark being useful is when I want to skin something... Which seems kinda silly to me for some reason...

      Lets use a real world example: Lets say I make an application for production and I have a bunch of nested containers on the screen. If I have visual components in these containers and the application and all of its children are set with percents for height and width. If the user adjusts the application size(browser window) the components will just freely roam off of there parents if I use spark containers without a scrollable skin...

      So basically an un-skinned spark component is useless?


      Thanks for any and all help!

        • 1. Re: Really basic question about containers and children.
          Krooted Level 1

          I have read this forum post but, I am still unclear as to how the set height and widths will work.


          • 2. Re: Really basic question about containers and children.
            Pablo Souza Level 3

            Hi there!


            Your questions about new Spark components are quite common.


            First of all let's clarify why the content inside your VGroup component (or other spark container) is not respecting the container's boundaries.

            Take a look at VGroup base class called BaseGroup. Now realize that this class implements the interface IViewport.

            If you take a look inside this class, you are gonna see that the interface defines an accessor method called clipAndEnableScrolling().

            Now go back to BaseGroup class, the class that implements the interface IViewport, and realize that the default value of clipAndEnableScrolling property is false. So that if you want to clip the children to the bounderies of the VGroup container (the viewport), just set true to the property value.


            Now let's talk about Scroller: You don't need to skin spark containers any time you want to use the Scroller component.

            Please if you have a chance, take a look at the source of this class in Flex 4 framework: spark.components.Scroller

            If you pay attention to this code you will realize it has a property called viewport. The scroller component displays a viewport and also horizontal and vertical scroll bars. The only requirement is that the viewport must implements the IViewport interface. As we could see above, looks like VGroup implements it.

            So that you can have a code like this:




            width="100%" height="100%">






                      <s:TextArea width="200" height="300"/>








            Just a tip: Using the Scroller component there is not need to set clipAndEnableScrolling to true once it's is done automatically.


            Hope you could understand my English ...



            Best regards,

            Pablo Souza

            1 person found this helpful
            • 3. Re: Really basic question about containers and children.
              Krooted Level 1

              crap I gave you only helpful, not answered my question feedback!


              Perfect answer thank you very much! I knew the scroller class worked for skinning, never thought to use it on any component I wanted to scroll for some reason...


              Thank you very much!

              • 4. Re: Really basic question about containers and children.
                Pablo Souza Level 3

                The new spark components are quite different from Halo ones but they are introducing a real separation between business logic and visual appearence. Let's enjoy it.


                Nice to help you!