18 Replies Latest reply on Jul 25, 2011 11:13 PM by Shongrunden

    ProgressBar on Flex Mobile? Howto?

    PresidentCamacho Level 1

      I feel like an idiot asking this, but is there really no official way to put a ProgressBar component on a Flex Mobile project, even up to version 4.5.1?  The documents seem to indicate as such, as Spark still has no ProgressBar equivalent, and mobile is Spark-only.

       

      Maybe there is a 3rd party progress bar out there somewhere?

       

      I'm currently trying to hack the Flash Pro CS5.5 fl.controls.ProgressBar into my Flash Builder project through an SWC, which is just plain dirty, since Adobe seems to have purposely made the Flex-side interfaces incompatible between Pro and Builder (eg, fl.controls instead of mx.controls).

       

      What gives?  It can't seriously be this involved to put a progress bar on a mobile Flex project... I feel like I'm in Bizarro-world...

        • 1. Re: ProgressBar on Flex Mobile? Howto?
          PresidentCamacho Level 1

          If anybody is curious, this is the procedure to hack a Flash Pro ProgressBar displaying in a Flex Mobile app (specifically an iOS project)... if anybody has a better way to get a progress bar, I'm all ears!

           

          1. Flash Pro CS5.5:
            1. Open Flash Pro CS5.5, create a new ActionScript 3.0 FLA (not an iOS or Android FLA)
            2. Open the Component window, and drop a ProgressBar onto your stage
            3. Note that you now have a ProgressBar and several related classes in your Library
            4. Save your FLA, and then configure it to publish as an SWC.  In the ActionScript 3.0 settings, remove the textLayout library altogether (mixing textLayout libraries tends to cause very strange compile and runtime errors).
            5. Publish that SWC
          2. Flash Builder 4.5.1:
            1. Open FB 4.5.1.  Create a new MXML inside a Flex Mobile project - I was using a Spark View.
            2. In your Project libraries, add the SWC we just created
            3. Also, in your Project libraries, add the SWC Folder: ${FLASHPRO_APPCONFIG}/ActionScript 3.0/libs
              1. FLASHPRO_APPCONFIG should be configured in Prefererences | General |  Workspace | Linked Resources as the Common/Confuguration/ subdirectory  of your Flash Pro CS5.5 application directory
            4. Appropriately add: xmlns:controls="fl.controls.*"
            5. Inside the fx:Declaration, add:
              1. <controls:ProgressBar id="progress_bar" barSkin="ProgressBar_barSkin" indeterminiteSkin="ProgressBar_indeterminiteSkin" trackSkin="ProgressBar_trackSkin" direction="right" height="20" width="200" ?>
            6. Outside the fx:Declaration, add:
              1. <s:SpriteVisualElement id="progress_bar_container" x="100" y="200" height="20" width="200" />
            7. Inside an event handler or some other instance code (the creationComplete handler works for testing), add the following code:
              1. progress_bar_container.addChild( progress_bar );

           

          The ProgressBar does not show up in the designer, but it does show up at runtime :).  This was the first code I was able to get working.

           

          The other promising lead was to use the FlashComponentPlaceholder object instead of SpriteVisualElement (called the "Flash Professional Component" in the Component browser in Flash Builder), but because Adobe changed the package names from mx to fl as I mentioned above, this resulted in incompatible interfaces at runtime (between the two versions of IUIComponent).  This probably could be solved by writing an adapter class, but that seemed like a bit of extra code for no gain compared to what I have above.

           

          Also, I haven't tried it, but I'm fairly certain you could use this  procedure to get any of the MX controls available in Flash Pro into a  Flex Mobile project... I wonder what's with this artificial restriction?

          • 2. Re: ProgressBar on Flex Mobile? Howto?
            Lee Burrows Level 4

            hi

             

            mx (and flash pro) components are not recommended because they havent been optimised for mobile (ie: they're too slow/heavy)

             

            also, mobile flex apps are AIR apps so a preloader is pointless - you just need a splash page for the startup time

            • 3. Re: ProgressBar on Flex Mobile? Howto?
              PresidentCamacho Level 1

              Not to be argumentative, but there are many other uses for a ProgressBar besides a preloader, or any sort of loader for that matter.  Most of my uses have nothing to do with loading, for that matter, they're actually a very integral part of my app's UI.

               

              If the MX ProgressBar really is that inefficient, that's all the more reason Adobe needs to implement one in Spark.

               

              It's a @$%! progress bar, we've had that technology since the 80s.  I don't think I've ever used a major app that didn't have at least one hidden somewhere.  In our in-house Flash Pro UI kit, we have one written in 181 lines, including ample commenting and whitespace.  It's just a very strange ommission from the Flex Mobile kit... all sorts of advanced charting and windowing, but no progress bar?

              • 4. Re: ProgressBar on Flex Mobile? Howto?
                JeffryHouser Level 4

                What Advanced Charting is avaialble in the Flex Mobile set?

                 

                I know Adobe has said that the charting components are supported; but I didn't think they were actually optimized or changed from the rendition availble in the pre-mobile days.

                 

                I'm also not sure what you mean by windowing.  Usually people mean MDI (Multiple Document Interface), but the Flex Framework does not provide any form of MDI implementation.

                 

                I feel short sighted in saying this, but what are the other uses for a progress bar other than some form of loader?  The only thing I can think of is copying files from one place to another.

                 

                If you already have a Flash Pro one, why not convert it to Flex?

                • 5. Re: ProgressBar on Flex Mobile? Howto?
                  PresidentCamacho Level 1

                  I feel like an *** pointing out how short sighted you are, but when was the last time you opened up a video game?  Progress bars everywhere to indicate various player statistics - that's what I'm doing.  In fact, in just about any application where you're dealing with non-parametric statistics of any sort you need some effective way of displaying a percentage, a progress bar is a well-accepted way, and is also visually a building component for... a bar graph!

                   

                  And apologies, I didn't mean to say advanced charting, just charting - charts.swc is part of the default Flex Mobile library.

                   

                  In terms of windowing, I mean that we pretty much have a duplicate of the native UI constructs we can expect - View based navigation, modals.

                   

                  My point is that the Flex team spent so much time getting all these other constructs working, how is it that they have totally forgot about the ProgressBar?

                  • 6. Re: ProgressBar on Flex Mobile? Howto?
                    Shongrunden Adobe Employee

                    Are you looking for a progress bar specifically or just something to show the user that something is loading?

                     

                    Flex 4.5 has a BusyIndicator component available in mobile projects: http://opensource.adobe.com/wiki/display/flexsdk/Busy+Indicator

                    • 7. Re: ProgressBar on Flex Mobile? Howto?
                      JeffryHouser Level 4

                      PresidentCamacho wrote:

                       

                      I feel like an *** pointing out how short sighted you are, but when was the last time you opened up a video game?  Progress bars everywhere to indicate various player statistics - that's what I'm doing. In fact, in just about any application where you're dealing with non-parametric statistics of any sort you need some effective way of displaying a percentage, a progress bar is a well-accepted way, and is also visually a building component for... a bar graph!

                       

                       

                      I was trying to ask a legit question; don't feel like an ***.

                      That said, I wouldn't have equated Player Statistics, nor a bar graph line a Progress bar.  For either of those, I'd use straight visual elements; most likely an FXG Rectangle or two for a mobile app.

                       

                       

                      PresidentCamacho wrote:

                      My point is that the Flex team spent so much time getting all these other constructs working, how is it that they have totally forgot about the ProgressBar?

                       

                      In terms of use cases for Flex; a game is farthest from.

                      • 8. Re: ProgressBar on Flex Mobile? Howto?
                        PresidentCamacho Level 1
                        In terms of use cases for Flex; a game is farthest from.

                         

                        Once again I must apologize for pointing out your short-sightedness, but there are about a million Mafia Wars style games built on Flash that would be just as well built on Flex (and many in fact are) - as far as display technology, these are just regular 2D UI apps with very fancy skins (which by my understanding was one motivation for Flex).  My studio itself has built web games both with Flex compoents and pure in-house Flash, and so have many other studios in the industry.  If you think this is some esoteric use case, apologies, but you're entirely myopic about a very large portion of the community.

                         

                        For either of those, I'd use straight visual elements; most likely an FXG Rectangle or two for a mobile app.

                         

                        Why?  Why in the world would you sacrifice the abstraction of a ProgressBar interface to directly deal with a graphics rectangle?  That's the exact opposite of good object-oriented encapsulation.  A ProgressBar is exactly the encapsulated interface on top of a rectangular display I need - my controller code shouldn't have to care about the height/width of the progress bar or its masking layer, just what % to set it at.  (For that matter, my controller code shouldn't even care if it were actually using a pie-chart to represent the % instead of a bar).

                         

                        Seriously, are you trying to convince me that this is not a glaring omission from the Flex Mobile kit?  The iOS native kit has one (UIProgressBar), the Android native kit has one (ProgressBar), and the BlackBerry native kit has one (GaugeField).

                        • 9. Re: ProgressBar on Flex Mobile? Howto?
                          JeffryHouser Level 4

                          PresidentCamacho wrote:

                           

                          In terms of use cases for Flex; a game is farthest from.

                           

                          Once again I must apologize for pointing out your short-sightedness,


                          Now you're just being an *** by calling me short sighted.

                           

                          It's a plain fact that Flex was not designed as a gaming framework.  It was designed for building business applications.  Sure, you can use it to build anything you want.  But, if you want to build games there are other ActionScript frameworks out there designed for that purpose.

                           

                          PresidentCamacho wrote:

                          For either of those, I'd use straight visual elements; most likely an FXG Rectangle or two for a mobile app.

                           

                          Why?  Why in the world would you sacrifice the abstraction of a ProgressBar interface to directly deal with a graphics rectangle?

                           

                          I'm sorry, I don't think I said anything about sacrificing abstraction.  I just think a progress bar for the use case you state is overkill; and believe a simpler component could do the job.

                           

                          Seriously, are you trying to convince me that this is not a glaring omission from the Flex Mobile kit?  The iOS native kit has one (UIProgressBar), the Android native kit has one (ProgressBar), and the BlackBerry native kit has one (GaugeField).

                           

                          In terms of things missing from the Flex Mobile Component set; I think that are plenty of things more important than a progress bar.

                          • 10. Re: ProgressBar on Flex Mobile? Howto?
                            PresidentCamacho Level 1

                            Now you're just being an *** by calling me short sighted

                             

                            Yes, that's right, because instead of ever trying to answer my original question, you [1] start with the view that Progress Bars are only ever used as loading bars and file-copy bars (really, seriously?), [2] you insist on dismissing this as some sort of game-specific problem (no, I've never, ever seen a progress bar in a productivity app, god forbid the thought!), [3] then you insist that a progress bar is overkill for what I want (which is your most ludicrous claim to date, that's like saying a fly-swatter is overkill for swatting a fly).  This is called a non-constructive.  You can't answer my question, you've so utterly demonstrated you're full of ****, and now you're flailing wildly to defend yourself, which I'm finding extremely amusing.  Please, stop it before you hurt yourself.

                             

                            My point remains: this is the first major UI kit I have ever seen that did not have a built-in progress bar implementation; I find that hard to believe, and I have found no credible explanation for why this situation persists so long into Spark development, especially considering the relative simplicity of such a component.

                             

                            Either help me get a ProgressBar (or an equivalent 3rd party component) to display in Flash Builder Design mode on a Flex Mobile project, or pipe down.  I started this thread for constructive technical information for everybody's benefit, not for your opinion and non-answers.

                            • 11. Re: ProgressBar on Flex Mobile? Howto?
                              JeffryHouser Level 4

                              PresidentCamacho wrote:

                               

                              Now you're just being an *** by calling me short sighted

                              Yes, that's right, because instead of ever trying to answer my original question, you [1] start with the view that Progress Bars are only ever used as loading bars and file-copy bars (really, seriously?),

                              I'm still waiting for use cases to the contrary.  Your two use cases (*Bar Chart" and Status Bars) have nothing to do w/ showing the progress of something.

                               

                              [2] you insist on dismissing this as some sort of game-specific problem

                               

                              I did not do that.

                              [3] then you insist that a progress bar is overkill for what I want

                              That I probably did communicate.  Honestly, I haven't the foggiest idea what your specific needs are; but based on what you have said, I still don't understand how a progress bar is what you're looking for; as there does not seem to be a "source" that you'd be showing progress for.

                               

                              Best of luck; I'm glad I amused you.

                              • 12. Re: ProgressBar on Flex Mobile? Howto?
                                PresidentCamacho Level 1

                                [Personal attack deleted by moderator]

                                • 13. Re: ProgressBar on Flex Mobile? Howto?
                                  JosephLabrecque Adobe Community Professional

                                  If you are unsatisfied with the current progressbar component, why not just build your own? The Flex framework is open source and you could easily deconstruct the current implementation and reconstruct what you find into something that fits your needs. I mean, instead of launching personal attacks on public forums.

                                  • 14. Re: ProgressBar on Flex Mobile? Howto?
                                    PresidentCamacho Level 1
                                    If you are unsatisfied with the current progressbar component, why not just build your own?

                                    I'm not unsatisfied with it in itself, it's the way I got it working - as described when I answered my original post above - seems really hacky and wrong to me.  I wouldn't have to do that, except for the particular circumstance of Flex Mobile projects only allowing Spark components in the designer, and the ProgressBar missing without official explanation of any sort (really, a ProgressBar is too computationally expensive? that's just laughable, prima facie - get real).

                                     

                                    This isn't rocket science, I'm just trying to find out if what I'm doing is in fact the only way to get a progress bar that I didn't roll myself with this version of Flex.  And I'm trying to find out if I'm the only one a bit incredulous about that.

                                     

                                    I mean, instead of launching personal attacks on public forums.

                                    As for personal attacks in public forums, what do you want me to do when somebody dubbed a professional (and relying on their online reputation here) trolls my thread with constant misdirection, how else do I rid myself of such a self-righteous ruffian?  Apologies, but if you put your name up that way, you had better act like a professional, which involves giving others some common professional courtesy.  How many times and ways do I have to state that Progress Bars have legitimate uses besides as load % indicators, and why does that even really matter to the question?  It's very frustrating when, as a seasoned professional, I've done my research, I'm asking a very pointed technical question backed by said research, and some asshat on the forums decides he thinks he knows my job and all my other considerations better than me, asks all sorts of unrelated questions and makes unrelated judgements, wasting my time and everybody else's.  I'm not asking for "please give me teh codez" here, I expect a little more consideration from you "community professionals" - if anything, that guy should have kept his mouth shut and never said anything, none of his posts have been the least bit constructive to the thread topic in any way.

                                    • 15. Re: ProgressBar on Flex Mobile? Howto?
                                      JosephLabrecque Adobe Community Professional

                                      I'd say that yes, an official progressbar would be nice. Perhaps the Spoon Project [http://www.spoon.as/] will help in that regard. There a a lot of things that could be added to the framework for sure, but I don't think you'll get any real answers to your particular problem here unless someone from Flex engineering steps in. Lots of people author their own component implementations and they can often seem hackey- but we work with the resources we are afforded.

                                      • 16. Re: ProgressBar on Flex Mobile? Howto?
                                        Shongrunden Adobe Employee

                                        Please keep this civil.

                                         

                                        The mx:ProgressBar component in Flex is designed to be shown to a user to signify that some operation is taking place that will take some amount of time to complete.  The progress of this operation can be shown either as a determinate progress bar (the percentage completed is always known and displayed to the user) or indeterminate (the percentage complete is never known).

                                         

                                        Using a progress bar to show time remaining is quite often seen in desktop applications, but is less common in mobile applications.  Instead mobile applications tend to use an indeterminate spinning disc.  Since the spinning disc use case was much more popular on mobile devices the spark BusyIndicator component was added in Flex 4.5.

                                         

                                        It sounds like you are looking for a more general component that isn't designed specifically for showing the progress of something over time, but rather displaying a value as it relates to a max value.  For that you might want to consider using the spark Range component (http://opensource.adobe.com/wiki/display/flexsdk/Spark+Range) that was also introduced in Flex 4.5.  The Range component's API looks to be along the same lines as the Android SDK ProgressBar and BlackBerry GaugeField.

                                         

                                        <s:Range maximum="100" value="50" skinClass="spark.skins.spark.ImageLoadingSkin" />

                                        • 17. Re: ProgressBar on Flex Mobile? Howto?
                                          PresidentCamacho Level 1

                                          Shongrunden, +10pts for actually having the answer!  Good to see this new functionality has made it into 4.5.1, I've got it running on iOS right now, although it appears the Design view render is broken (is that right?).  Is there any way to make these components available directly within the designer UI, or is that still forthcoming?  Thank you very much, I thought hacking the MX ProgressBar was a little too goofy at this point! Rock on!

                                           

                                          (Funny footnote - the object hierarchy of these new implementations is very similar to our homebrew web UI kit - can't say I'd argue with that )

                                           

                                          Ironically, from your link (emphasis added):

                                          Usage Scenarios


                                          • 18. Re: ProgressBar on Flex Mobile? Howto?
                                            Shongrunden Adobe Employee

                                            I don't believe there will be any Design View support for the Range component since it's mostly a base class.

                                             

                                            Edit: I mistakenly mentioned that Range was introduced in 4.5, it was actually introduced in 4.0.