5 Replies Latest reply on Sep 2, 2011 5:03 AM by BrianIreland

    Buritto/Hero 4.5 (MobileApplication) Scrollbar always visible?

    as4more Level 1

      I've tried for 3 to 4 days now...

      To make a scrollers scrollbar always visible.

      It seems to me extremely counterintuitive to make a scollbar not visible within a scroller that has (for example) a textarea in it.

      You can't see that the text goes beyond the viewport and should be scrolled. Usually a scrolls purpose is to help identify there is more to scroll to.

      Enough said there, making the scrollbar invisible or fade away is really bad (DESIGN Flaw).

      Trying to make it appear initially is ultimately currently impossible from what I can tell (BUG & DESIGN flaw).

      Don't recommend turning visiblity or alpha on. That was the first minute of four days no success.

      ScrollerPolicy is only about should it appear when the content is larger and that is also not the issue.

      You see for some backwards thinking reason the scroller only appears when your actually scrolling and then fades away when done.

      I did override to disable fade out potentially (not perfect example for animated sliding action).

      Well first I replaced the skin with something people can actually see too instead of the thin line of black on black. (using a spark skin not the default)

                  import spark.skins.spark.VScrollBarSkin;

       

                  public function init():void {
                      xtc.getTextFor(title, contentTextArea);
                      contentScroller.verticalScrollBar.setStyle("skinClass", Class(VScrollBarSkin));
                      contentScroller.verticalScrollBar.addEventListener(MouseEvent.MOUSE_UP, bringMeBackPlease);

                  }

       

                  public function bringMeBackPlease(e:MouseEvent):void {
                      trace("bringMeBackPlease: " + e.type);
                      trace("MOUSE: " + e.localX + " " + e.localY);
                      var ai:AnimateInstance = contentScroller.verticalScrollBar.activeEffects[0];
                      if(ai != null) {
                          if(ai.animation != null) {
                              ai.animation.stop();
                              ai.animation = null;
                              contentScroller.verticalScrollBar.removeEventListener(MouseEvent.MOUSE_UP, bringMeBackPlease);
                          }
                      }
                  }

      Okay well that reminds me I totally replaced the skin with a Catylist built one two but this animated fade functionality resides clearly in the Scroller class I think.

      You'd possible be able to replace the Scroller class via Catylist but it only has a few simple objects to play with No textarea, no Scroller, etc.

      I couldm't find a different none mobile spark scroller that isn't disfunctional in this way (fadeing scrollbars).

      I even delved into using Effects to Fade it back

                  //private var restoreSliderFade:Fade = new Fade();

      skipping code it did fade the dcroller to view but I could not also make the scrollbar fade back.

      I tried simulating drag operations, mousedown, move events etc. nohting can actually get the f!ng scrollbar to appear that I can find.

      It's rare I result to forums so I'm hopeful people at Adobe in development see this stuff and actually realize the need a boolean on the MobileApplication Scroller Class that is something like autohideScrollbars with a default of false.

      Please help ASAP anyone any work around??!!!

      At this point I'm forced to try and make the scroller cut a line of text in half so the user thinks Oh I should scroll now... but where's the scrollbar?!

      I've dynamically loaded the textarea in init and that resizes the thing.

      I've added manually draging of the textarea (also seems wrong and should work by default)

       

                  private function draggingContent(me:MouseEvent):void {
                      trace("draggingContent" + me.toString());
                      switch(me.type) {
                          case MouseEvent.MOUSE_DOWN:
                              dragging = true;
                              dragOrigin = contentScroller.contentMouseY;
                              scrollStart = contentScroller.verticalScrollBar.value;
                              break;
                          case MouseEvent.MOUSE_MOVE:
                              if(dragging == true) {
                                  contentScroller.verticalScrollBar.value = (scrollStart + (dragOrigin - contentScroller.contentMouseY));
                              }
                              break;
                          case MouseEvent.MOUSE_UP:
                          case MouseEvent.MOUSE_OUT:
                              contentScroller.setFocus();
                              dragging = false;
                              break;
                          default:
                              break;
                      }
                  }

      with listeners in initi()

                      contentTextArea.addEventListener(MouseEvent.MOUSE_DOWN, draggingContent);
                      contentTextArea.addEventListener(MouseEvent.MOUSE_MOVE, draggingContent);
                      contentTextArea.addEventListener(MouseEvent.MOUSE_UP, draggingContent);
                      contentTextArea.addEventListener(MouseEvent.MOUSE_OUT, draggingContent);
                      contentScroller.setFocus();

       

       

      I could go on with all the ways I looked at ever class property and function, delved through the debug viewer inspecting values before and during states of visibility.

      Is there a way to access all the automation and disable certain ones like fading with my hack breaking other more useful smoothings, or override the ones I loath?!!

       

         Your angry MobileApplication Burrito Beta Testing Victim

        • 1. Re: Buritto/Hero 4.5 (MobileApplication) Scrollbar always visible?
          Shongrunden Adobe Employee

          I'm sorry to hear you've been having problems with this, but thank you for providing this feedback on here.  It's really helpful for us to hear experiences like this so we can work to make things easier.

           

          1. "making the scrollbar invisible or fade away is really bad (DESIGN Flaw)."

           

          Native iOS and Android applications also fade away their scrollbars the same way, but they do initially show the scrollbar for a short time when the view is first loaded before fading them away.

           

          Here's an enhancement request for allowing scrollbars to always be visible: http://bugs.adobe.com/jira/browse/SDK-29296

           

          2. "Trying to make it appear initially is ultimately currently impossible from what I can tell (BUG & DESIGN flaw)."

           

          This is something we thought about doing, but didn't have the time to implement in this release.  See attached ZIP for an example of how you might do this.

           

          There is an enhancement filed here: http://bugs.adobe.com/jira/browse/SDK-29299

           

          3. "ScrollerPolicy is only about should it appear when the content is larger and that is also not the issue."

           

          When you're using a mobile Scroller the horizontalScrollPolicy/verticalScrollPolicy govern whether scrolling is allowed in that direction.  It doesn't have any further connection with the visibility of scroll bars like it does in a desktop Scroller.

           

          4. "Well first I replaced the skin with something people can actually see too instead of the thin line of black on black. (using a spark skin not the default)"

           

          The skin for the scrollbars has been updated since the preview release and will stand out more in the final release.

           

          5. "I couldm't find a different none mobile spark scroller that isn't disfunctional in this way (fadeing scrollbars)."

           

          On a desktop application you can hook up your own HScrollBar/VScrollBar directly to have more control over things like this, but in a mobile application only Scroller currently is able to handle touch-based scrolling.

           

          It might make sense to enable touch scrolling without needing a Scroller.  Here's the enhancement request for this: http://bugs.adobe.com/jira/browse/SDK-29300

           

          7. "I tried simulating drag operations, mousedown, move events etc. nohting can actually get the f!ng scrollbar to appear that I can find."

           

          Interesting idea, but faking a touch scroll is quite tricky and won't really get the results you are looking for in the final release so I would recommend not going further down this approach.

           

          8. "It's rare I result to forums so I'm hopeful people at Adobe in development see this stuff and actually realize the need a boolean on the MobileApplication Scroller Class that is something like autohideScrollbars with a default of false."

           

          This relates to the first two bugs listed above.

           

          9. "Please help ASAP anyone any work around??!!!"

           

          See the attached ZIP for an example application that demonstrates how to keep the scrollbars always visible, as well as a sample way of implementing the initial show and fade functionality.

           

          It was a bit tricky to figure this out because both Scroller and ScrollerLayout affect the visibility of the scrollbars and change includeInLayout/scaleX/scaleY when things are not visible.

           

          10. "Your angry MobileApplication Burrito Beta Testing Victim"

           

          Again, thank you for your detailed feedback.  I know working with preview releases can be very frustrating at times, but hopefully the information in this post helps ease the pain a little.

           

          Please feel free to vote and comment on any/all of the bugs listed above.

           

          Thanks,

          Steve

          • 2. Re: Buritto/Hero 4.5 (MobileApplication) Scrollbar always visible?
            as4more Level 1

            Great Steve!

            It's pleasurable to see someone is watching and doing great work to help communicate our needs.

            I of course am using Flash Builder 4.5 Burrito and I had trouble "File>Import Flash Builder Project..."ing this zip

            Tried making a project and it did overwrite the src (once I got the name right).

            I think it's an Application and not a MobileApplication ans scrollers don't have a problem their, but I believe it does demonstrate a way around this.

             

            When I tried setting a skin class for the scrollbar to my own in the Mobile Scroller I didn't get the expected result... so far.

             

            Something like this was reported...

            ArgumentError: Undefined state 'inactive'.

            But I see I still havn't tried to replace the scroller skin.

            I've also looked at Paninni (Catalyst) but never found a Scroller to modify there. Although I see some more things have been added.

             

            I'm going to try this somemore so again thanks for the help and adding/making change requests from this.

             

            package masterdomain.fixas3

             

            {

             

                import spark.components.VScrollBar;

             

                import spark.skins.spark.VScrollBarSkin;

             

                public class VisibleVScrollBar extends VScrollBar

             

                {

             

                    public function VisibleVScrollBar()

             

                    {

             

                        super();

             

                        setStyle("skinClass", Class(VScrollBarSkin));

             

                    }

             

                    override public function set alpha(value:Number):void {

             

                        trace('ignore alpha', value);

             

                    }

             

             

             

                    override public function set visible(value:Boolean):void {

             

                        trace('ignore visible', value);

             

                    }

             

             

             

                    override public function set includeInLayout(value:Boolean):void {

             

                        trace('ignore includeInLayout', value);

             

                    }

             

                   

             

                    override public function set scaleX(value:Number):void {

             

                        trace('ignore scaleX', value);

             

                    }

             

                   

             

                    override public function set scaleY(value:Number):void {

             

                        trace('ignore scaleY', value);

             

                    }

             

            }

             

            }
            • 3. Re: Buritto/Hero 4.5 (MobileApplication) Scrollbar always visible?
              as4more Level 1

              Ya okay I got it now thanks!

              May this be of great help to others as well.

              • 4. Re: Buritto/Hero 4.5 (MobileApplication) Scrollbar always visible?
                as4more Level 1

                Just trying to check answered! seems you can't edit that part (could be a bug), so I'm trying to mark answered with a new reply.