ADF Tutorial: How to use ProgressIndicator as a Progress Bar in table’s column, list or iterator.
Progress Bar is one state of the af:ProgressIndicator component – an useful multi-component designed to “give users an indication that there is a back end task in progress” or anything that has a measurable start and end.
Imagine the use case where you need to show how much has been completed for an specific task (task can mean whatever you like). Let’s say, for an organization, each person is required to complete an specific amount of training in order to get promoted. We will implement this based on the Work Better demo application provided by Oracle.
This is what we would like to have:
The only business requirement needed to implement this is to be able to get, for each individual, a double / long value representing the percentage completed. We cheated and used a random function to populate this percentage;
Now, when you drag and drop the progress indicator into your page, you might be tempted to put the percentage attribute as the value for the component. This won’t work (I haven’t even tried it). The progress indicator component expects a java class that at least extends the org.apache.myfaces.trinidad.model.BoundedRangeModel class. See below, we create a class extending this object;
And overriden the abstract methods;
As you see, because our percentage range is 0 – 100, we know that the maximum is always going to be 100 so no logic goes in there. The value will be the completedTrainingPc for each item (person). this bean is registered with backingBean / request scope and now we can actually assign the value to our progress indicator;
If we run the application;
If we wanted to hide the 0% and 100% labels, a quick skinning will do the trick. We need to first find the selector, we can use inspect element from chrome (note that you need the org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION set to true to be able to see the actual class);
We infer that what we need is af|progressIndicator::determinate-start-label and end-label so adding the following in the skin file will do the trick (also note that this will affect all progress bar in the application – ideally you create your own class and apply it to the progress indicator component in your page);
af|progressIndicator::determinate-start-label{
display:none;
}af|progressIndicator::determinate-end-label{
display:none;
}
We also removed the label and the final result is;