The Progress Indicator
In my last posting I had a look at how the poll component can be used
to schedule regular updates on a page. One of the common uses for that
component is in monitoring a long running job taking place on the
server. The ADF faces component set provides a second component to help
with the visualization of the server side process providing that all
important reassurance to the user that something is actually happening.
This component is <af
rogressIndicator>. The
progressIndicator
will nearly always be associated with a <afoll>
component and
updated using a partial page rendering (Ajax) event whenever the poll
event is processed. This relationship is managed using the standard
partialTriggers property on the progress bar.
A plain progressIndicator will just show a never ending "spinner"
like this:
src="http://www.groundside.com/tech/docs/progress1.png"/>
So how do you get it to show a progress bar? For that to happen you
need to back the widget with an implementation of a
BoundedRangeModel(oracle.adf.view.faces.model.BoundedRangeModel). The
BoundedRangeModel is an abstract class that has two methods
that need to be implemented. These are:
- public long getMaximum() - return the "target" value for
the progress bar - public long getValue() - return the "current" value for the
progress bar.
Based on the relationship between these two values the percentage done
of the progress bar is calculated. If either of the values returns -1
then the bar reverts to "spinner" mode.
Here's a simple impl of a BoundedRangeModel that implements a countdown
from the time of setting to a Date/Time in the future. Here
I've also exposed a set/getTargetTime() method so that I can bind to a
field to set the target time for the countdown:
public class CountdownProgressRangeModel extends BoundedRangeModel {
Date targetTime, timeOfSetting;
long targetInMils;
public long getMaximum() {
Date now = new Date();
long result;
if (targetTime==null||targetTime.before(now)) {
result = -1;
}
else{
result = targetInMils;
}
return result;
}
public long getValue() {
long result;
Date now = new Date();
if (targetTime==null||targetTime.before(now)) {
result = -1;
}
else{
result = (now.getTime() - timeOfSetting.getTime());
}
return result;
}
public void setTargetTime(Date targetTime) {
this.targetTime = targetTime;
this.timeOfSetting = new Date();
this.targetInMils = (targetTime.getTime() - timeOfSetting.getTime());
}
public Date getTargetTime() {
return targetTime;
}
}
Calling setTargetTime() in this case kicks the progress bar
into action provided that the target time is in the future.
When the progress bar maximum value is reached then the
component can call an action event just like a commandButton and
therefore navigate elsewhere.
Here's a image of the progress bar in action:
Comments:
I just used it...
But currently i can't get the exact image for progress indicator as shown above...
I just can display the percentage only..
It's related to the custom skin or what?
22/08/06 @ 11:01 Comments are closed for this post.