Skip to main content
P
PresidentCamacho
Participating Frequently
June 25, 2011
Answered

ProgressBar on Flex Mobile? Howto?

  • June 25, 2011
  • 2 replies
  • 12221 views

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...

    This topic has been closed for replies.
    Correct answer Shongrunden

    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.


    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" />

    2 replies

    S
    Adobe Employee
    Shongrunden
    Adobe Employee
    June 25, 2011

    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

    P
    PresidentCamachoAuthor
    Participating Frequently
    June 25, 2011

    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?

    Lee_Burrows
    Lee_Burrows
    Participating Frequently
    June 25, 2011

    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

    P
    PresidentCamachoAuthor
    Participating Frequently
    June 25, 2011

    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?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices