Part 30: Adding a Progress Indicator
When our app launches, it will need to ascertain the current GPS position and update the Map control. That could take a little and we want to give the user of our app some visual feedback that all is fine and the application is still working.
So, here's the gameplan:
- We'll create a new ProgressIndicator object and tell our SystemTray to use it when it needs to display a ProgressIndicator
- I'll create a helper method that will show or hide the new ProgressIndicator
1. Understanding the Progress Indicator
It's hard to visualize exactly what the SystemTray and Progress indicator look like in an app. I used an example on this page:
To help me see what it is I'm working with here:
In the screenshot (above) I was able to set the SystemTray to a transparent purple color, and set the foreground color to yellow.
The SystemTray is ever present even if it's hidden at times depending on what we're doing with our phone. The current time is part of the SystemTray as well.
We can create a new ProgressIndicator object and give it to the SystemTray to use as the current ProgressIndicator for our app. We can then show and hide it at will.
In our app, I'll use the ProgressBar to provide feedback initially while the app is determining it's GPS position and populating the map. I'll write some logic that will hide and show the ProgressIndicator.
First step: create a new ProgressIndicator when our MainPage has loaded ...
2. Create a new ProgressIndicator() object and set it as the SystemTray's current ProgressIndicator.
Adding the ProgressIndicator was easy ... now we need to invoke it or hide it as needed.
3. Create a helper method to show / hide the ProgressIndicator
The helper method will merely take a boolean which will then turn the ProgressIndicator's animation on or off (line 92) and will show or hide the ProgressIndicator itself (line 93).
4. Modify the UpdateMap() method to use the ProgressIndicator and helper method
Now that we have this helper method, we'll use it in our potentially long running UpdateMap() method. In fact, we'll update the user on the progress by changing the text of the ProgressIndicator throughout the various states of the UpdateMap() method:
- Line 43 calls the new helper method to show the ProgressIndicator and turn on the animation. Line 44 sets the initial text of the ProgressIndicator ... at this point, we're starting the process of getting the GPS location.
- We update the ProgressIndicator's text to let it know we've acquired the GPS location.
- We hide the ProgressIndicator and turn off the animation.
Let's see it in action (F5).
If your internet connection is fast, you might blink and miss the action. If the user has poor reception on their phone, it might be the only thing letting them know that the app is still functioning.
Just to recap, the big take away from this lesson is learning what the SystemTray is, and how to pass it a ProgressBar that we can show and hide and change the text of to keep users informed about the progress of long running operations in the app.
Available formats for this video:
Actual format may change based on video formats available and browser capability.