6 Replies Latest reply on Dec 3, 2009 6:31 AM by David_F57

    Scroller-problem in s:Application s:Skin Is this a Bug or a "Feature"?

    lathoudero Level 1

      Hi all, I've encountered the following issue:

       

      A simple Flex interface, with a header, main body, footer.

      I want the footer to always be on the bottom, but not 'overlap' the main body.

      So I created the following simple skin, which works as I expect it to, except that "s:Scroller" doesn't trigger when the content is smaller then the browser-height! Note that I've highlighted the "contentGroup's" height="100%", because if I REMOVE this line, "s:Scroller" works as I expect it to, but the the FOOTER doesn't end up at the bottom when the browser's height is larger then the content!

       

      Something I've misunderstood? Or is it actually a bug?

       

      ~~~~~~~~~~~~~~~ApplicationSkin1.mxml~~~~~~~~~~~~~~~~

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              alpha.disabled="0.5">
          <fx:Metadata>
              <![CDATA[
               [HostComponent("spark.components.Application")]
          ]]>
          </fx:Metadata>
          <s:states>
              <s:State name="normal"/>
              <s:State name="disabled"/>
              <s:State name="normalWithControlBar"/>
              <s:State name="disabledWithControlBar"/>
          </s:states>
          <s:Rect id="backgroundRect"
                  left="0"
                  right="0"
                  top="0"
                  bottom="0">
              <s:fill>
                  <s:SolidColor color="0xFFFFFF"/>
              </s:fill>
          </s:Rect>
          <s:Scroller width="600"
                      top="0"
                      bottom="0">
              <s:VGroup clipAndEnableScrolling="true"
                        horizontalAlign="center"
                        width="100%">
                  <s:Label text="This is my header"
                           fontSize="36"
                           fontWeight="bold"/>
                  <s:Group id="contentGroup"
                           width="100%"
                          height="100%"
                           minWidth="0"
                           minHeight="0"/>
                  <s:Label text="This is my footer"
                           fontSize="36"
                           fontWeight="bold"/>
              </s:VGroup>
          </s:Scroller>
      </s:Skin>

       

      ~~~~~~~~~~~~~~~ScrollbarTest.mxml~~~~~~~~~~~~~~~~

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/halo"
                     minWidth="750"
                     skinClass="ApplicationSkin1"
                     pageTitle="Scrollbar Test"
                     minHeight="400">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <mx:Form horizontalCenter="0"
                   top="50"
                   width="400">
              <mx:FormHeading label="My Form Header"/>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:FormItem label="Label">
                  <s:TextInput/>
              </mx:FormItem>
              <mx:Spacer height="50"/>
          </mx:Form>
      </s:Application>

        • 1. Re: Scroller-problem in s:Application s:Skin Is this a Bug or a "Feature"?
          David_F57 Level 5

          Hi,

           

          Firstly the behaviour is being upset by the minwidth and minheight of you application, then I would do the skin slightly differently

           

          the skin

          ======

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:s="library://ns.adobe.com/flex/spark"

          alpha.disabled="0.5">

          <fx:Metadata>

          <![CDATA[

          [HostComponent("spark.components.Application")]

          ]]>

          </fx:Metadata>

          <s:states>

          <s:State name="normal"/>

          <s:State name="disabled"/>

          <s:State name="normalWithControlBar"/>

          <s:State name="disabledWithControlBar"/>

          </s:states>

          <s:Group top="0" left="0" height="30" right="0">

          <s:Label text="This is my header"

          fontSize="36"

          fontWeight="bold"/>

          </s:Group>

          <s:Scroller left="0" top="30" right="0" bottom="30" id="scroller" minViewportInset="1" focusEnabled="false">

          <s:Group id="contentGroup">

          <s:layout>

          <s:VerticalLayout gap="0" horizontalAlign="contentJustify" />

          </s:layout>

          </s:Group>

          </s:Scroller>

          <s:Group left="0" height="30" right="0" bottom="0">

          <s:Label text="This is my footer"

          fontSize="36"

          fontWeight="bold"/>

          </s:Group>

          </s:Skin>

          In the App I would tend to declare the header and footer as variables then use flexglobals to fill the properties in the skin.
          David.

          1 person found this helpful
          • 2. Re: Scroller-problem in s:Application s:Skin Is this a Bug or a "Feature"?
            lathoudero Level 1

            Hi David, thanks for the reply!


            Unfortunately it doesn't give me the behaviour I want.

            I want the footer to stick to the bottom, until it 'bumps' against the content of contentGroup. And that's when the the s:Scroller should kick in.

            I don't want the footer to go 'over' the contentGroup, like it does with your example.

             

            This Skin-example does what I expect of the s:Scroller, except that my footer doesn't stick to the bottom of the page when you increase the height.

            So what I do, to get the behaviour I want, is to set contentGroup.height="100%". This does give the correct behaviour of what I want, except NOW the s:Scroller doesn't kick in as I'd expect it to.

            • 3. Re: Scroller-problem in s:Application s:Skin Is this a Bug or a "Feature"?
              lathoudero Level 1

              Found it!!

              What I did is remove the minwidth & minheight from the application AND minwidth & minheight from contentGroup, which is generated here by default.

              THIS is how I want it to work:

               

              ~~~~~~~~~~~~~~~ApplicationSkin1.mxml~~~~~~~~~~~~~~~~

              <?xml version="1.0" encoding="utf-8"?>
              <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      alpha.disabled="0.5">
                  <fx:Metadata>
                      <![CDATA[
                       [HostComponent("spark.components.Application")]
                      ]]>
                  </fx:Metadata>
                  <s:states>
                      <s:State name="normal"/>
                      <s:State name="disabled"/>
                      <s:State name="normalWithControlBar"/>
                      <s:State name="disabledWithControlBar"/>
                  </s:states>
                  <s:Rect id="backgroundRect"
                          left="0"
                          right="0"
                          top="0"
                          bottom="0">
                      <s:fill>
                          <s:SolidColor color="0xEEEEEE"/>
                      </s:fill>
                  </s:Rect>
                  <s:Scroller width="600"
                              top="0"
                              bottom="0" horizontalCenter="0" verticalScrollPolicy="auto">
                      <s:VGroup clipAndEnableScrolling="true"
                                horizontalAlign="center"
                                width="590">
                          <s:Label text="This is my header"
                                   fontSize="36"
                                   fontWeight="bold"/>
                          <s:Group id="contentGroup"
                                   width="100%"
                                   height="100%"/>
                          <s:Label text="This is my footer"
                                   fontSize="36"
                                   fontWeight="bold"/>
                      </s:VGroup>
                  </s:Scroller>
              </s:Skin>

               

              ~~~~~~~~~~~~~~~ScrollbarTest.mxml~~~~~~~~~~~~~~~~

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/halo"
                             skinClass="ApplicationSkin2"
                             pageTitle="Scrollbar Test">
                  <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                  </fx:Declarations>
                  <mx:Form horizontalCenter="0"
                           width="100%" backgroundColor="0x00CC00">
                      <mx:FormHeading label="My Form Header"/>
                      <mx:FormItem label="Label">
                          <s:TextInput/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                          <s:TextInput/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                          <s:TextInput/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                          <s:TextInput/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                          <s:TextInput/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                          <s:TextInput/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                          <s:TextInput/>
                      </mx:FormItem>
                      <mx:FormItem label="Label">
                          <s:TextInput/>
                      </mx:FormItem>
                  </mx:Form>
              </s:Application>

              • 4. Re: Scroller-problem in s:Application s:Skin Is this a Bug or a "Feature"?
                David_F57 Level 5

                Hi,

                 

                In my first post I told you that the scroller behaviour is affected by minwidth/minheight. The stage can't shrink below these values hence the scroller is affected.

                 

                David

                1 person found this helpful
                • 5. Re: Scroller-problem in s:Application s:Skin Is this a Bug or a "Feature"?
                  lathoudero Level 1

                  Right you are, David.

                   

                  But, it doesn't make any sense, right?

                  Using my "working example", why does't the s:Scroller kick in when I set the s:Application's minHeight = "600"?

                   

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:mx="library://ns.adobe.com/flex/halo"
                                  skinClass="ApplicationSkin2"
                                  pageTitle="Scrollbar Test"
                                  minHeight="600"> //This prevents the s:Scroller from being triggered

                   

                  By the way, when I use minHeight = "100", the scroller DOES work, so basically it boils down to who catches the browser's height first:

                  The s:Scroller, or the s:Application.

                  IF the content of the site is SMALLER then s:Application's defined minHeight, the s:Scroller WON'T be triggered.

                  IF the content of the site is BIGGER then s:Application's defined minHeight, the s:Scroller is triggered as expected, AND it won't disappear when the browser's height is smaller then the sum of the scroller icon's combined.

                   

                  So, my next question is:

                  How do I activate the s:Scroller, when browser's heigth is smaller then s:Application minHeight?

                  • 6. Re: Scroller-problem in s:Application s:Skin Is this a Bug or a "Feature"?
                    David_F57 Level 5

                    Personally I think the minheight minwidth defaults are wrong, defaults to 100% for width and heights would be better becuase all the child containers would behave in a more natural/expected way.

                     

                    I edited the templates so the defaults aren't there, makes life so much easier

                     

                     

                    David