0 Replies Latest reply on May 13, 2010 4:11 PM by Paul The Lad

    Flex4: Show the browser viewport as busy

    Paul The Lad Level 1

      I want to place a busy message or icon to indicate a loading state  in my flex application. Naturally, centering  it along the application's height and width sounds like a good idea.  But an application may easily overflow a browser's viewing area at any  given time based on how the browser is re-sized ... then what?

      Therefore, I want to center the modal busy message/icon  indicator according to the height and width of the viewing area provided  by the browser at any given time.

       

      I thought that this may be possible in Flex4 if the application is  provided a skin which has a s:Scroller defined. The s:Scroller can be  pooled for its viewport's x & y coordinates and the busy message can  be centered based on those coordinates. This way, even if the user  scrolls or resizes the browser ... the busy icon would stay centered and  visible to the user.

       

      But I am facing an issue because the contentGroup in the skin is not bindable, so the following is claimed by the compiler:

       

      mainSkin.mxml:

          <scroller:ApplicationScroller id="contentScroller" ... >
              <s:Group id="contentGroup"
                       width="100%"
                       height="100%"
                       minWidth="0"
                       minHeight="0"
                       horizontalCenter="0" />
              </s:Group>
          </scroller:ApplicationScroller>

       

      main.mxml:

          <ns:Image id="busyIcon"
                    source="@Embed(source='blah.swf', symbol='loader')"
                    verticalCenter="{contentGroup.verticalScrollPosition}"
                    horizontalCenter="0"
                    />

      Data binding will not be able to detect assignments to "contentGroup" in main.mxml (Flex Problem)

       

       

      The variable "contentGroup" actually sits in SkinnableContainer.as:

      public var contentGroup:Group;

      And because its a variable without getters & setters, I can't even overrride to make it bindable

       

      I tried to be smart and do the following:

              <s:Group id="contentGroup"
                       width="100%"
                       height="100%"
                       minWidth="0"
                       minHeight="0"
                       horizontalCenter="0"
                       >
                  <s:Group id="cG"
                           width="100%"
                           height="100%"
                           minWidth="0"
                           minHeight="0"
                           horizontalCenter="0"
                           />
              </s:Group>

       

      But then the innerGroup doesn't give any meaningful values for vertical or horizontal scroll postions.

       

      I tried naming contentGroup something different but then all my content disappears.

       

      What can I do?