FROM THE BLOG

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:

adf_progress_bar_11

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;

adf_progress_bar_02

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;

adf_progress_bar_05

And overriden the abstract methods;

adf_progress_bar_06

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;

adf_progress_bar_09

If we run the application;

adf_progress_bar_08

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);

adf_progress_bar_10

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;

adf_progress_bar_11

Leave a comment

Your email address will not be published. Required fields are marked *

Social Media

Stay up-to-date with our latest ADF and related technical posts via your favourite social network services.