6 Replies Latest reply on Jul 15, 2010 9:10 PM by Shongrunden

    Flex 4 VGroup bug? (test application provided)

    FM_Flame Level 1

      http://filip.nedyalkov.net/layout/ - view source enabled

       

      Simple website structure - Scroller wraps a VGroup in which we have:

      1) Logo space in % with centered logo in it

      2) content space in % with a centered VGroup with menu and content groups

      3) Footer group

       

      The problem which you can notice is in point 2. If I set the the verticalCenter=0 to the VGroup holding the menu and the content, it's get centered correctly and everything works perfect. But in this case I want the VGroup to get vertically centered without the height of the menu so I set verticalCenter=-32. But as you can see on the example on the right side this adds up like 64 pixels more to the height of the content space and it also moves it to the correct place.

       

      So is this extra space that adds up a bug, becase I don't want it there, it screws up my total app height. The behaviour that I expected was not to add up that extra space but just stick the VGroup to the top of the content space container until there's more than 64 pixels extra height in the container for example 75 so it should go + 5 from the top. I hope you figured my point.

       

      Would be nice if someone from the flex team or employee could say if I am correct and also please let me know if I could work somehow around this... thanks!

       

      P.S. Same behaviour with a normal group and vertical layout instead

        • 1. Re: Flex 4 VGroup bug? (test application provided)
          Shongrunden Adobe Employee

          I believe this reduced sample demonstrates your issue:

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">
             
              <s:controlBarContent>
                  <s:VGroup>
                      <s:Label text="group1.contentHeight={group1.contentHeight}, btn1.y={btn1.y}" />   
                      <s:Label text="group2.contentHeight={group2.contentHeight}, btn2.y={btn2.y}" />   
                      <s:HSlider id="heightSlider" minimum="100" value="400" maximum="600" width="300" />
                  </s:VGroup>
              </s:controlBarContent>
             
              <s:Group height="{heightSlider.value}">
                 
                  <s:Group id="group1" width="100" height="100%">
                      <s:Rect width="100%" height="100%">
                          <s:fill><s:SolidColor color="0xCCCCCC" /></s:fill>
                      </s:Rect>
                     
                      <s:Button id="btn1" width="100" height="100" verticalCenter="0" />
                  </s:Group>
                 
                  <s:Group id="group2" width="100" height="100%" x="101">
                      <s:Rect width="100%" height="100%">
                          <s:fill><s:SolidColor color="0xCCCCCC" /></s:fill>
                      </s:Rect>
                     
                      <s:Button id="btn2" width="100" height="100" verticalCenter="100"/>
                  </s:Group>
                 
              </s:Group>
             
          </s:Application>

           

          Use the HSlider to change the height of the parent Group and you will see that when the height goes below a certain threshold the non-zero verticalCenter doesn't appear to position the Button in the right location.  I used a positive verticalCenter because I find it easier to think about, but the same idea applies for a negative verticalCenter.  This might be a bug, but I'm not sure yet and will investigate further tomorrow.

          • 2. Re: Flex 4 VGroup bug? (test application provided)
            FM_Flame Level 1

            Hi, thanks for looking into this.

             

            Yes I tested your example it works alike when the containers go to 100px height which is the height of the button. The first one works ok but the second one adds up 200 px extra space, so the button now because of it's position is taking total of 300 px space.

             

            In other words:

            With verticalCenter=0 the buttons size in the container remains as it should - what's in it.. the button = 100 px.

             

            With verticalCenter = 100 px and the button have 100 px height in a container with height 300 px, what the vertical center actually does is making the button from taking 100 px space, in it's contaier that you change size of with the slider, to take 300/2 (middle of the container) - 100/2 (middle of the the button) + 100 px (verticalCenter) = 200 px Y position + 100 px button height = total 300 px height. The calculation is correct but since this is not specifying size of the button of 300 px and it's only calculation of it's positioning, it seems to me that the expected behaviour for this would be: if there is not enough space to position the item inside that container according to the verticalCenter, it should not adding that extra space and stop the resizing, but moving the item like bottom = 0 until it reaches 100px which is the actual button size. And if talking in negative vertical center it should move it like top=0.

             

            This way If I wanted the button to be still 100px but take 300 px space in the container, I would put it in a group with 300px height on which I set verticalCenter=0 and to the button inside that group verticalCenter=100.

             

            Even if this is not a bug but intentionally made to work like that, I think maybe the behaviour I just described would add additional flexibility for the layout and is more correct.

             

            Please correct me if my thinking is wrong and I would be very happy if you could provide me with a simple example of how can I achieve what I want with the current way things work.

             

            Thanks!

            • 3. Re: Flex 4 VGroup bug? (test application provided)
              Shongrunden Adobe Employee

              After further investigation this is working correctly and it looks like you understand that from your last post.

               

              Using my example, when we set verticalCenter to 100, that means the center of the Button must be 100 pixels from the center of the parent Group (by definition of verticalCenter).  That isn't possible when reducing the height of the Group below 300.

               

              Consider the formula for what the minimum height of the Group must be in order for the verticalCenter constraint to be valid.

               

              minimum height = ((distance from middle of Button to middle of parent Group) + (distance from the middle to the bottom of the Button)) * 2)

               

              So when verticalCenter="0", the minimum height of the Group is = (0 + 1/2*100) * 2 = 100.  You'll notice that the height of the left Group in my example never goes below 100.

               

              Now when verticalCenter="100", the minimum height of the Group needed for that to be true is = (100 + 1/2*100) * 2 = 300.

               

              So by default the Group's height will not drop below 300 as a minimum height in this situation because if it did verticalCenter would no longer be 100.

               

              If you would like the Group to "give up" on enforcing the verticalCenter constraint when the height of the Group becomes too small to accomodate it you could set minHeight="0" on the parent Group.

               

              Does this help your situtation?

              1 person found this helpful
              • 4. Re: Flex 4 VGroup bug? (test application provided)
                FM_Flame Level 1

                Hi,

                 

                well that still doesn't help at least as far as I can tell for now.. If I set minHeight of the container then the sizes are correct but the element I've set verticalCenter to goes beyond the size of its container. So in the example I have posted on top, for both sides the scroller will appear at the same time, but the menu with the content will now slide over the boundries of the black colored container and will appear over the logo, and since I can't set minimum Y position.. probably I will have to use a function for the y position istead of using verticalCenter to make the proper y positioning.

                 

                If you could give me a simple example of what's the proper way to create that function that would be great (or if u have another solution)?

                 

                P.S. I still think that the approach I described to you might be benefitial, after all the point of these attributes is not to make me write custom functions for positioning... It's just a suggestion...

                • 5. Re: Flex 4 VGroup bug? (test application provided)
                  FM_Flame Level 1

                  http://filip.nedyalkov.net/layout2/ - view source enabled

                   

                  I created an on update function to update the y position as it should. That's the only way I could make it work.

                   

                  Is this the correct way to do it or I should listen for some other event?

                   

                  If it's not a problem, I know it's a little off topic but is it also possible to somehow assign a bindable function to the y={getYPosition()} to update the y position ? If it is, how do I do that ?

                   

                  Thanks

                  • 6. Re: Flex 4 VGroup bug? (test application provided)
                    Shongrunden Adobe Employee

                    It sounds like using verticalCenter is not the tool to use for this case.

                     

                    I don't fully understand the layout you are trying to achieve, but it might be a good idea to write a custom layout to handle it.

                     

                    And yes you can bind to functions: http://livedocs.adobe.com/flex/3/html/help.html?content=databinding_4.html
                    1 person found this helpful